Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started
← Back to Lessons
Edit on Github

Learn CSS: What is CSS Meant for?

Welcome to CSS!!
Wait… What is a "Selector"??

Welcome to CSS!!

We are sure that after diving deep into HTML, everything looks kind of ugly, fixed, and rigid. We have to remember that HTML was created by CERN scientists, and they’re not – usually – the funniest kind of people (although they are the same exact scientists that discovered The Higgs Boson; and we do have to bow to our knees for that). However, HTML is still ugly, and it’s ugly because it was created for a different purpose than the one HTML meets today.

what is css

But… The Internet is more beautiful than that. When the internet became popular, it stopped being only a privilege for scientists and the army, and evolved to become part of our world!!

Ironically, the same scientists at CERN who created HTML had to think about how to improve it. They were given the task of making it more beautiful. It was at this time that Håkon Wium Lie proposed the first version of CSS in 1994, which was later adapted to become CSS1.

So, what is CSS, and why does it matter??

what is css

The main objective of his creation was to apply styles to HTML documents. The idea is to let you tell the browser how to display an HTML document: how to render its tags, in what color, margins, typography, icons, borders, etc. You can even redefine the original behaviors of the existing tags at your will. Ex:

1You could tell an <h1> to look just like an <h2> without the user realizing that, at first glance, they are different.

☝️To understand the potential of CSS, click here to see a live demo!

Can you imagine the potential? You can make almost everything look different!

How do I apply styles to HTML?

It's quite simple, you have to write your styles in a special syntax called "CSS" and save them on documents with the extension CSS. Then, you apply the styles to the document using the <link> or the <style> tag.

Let’s review those 2 tags in more detail:

NameTagDescription
Link<link>The purpose is to link the page with CSS stylesheets. To use it, you must specify three attributes within the tag: rel="stylesheet" type="text/css" and finally href="with document route css"
like so: <link rel="stylesheet" type="text/css" href="theme.css"/>
Style<style>If we do not want or can’t import a CSS style sheet, we have the alternative to define styles in the HEAD of the HTML document. We simply define the style tag and proceed to write the styles we want for the tags.
<style>
h1 { color:red; }
p { color:blue; }
</style>

☝️ Just like it happens with HTML docs (ending with .html) CSS docs (style sheets) end with extension .css

CSS Syntax

The CSS syntax is nothing similar to HTML syntax, it is its own specific programming language. CSS does not use tags! To work with a website you have to shift your mindset several times because you will be working with several languages at the same time, and each one has its own syntax.

learn css

A CSS style sheet is a huge list of style definitions for each HTML element. First, you must specify which element – or group of elements – you are going to style; this is called a SELECTOR. Then you have to put a key { to indicate that you are going to start defining each attribute and its respective value, and you end that with another key }. You should always finish each attribute definition with a semicolon ;.

Watch the previous animation for a better understanding.

☝️Spaces are ignored, but you need to use them to make your code easy to read.

