MrBool
×

Click here to login

If you don't have a registration, click here to register

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.

Rating
554
  • Introduction

    • 1

      Introduction to CSS

      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. Watch this video
  • Styling Elements

    • 5

      List Styling

      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. Watch this video
    • 6

      Background

      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. Watch this video
    • 7

      Working with text

      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. Watch this video
    • 8

      Links and Fonts

      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. Watch this video
    • 9

      Working with tables

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

      Miscellaneous Items Part 1

      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. Watch this video
    • 12

      Floating

      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. Watch this video
    • 13

      Creating Menu

      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. Watch this video
    • 14

      Miscellaneous Items Part 2

      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. Watch this video
    • 15

      Pseudo-Elements

      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. Watch this video
    • 18

      Transform

      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. Watch this video
    • 19

      Animation

      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. Watch this video
    • 20

      Transition

      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. Watch this video
    • 21

      Tooltip

      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). Watch this video
    • 22

      CSS Tools Part 1

      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. Watch this video
    • 23

      CSS Tools Part 2

      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. Watch this video
    • 24

      Centering and Floating

      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. Watch this video
    • 25

      Combinators

      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? Watch this video
    • 26

      Tables

      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. Watch this video
    • 27

      ::before and ::after pseudo-elements

      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. Watch this video
    • 29

      How to create Ribbons

      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. Watch this video
    • 31

      Using Columns

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

      Columns and Gradients

      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. Watch this video