What is CSS?

Very easy tutorial on CSS

[Previous Tutorial]

How to handle paths in development? (URL)

Very soon we will need to add a style to our web site… it is quite ugly at the moment!

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

duck explaining what is CSS style

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

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,
website only HTML without CSS

CSS is these clothes!
website HTML plus CSS
It literally dress up the website!

How? img how css works
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… img show empty div

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! img hungry stylish Nop sorry. And we get an handsome HTML page!

beautiful CSS style

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… img hungry stylish

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?

superpower of the Cascading Style Sheets

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!

zombie dirty css

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! kiss end tutorial what is css

Tutorial on What is CSS 3 style