CSS (Cascading Style Sheet) is one of the three cornerstones

of the web, along with HTML and JavaScript. It’s what brings life
to websites through colours, styling, positioning and much
more. Thus, knowing CSS is hugely valuable in today’s labour
market!

So I’m happy to announce that we’ve just launched a free CSS

course on Scrimba. It’s created by our brilliant instructor Eric
Tirado, who also did our popular intro to HTML course.
In less than an hour, Eric will take you from zero to proficient in
CSS!

Let’s have a look at how the course is laid out.

Part #1: Introduction
In the introductory video, Eric will give you an overview of what
the course looks like, what the pre-requisites are, plus an
overview of the topics he touches throughout the course. He
also gives you a brief introduction about himself so you get
familiar with him before jumping off.

Part #2: CSS Documents & The Cascade

We then jump directly into the first formal lesson of the course.
In this one, we will be looking into the ways we can include CSS
in our HTML pages and how to start applying basic stylings on
our elements.
Part #3: CSS Selectors, Properties, & Values
In the second lesson, Eric talks about some of the CSS
vocabulary which sets you up to better understand concepts he
goes through in later lectures. You’ll learn what HTML elements
are, what CSS selectors are, and how you can apply properties
and assign values to them.

CSS Vocabulary
So, for example, this is an h1 element. It has some default
styling which appears when you render it in the browser. If we
want to change some styling, we can use CSS:
h1 {
color: 'red';
}
The selector for our h1 element is simply the name of the
element itself, and then we assign it the property of color with
the value of red. In the same way, we can select elements using
Classes and IDs as well, which is discussed in later videos.
Part #4: Classes and IDs
This part of the course discusses how to use classes and IDs in
CSS to select HTML elements and apply different styling on
them. It also discusses in detail the difference between Class
and ID, and how and when we assign them on HTML elements

Look at the following code for an example:

<h1 class='heading'>This is the heading tag</h1>

<p class='paragraph'>This is a paragraph tag</p>

The above snippet consists of an h1 (heading) and
a p (paragraph) tag. We have given h1 element the class
of heading and our p element the ID of paragraph.
In our CSS file, we select the heading class and give it the
property of color. Later we select the paragraph ID and give it
the properties of color and font size:

.heading {
color: blue
}

#paragraph {
color: green;
font-size: 14px;
}

Part #5: Specificity

In part 5 of the course, you’ll learn about specificity, which
means how a browser would know which styles and rules are
most relevant for an element to apply.
<h1 class='heading'>This is the heading tag</h1>
For example, here we have an h1 tag with the class of heading
applied to it.
h1 {
color: blue;
}

.heading {
color: green;
}
Using CSS, we assign the colour of blue to h1 tag which will
change the colour of every h1 . We also then assign the colour
of green to class heading, so that every element with this class
will have its colour overridden to green. So the h1 tag we
defined above will appear as green.
Part #6: Width & Height
In this lesson, you’ll learn how to apply width and height in order
to control the formatting and flow of the page.
 Above is a slide from the lesson, which will give you an idea of
how we can create sections and boxes using width and height
to make our web page look properly formatted.

Part #7: Length Units

In CSS, we can use different units to measure the different
sizes we pass in as properties of our HTML elements. This
lesson discusses in detail what those different units are and
how they differ in usage.

There are two types of length units:

1. Absolute Units
2. Relative Units.
Absolute units are fixed length units, and a length which is
expressed in any of them will appear as exactly that size. For
example, cm, mm, in, 'px, and so on are absolute units.
On the other hand, relative length units specify a length relative
to another length property. For example, em, ex, rem, and so on
are absolute units.
Part #8: Colors
This lesson discusses in detail how we can use and apply
colours to different HTML elements. It also discusses different
ways we can declare the name of the colour in our CSS
properties.

.heading1 {
color: orange;
}

.heading2 {
color: #ff6347;
}

.heading3 {
color: RGB(255, 99, 71);
}
The example above has three classes declared with the same
property of colour assigned to them. But the point to notice is
how we have used different ways to assign the values of
colours.