The next example is a style sheet defining 3 different groups of styles (#id-selector, .class-selector, and tag-selector); and each of these groups has different rules applied like: color, font size, and background color.

You need to match HTML elements to groups of styles and use "selectors" to bind the HTML elements to the CSS groups of rules.

1#id-selector { 2 color: red; 3 font-size: 12px; 4} 5.class-selector { 6 color: blue; 7 background: green; 8} 9tag-selector 10{ 11 font-size: 15px; 12}

Wait… What is a "Selector"??

A selector is a way to refer to or identify one or more HTML elements. For example, if you want to change the color of your website to red, you must do as it follows:

1body { 2 color: red; 3}

You could also change the color of a single anchor <a>. To do that, you must define a class or an id attribute of the HTML tag defining that particular link <a class="anchor1">. Classes are a preferred use with CSS over IDs due to the fact that the former are reusable and the latter are more often used in conjunction with JavaScript. Once the tag has a class, then you can go to your style sheet and define the color rule as follows:

1.anchor1 { 2 color: red; 3}

The next tables show a list of all possible types of selectors available to use in CSS. Please take your time to review them carefully. Your understanding here is key to continue with CSS since you need to understand every possible style you can apply to an HTML doc:

ID Selector

SelectorDescriptionExample
#element_idAllows the possibility to apply styles to a particular element#element_id { color: red; }

Let’s assign "first" as the ID of the first cell in the next table, and then with CSS we are going to specify that the ID "first" will have a yellow background:

Class selector

SelectorDescriptionExample
.classnameThere is an attribute in HTML called "class", which allows us to group different tags within one logical group. With CSS we can use . (dot) as a selector of every element using the class name to select all html elements with that class attribute..classname { color: #BDBDBD; }

In the next example we are applying an "odd" class to the cells of this table, and then with CSS we are assigning the yellow background to class .odd:

Tag selection

SelectorDescriptionExample
Element (tag) typeThis makes it possible to apply styles to links, titles, etc. In the next example we shall change the text color of every link tag <a> on the page.a { color: #BDBDBD; }

Next, we are adding color (green) to the background of each td (cells) of the table:

Multiselector

SelectorDescriptionExamples
selector1, selector2If you separate multiple selectors with a comma , you can assign multiple selectors at the same time to save text. In the following example we tell all the h1 and .odd class elements, that we want their text to be red.h1, .odd{ color: #BDBDBD; }

Pseudo selectors

1a:link{color: green;} 2a:visited{color: yellow;} 3a:hover{color: blue;} 4a:active{color: red;}

Advanced Selectors

With these 4 ways to select you are covering 99% of your needs; here what is important is to plan which will be on your Style sheet.

There are other specific and advanced selectors. You are probably going to use them when you start building something more challenging.

Conflicts and correspondence

What happens if an element of the page is selected in two different selectors and has the green font color assigned to one definition and red in the other? In other words, if we have told the browser to find two different colors, what color will it end up getting?

learn css

You must have a very good understanding of the CSS hierarchy in order to understand how the elements correspond, overwrite, and even null styles between them.

The browser gives priority to more specific selectors like #id than the more general selectors like tags. In the following example, we changed the color of all the <li> (the items in the list) to blue, but then we changed the text of the second element to red. In this way we demonstrate that the ID selector will always prevail over selecting all the elements with the same tag.

Properties

We have already seen that a CSS style sheet is nothing more than a list that defines the properties that we want to assign to different elements of the page. Now we have to learn what properties we can assign to these elements.

There are hundreds – even thousands – of CSS properties, but depending on the type of element/label that we want to define, we must focus on specific properties.

Typography editing

PropertyDescriptionValues
font-familyfont type (font)name-font | generic-family
font-sizesize of the fontabsolute-size | relative-size | distance | percentage
font-styleinclination (italics)normal | italic | oblique

Text editing

PropertyDescriptionValues
colortext colorcolor
letter-spacingspace between lettersnormal | distance
line-heightspace between linesnormal | number | distance | percentage
text-aligntext alignmentcenter | justify | left | right
text-decorationtext ornamentnone | line-through | overline | underline
text-transformcapital / small fontsnone | capitalize | lowercase | uppercase

List editing

PropertyDescriptionValues
list-stylecompound property (sum of every property combination)list-style-image || list-style-position || list-style-type
list-style-imagemarker imagenone | url
list-style-positionmarker positioninside | outside
list-style-typemarker typenone | circle | disc | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-roman | upper-roman | armenian | georgian | hebrew(-) | cjk-ideographic(-) | hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-iroha(-)

Table editing

PropertyDescriptionValues
border-collapseborder modecollapse | separate
border-spacingspace between cellsdistance | distance
caption-sidecaption positiontop | bottom
empty-cellsempty box borderhide | show
table-layoutalgorithm width of the tableauto | fixed

Background editing

PropertyDescriptionValues
background-colorbackground colortransparent | color
background-imagebackground imagenone | url
background-positionbackground image position[left | center | right | distance | percentage] [top | center | bottom | distance | percentage]
background-repeatbackground repetitionno-repeat | repeat | repeat-x | repeat-y | space | round
background-sizebackground image sizeauto | [distance | percentage] | contain | cover

💡 Suggestion: