MrBool

Mrbool Courses

Online course

Cascading Style Sheets (CSS/CSS3)

In this course, we will learn the details of CSS (Cascading Style Sheets). CSS is a style sheet language that describes the presentation of a document written in a markup language like HTML. Using CSS, the designer can manipulate elements such as layout, colors, and fonts. With CSS, the document content is separated from the presentation, which provides a lot of flexibility in future changes and enables multiple pages to share formatting. A style sheet is made of rules, and each rule is made of one or more selectors and a declaration block. CSS is supported in all major browsers. Some of the latest features might not be, but we will point those out as we are covering them. As we progress through the course, we will also experiment with the new features added in CSS3.



  • Introduction

    • 1

      Introduction to CSS

      Mark as viewed

      In this video, we start the CSS course. This course covers all you need to know about CSS. We will also discuss the new features added in CSS3. The examples will be simple HTML pages plus the CSS feature we are trying to explain.

    • 2

      Applying CSS to Different Elements

      Mark as viewed

      In this video, we continue our CSS discussion. We learned in the previous lesson that we use CSS to apply styles to HTML elements. We can change the background of a div or the font of the page.

    • 4

      Descendant

      Mark as viewed

      In this video, we continue our discussion of CSS by talking about descendant and direct child.

  • Styling Elements

    • 5

      List Styling

      Mark as viewed

      In this video, we will discuss how to style a list. We will create an unordered list and apply the different styles on it. Along the way, we will learn about the difference between display and visibility.

    • 6

      Background

      Mark as viewed

      In this video, we will discuss how to work with background. We briefly experimented with backgrounds before. But today we will discuss that in detail. We will start by setting the background color for the page and other elements.

    • 7

      Working with text

      Mark as viewed

      In this video, we will discuss how to use CSS to style text. There are different properties that give us the control that we need. As we have set the background color, we can also set the color of the text.

    • 8

      Links and Fonts

      Mark as viewed

      In this video, we will continue our discussion of links and fonts. We will have a brief discussion of fonts, specifically variant, weight, and size. Then we will explain a bit more about links.

    • 9

      Working with tables

      Mark as viewed

      In this video, we will learn about styling tables. We will start by creating a table that contains technologies and years of experience.

    • 10

      Miscellaneous Items Part 1

      Mark as viewed

      In this video, we will learn about multiple styling items. We will start with how to set the max and min, width and height, then we will move to the difference between outline and border.

    • 12

      Floating

      Mark as viewed

      In this video, we will see how to float the element to the left or right of the page using the float attribute, add some margin and border to highlight the image and keep it a bit away from the text. And finally, we will see how to display a gallery of images using the float attribute.

    • 13

      Creating Menu

      Mark as viewed

      In this video, we will learn how to create a menu from what we have learned so far. We will start by creating an unordered list of items that mimic some of the browser menu elements.

    • 14

      Miscellaneous Items Part 2

      Mark as viewed

      In this video, we will discuss more styles. First, we will start with the input tag, then we will work with an ordered list. Finally, we will talk about quotes and sub-quotes.

    • 15

      Pseudo-Elements

      Mark as viewed

      In this video, we will start our discussion by talking about pseudo elements. We will create couple of paragraphs, and see how using pseudo elements we can change the style for the first letter in the paragraph, and the first line as well and so on.

    • 17

      Pseudo-Classes

      Mark as viewed

      In this video, we proceed with the CSS3 discussion. Specifically, we will be talking about pseudo classes.

    • 18

      Transform

      Mark as viewed

      In this video, we proceed with the CSS3 discussion by talking about transforms. We will take the Mr Bool image displayed on the page and try to apply the different transforms to it.

    • 19

      Animation

      Mark as viewed

      In this video, we will talk about another CSS3 feature, which is animation. Today, we will switch to Notepad++ to align our videos with the user’s feedback.

    • 20

      Transition

      Mark as viewed

      In this video, we will discuss transitions. Transitions are effects that let an element gradually change from one style to another. We start by indicating the property we want to add the effect to, and then the duration of the effect.

    • 21

      Tooltip

      Mark as viewed

      In this video, we will talk about how we can create a tooltip using CSS. As you know you can use some JavaScript to handle some tooltip features (like adding a delay before showing the tooltip).

    • 22

      CSS Tools Part 1

      Mark as viewed

      In this video, I will discuss some of the tools that we can use when creating CSS. So far in this course we have covered the different features we can use in CSS and CSS3.

    • 23

      CSS Tools Part 2

      Mark as viewed

      In this video, I will continue the discussion of some of the tools that we can use when working with CSS. As I indicated in the previous video, these tools help us create CSS elements faster.

    • 24

      Centering and Floating

      Mark as viewed

      In this video, we will talk about centering and floating. First, we will start with centering elements on the screen. We will have an article and an image.

    • 25

      Combinators

      Mark as viewed

      In this video, we will talk about combinators. So the idea is that if I need to change the style of some elements, how can I have access to descendants, direct children and siblings?

    • 26

      Tables

      Mark as viewed

      In this video, we will talk about applying CSS to tables. As you know tables still play an important role in html pages. In many cases you need to style those tables in a way to bring attention to the user.

    • 27

      ::before and ::after pseudo-elements

      Mark as viewed

      In this video, we will talk about generated content. Specifically, we are discussing the ::before and ::after pseudo-elements to add content to the page. We will start with a simple page that contains some articles and an image.

    • 29

      How to create Ribbons

      Mark as viewed

      In this video, we will learn how to create ribbons. We will try to take advantage of ::before and ::after that we have learned about in previous videos.

    • 31

      Using Columns

      Mark as viewed

      In this video, we will learn how to create multiple columns (like newspaper columns). There are many properties in CSS3 that support this.

    • 32

      Columns and Gradients

      Mark as viewed

      In this video, we will continue the column discussion and talk more about gradients. In the previous video, we discussed the columns and how we can specify the count, fill, color, style, and gap.


Rating
554

funded

remaining