CSS or C'EST SUPER STYLE!
Hello Monday readers! Bonjours lecteurs du Lundi!
Here comes CSS (Cascading Style Sheets) intro! I could not believe myself how wonderful this part of HTML is! It makes your life so much easier once you control it. Let's see what it is all about.
Et voilà le CSS (ou le C'est Super Stylé!) avec une petite introduction! Je n'en croyais pas mes yeux de découvrir à quel point cet outil de l'HTML est si génial! Cela vous rend la vie tellement plus facile une fois que vous le maitrisez. Voyons voir ce que nous pouvons dire à ce sujet.
1. CSS & HTML
You need to separate HTML and CSS as CSS is the shape and HTML is the functional structure.
There are two reasons for that:
- CSS allows to apply the same style to several different HTML pieces without re-writing all over again the same codes for each element
- You can apply an identical style to several different HTML pages from one unique file
The most efficient way to write a CSS file is to do it on a separate page and to link the two files after:
a- Write your HTML code with the content
b- Write your CSS code to indicate the style you want to have
c- Link the CSS page on your HTML page
d- Tadah! Everything looks perfect as you wanted to!
Il faut séparer le HTML et le CSS car le CSS est la forme et le HTML est la structure fonctionnelle.
Il y a deux raisons pour cela:
- Permet d'appliquer le même style à plusieurs éléments HTML sans devoir écrire le code pour chacun des éléments
- On peut appliquer une apparence et un formatage identique à plusieurs pages HTML à partir d'un seul et unique fichier
La manière la plus efficace d'écrire un document CSS est de le faire sur une page séparée du document HTML:
a- Ecrivez votre code HTML avec le contenu
b- Ecrivez le code CSS pour indiquer le style que vous désirez avoir
c- Créer un lien vers le CSS dans la page HTML
d- Tadah! Tout a une apparence parfaite comme vous le souhaitiez!
2. How to link your CSS into your HTML doc / Comment lier votre CSS dans votre doc HTML
Link has three attributes listed below:
a- 'type' always has to equal 'text/css'
b- one attribute 'rel' which always needs to equal 'stylesheet'
c- another attribute 'href' that needs to point to the internet address where your CSS doc is stored
<link type='text/css'; rel='stylesheet'; href='stylesheet.css'>
Le lien (link) a trois attributs listés ci-dessous:
a- 'type' doit toujours être égal à 'text/css'
b- un attribut 'rel' doit toujours être égal à 'stylesheet'
c- un attribut 'href' qui doit pointer vers l'adresse internet de votre fichier CSS
3. CSS syntaxe / La syntaxe CSS
The base format is as below:
Le format est indiqué ci-dessous:
 |
| Credits: codecademy.com |
As shown above, there are three criteria:
- selector: any HTML elements (<p>; <img>; <table> ...). You just need to get rid of the tags
- property: one of the selector's characteristics. The font family, the font size, the colour... All characteristics that can be attributed to one word or to paragraphs in your web pages
- value: one of the possible value of the property. For example 'red' is a possible value of the property 'color'.
Comme montré ci-dessus il y a trois critères:
- selector (sélecteur): n'importe quel élément de l'HTML (<p>; <img>; <table> ...). Il suffit juste de retirer les balises
- property (propriété): une caractéristique d'un sélecteur. La famille de police, sa taille, la couleur... N'importe quelle caractéristique qui peut être attribuée à un mot ou des paragraphes dans vos pages web
- value (valeur): il s'agit de l'une des valeurs possibles de la propriété. Par exemple, 'red' est l'une des valeurs possibles pour la propriété 'color'
>> All property-value couples need to be ended with ';' or it won't work <<
>> Chaque couple de propriété-valeur doit se terminer par ';' ou cela ne fonctionnera pas <<
I have put an example below of what the HTML and CSS doc both look like. The result in the right window. Do not hesitate to let me know if you have question :)
J'ai mis un exemple ci-dessous de ce à quoi ressemblent les docs HTML et CSS. Le résultat est dans la fenêtre de droite. N'hésitez pas à me faire connaître vos questions!
 |
| Credits: codecademy.com |
 |
| Credits: codecademy.com |
NB: I just started a 'real' first project with Jimdo. Do you foresee what I am talking about? ;)
NB: j'ai d'ailleurs commencé un premier 'vrai' projet avec Jimdo. Est-ce que vous voyez ce dont je veux parler? ;)
To be continued in the next episode, Amélie X
La suite au prochain épisode, Amélie X
0 commentaires: