CSS Tutorial

A lil' bit of history

The history of CSS (as we know it) starts in the begining of the 1990's. The Web starts to be commonly used for electronic publishing. However, something crucial is missing : you could write with a markup language like HTML, but you could not style your document.

It was not something Tim Berners-Lee didn't think about, he already created the possibility to do style sheets, but he never published the synthax because he thought that every web browser should be free to say how the web pages on them could be styled. For exemple, in 1992 Pei Wei developed a web browser "Viola" who had its how style sheet language.
When the first popular web browser, "Mozaic", went viral it only offered few styling options (changing colors and fonts).

The first Cascading Style Sheets was born in 1996, from the collaboration between Håkon Wium Lie and Bert Bos. Bert Bos, who proposed a first project to the W3C called "Stream-based Style Sheet Proposal" (or SSP), decided to join forces with Håkon Wium Lie. Together they developed a language which could be applied not only yo HTML, but also to other markup languages.

The main goal of creating a language like CSS was to offer a simple and easy to learn language, that could be used by developers but also by any web user.

Fun fact : did you know that CSS could be #funny ? :)

Check those CSS jokes ! You don't get it yet ? Don't worry, check out the CSS tutorial and then come back to enjoy them ;)

PIMP MY WEBSITE !


Now that you've understood how to build the foundation of your website with HTML, let's pimp it up with some CSS !
Let's take the house analogy again. You have walls and delimited rooms in your house, sure, but isn't it kinda sad to let it like this ? How about some decorations ? Some painted, colored walls ?

CSS is the presentation of your website, which mean that you can now change the colors and the family of your type fonts, put some animations, adjust the position of the elements on your page, etc.

CSS is used to style your website, so when you code it it is said you apply styles. This is what a CSS style page looks like :


What is this sorcery and what does it mean ?
In every CSS code you'll be writing, you'll need a selector and a declaration block. This declaration block will be filled with properties and their values.

For exemple, here in this exemple we see that

  • h1 is our selector : it targets the html tag you want to style. Here it is the first level of heading.
  • everything between {...} is our delcaration block : you declare what you want to do to the selector.
  • color is our property : it says what you want to do, here to change the color of the font.
  • blue is our value : it says the value you want to apply to your selector, here the color blue.

What does it looks like in my web browser ?

Awesome ! The aim of designing the first website considered as a work of art is at reach !

But.. wait a minute... how does my HTML page knows what goes on in the style sheet ?!

Style no magic (sorry to desapoint), you have to declare in your HTML page "Hey look ! here is some CSS to pimp you up !".

There is three ways to declare a style sheet :

  • External style sheet : you put your CSS in an another file
  • Internal style sheet : you put yur CSS inside <style> tags in your HTML document
  • Inline style : you put your CSS directly in the concerned HTML tags

I personnaly uses an external style sheet. It's is way more clean and avoids having HTML pages that have km of code in it. So here is how it looks like :

You have to put it inside your <head> tags. Here is what it looks like in the style sheet of this website :

Have you noticed anything ? Yes you're right, I have several style sheets ! You can had as many of them as you want in your website.

Why can it be useful to have more than one style sheet ? In my website for exemple, I used an HTML template that already had some CSS in it. If I want to adapt this template to my liking, I have to add some of my own properties to the HTML tags.

YOUR TIME TO SHINE !

How about you try to pimp the HTML page you did before ? :)

  • Step 1 : open your computer text editor and your HTML page.
  • Step 2 : create a new document and save it on your desktop as "style.css"
  • Step 3 : inside that document, write change your h1 in red, and your paragraph in blue
  • Step 4 : do not forget to include your exernal link inside your HTML document as shown earlier !
  • Step 5 : save all your changes, and open your document in your web browser.

Congratulations, you pimped a web page for the first time !

Wanna go further ?

Here are some tutorials :

Name of the website Link
W3Schools online tutorials https://www.w3schools.com/css/
Codecademy https://www.codecademy.com/learn/learn-css
MDN Web Docs https://developer.mozilla.org/en-US/docs/Learn/CSS
Hackr.io https://hackr.io/tutorials/learn-css