10 min read

Learn CSS: What is CSS Meant for?

As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what is CSS all about! Learn CSS to make your website beautiful. Let's make it shine!

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 bend 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

Buuut… The Internet is more beautiful than that. When internet became popular, it stopped to be 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 to make it more beautiful. It was at this time that Håkon Wium Lie proposed the first version of CHSS in 1994, which was later adapted to become CSS1.

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


what is css

The main objective for 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. Eg:

You could tell a <h1> to look just like a <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?


Quite simple: You have to write your styles in a special syntax called "CSS" and save it 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:

NameDisplayDescription
LinklinkThe 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"
link rel="stylesheet" type="text/css" href="theme.css"
StylestyleIf 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 the .css extension.

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 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 (selector1, selector2, selector3); 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.

#selector1 {
   color: red;
   font-size: 12px;
}
.selector2 {
   color: blue;
   background: green;
}
selector3 
{
   font-size: 15px;
}

Wait… What is a "Selector"??


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

body {
    color: red;
}

You could also change the color of a single anchor <a>. To do that, you must define the ID attribute of the HTML tag defining that particular link <a id="anchor1">. Once that tag has an ID, then you can go to your style sheet and define a color as follows:

#anchor1{
   color: red;
}

The next table shows a list of all possible selectors available to use in CSS. Please take your time to review it 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

SelctorDescriptionExample
.nameofthe_classThere is an attribute in HTML called "class", which allows us to group different tags within one logic group. With CSS we can use . (dot) as a selector of every element using "nameofthe_class" as the attribute of the "class"..impar { 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 name (tag)This 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 of 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 every h1 and .impar class elements to turn red.h1,.impar { color: #BDBDBD; }

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 have to 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.

Attributes


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

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

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 editor

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

List editing

AttributeDescriptionValues
list-stylecompound property (sum of every property combination)list-style-image|| list-style-position || list-style-type
list-style-imagemarker imagenone | uri
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

AttributesDescriptionValues
border-collapseborder modecollapse | separate
border-spacingspace between cellsdistance | distance
caption-sidelegend positiontop | bottom | left(-) | right(-)
empty-cellsempty box borderhide | show
table-layoutalgorithm width of the tableauto | fixed

Background editing

PropertyDescriptionValues
background-colorbackground colortransparent
background-imagebackground imagenone | uri
background-positionbackground image position[ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ]
background-repeatbackground repetitionno-repeat | repeat | repeat-x | repeat-y | space(3) | round(3)
background-size(3)background image sizeauto | [ distance | percentage ] {2} | contain | cover

Get ready. There is more coming!

If we were having dinner, we would say that you already ate your appetizer and are about to begin the main dish. The protein is up next!!

Next chapter will be about the Boxes Model – the most mind-boggling chapter a developer can imagine!

You’ll learn to diagram a whole web page, similar to those you normally visit on a daily basis, but without so many ornaments.

what is css