Class heading1 uses the name of the colour (orange) as its

property. heading2 uses the hex value of the colour.
And heading3 uses the RGB value of the colour.
Part #9: Padding
In CSS, padding is used to create spaces around an element’s
content inside any defined borders. In CSS, you have the
control to apply padding to all or any side of the elements.
Lesson 9 of this course talks about padding and teaches you
how you can apply it in different ways.

.container {
padding: 10px;
/* padding-left: 10px; */
/* padding-right: 10px; */
/* padding-top: 5px; */
/* padding-bottom: 5px; */
}
Like in the example above, we can either just use the property
of padding, which will apply the spacing to all the sides, or
alternatively, you can give padding to individual directions.
Part #10: Borders
In this lesson, you will learn how you can apply borders around
your content. You’ll also learn about the variations you can give
to the borders using different styles and options available in
CSS.
Take the example of the box in the above picture and notice the
borders around it with different colours and width.

Part #11: Margins

Margins in CSS are like padding: they apply spacing around the
element but they do it outside of any defined border. This
lesson talks about using margins inside your CSS, and how you
can apply the same margins in all directions or different margins
in different directions.

.container {
margin: 10px;
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-top: 5px; */
/* margin-bottom: 5px; */
}

Part #11: The Box Model

The Box Model in CSS is a term we use when we describe
design and layout. We can think of all the HTML elements as
boxes where each box contains properties of margins, padding,
borders, and so on.
The above illustration explains the conceptual model of the box.
In this lesson, Eric will explain how we can use this concept to
better design and arrange our elements.

Part #13: Visibility

We can also update the visibility of any element in HTML using
CSS. We can, for example, hide or display any element using
the property of display. This lesson explains three different
ways in which we can play with the visibility of elements.
.hidden {
display: none:
}
One of the three ways to update visibility is using
the display property. In the example above, we have set
the display property to none so that any element which has the
class of hidden won’t appear in the browser at all.
Part #14: Fonts
Fonts are one of the most important and useful features of CSS.
We can play with different kinds of font styles and font families
to make our text look good. Lesson 14 of this course is all about
using fonts!
In the image above, the text Hello World has the font-
family of Black Han Sans’, arial, sans-serif and the font-
size of 30px. In the same way, we can apply different properties
to make our text look more appealing and beautiful.
Part #15: Element Flow
In this section of the course, you will be learning about the
typical flow of elements on how they are rendered inside the
browser. There are two types of HTML elements: Inline and
Block elements

Inline elements can not take the width and height properties.
They will always be as big as their content. However, on block
elements, you can set both width and height as you like
Part #16: Float & Clear
In the lesson, you’ll be learning about
the float and clear properties. These are very useful if we want
to control the position of HTML elements to float left or right of
each other.
Part #17: Float Layout Challenge
Here comes the challenge of this course. In it, you’ll be
encouraged to create the following layout using
the float properties. Later in the screencast, Eric will teach you
how to do it in case you faced any difficulties.
Part #18: Position Property
In this lesson, we’ll design a simple article page where we’re
using the available positioning properties. We will be working
with divs, text content, span, and footer.

At the end of this lesson, you’ll be able to create a layout like

this:
Part #19: Pseudo Classes / Elements
In the final lesson, we will learn about pseudo classes and
elements. We use pseudo-classes to make some advanced
level selections of our HTML elements. This is a very useful
technique when we are dealing with complex web pages that
have multiple elements and conditional stylings

/* unvisited link */
a:link {
color: aqua;
}
/* visited link */
a:visited {
color: orange;
}
For example, in the above code snippet, we are applying
different classes to the anchor tag using its state of whether it
has been visited or not. There are thousands of use cases for
using pseudo-classes, and this lesson will help you understand
the basic concept of using them.

Part #20: What’s Next?

In this last screencast of the course, Eric wraps up what you
have learned throughout the course and gives you tips on
continuing your learning journey.

CSS is a vast topic, and they are many more features to learn
apart from what was covered during this course!