What is CSS?

Let’s wake up!
Before going further, you should know what html is.


CSS is a style sheet language, no less, no more!

In other words, it allows you to apply a style to a web page displayed by your browser.
CSS means Cascading Style Sheets and… we don’t really care here. (We will see what that mean in another tutorial. Let’s focus on what it is!)

For example, if HTML is the skeleton of the website,
CSS is these clothes! It literally dress up the website!

How?
It describes how HTML tags have to be displayed by your browser.

This style language looks like this:
or, directly included in the HTML tag in this example
This language seems a bit odd because it is not a real language, it is a STYLE language. There are not a lot in this category… only 2: CSS and XSL, that’s it.

Web browsers apply CSS rules to describe the style of the HTML tags. The style of the HTML is how it has to be displayed by the browser: its height in pixel, its color in background, the font, the size of the font, the color of the font, the margin of the tag… etc.

For example, here an empty div… true story!
An empty div has a size of 0 pixel…

And here the same div with a height and a width at 100 pixels, red background, rounded angle, and with 2px green border.
CSS rules are composed of set of properties and each property has a name and a value. When the browser read CSS, it recognizes the name of the property, take the value and apply the rule to the good tag. And we get chocolate! Nop sorry. And we get an handsome HTML page!



Sometimes you can see a small difference on the same webpage with two different browsers. That happens because the two browsers apply differently some properties on the same tag, it for that reason, when you build a website, you have to test it on all browsers.

There are a ton of different properties in CSS which can be applied on all of HTML tags, and obviously all CSS properties can not be applied to all HTML tags. For example, it does really make sense to apply a font size to an image…

To give you an idea, this is a webpage with HTML only (without CSS): what html is? – without css
And this is the same page with HTML and CSS: what html is?


The real super power of CSS is to be able to change the style of a document without touching the document itself, without touching the base of the page.
It looks nothing, but it is a lot! With that power, it is very easy change the skin of your website.

In theory, if someone is not too dirty or not too crazy to stick his clothes on his skin, you should be able to change his clothes quite easily!


Well, it is exactly the same with the websites. If the website is not too bad it should be easy to change the style without touching the HTML.

Nowadays, CSS is used a bit more than only in web pages. For instance, it can be used to create a SVG image or in some printing settings but it works all the time on the same way. CSS describes tags on markup languages. (A markup language is a text document separated with tags to be able to manipulate this text… yes like HTML!)


See you soon,
I have to count to infinite.
Kiss!