Les bases du CSS

Question de style

Aujourd’hui nous vous avons préparé une petite introduction au CSS (Cascading Style Sheets), ou feuilles de cascade de style en français. Les feuilles de style sont utilisées pour donner une forme au code html. Le problème, si nous en utilisons pas, est qu'il faut reprendre toutes les pages une à une pour modifier une police de caractère ou une couleur de fond...

Le HTML et CSS

Le html est un langage qui fonctionne avec des balises simples, tout comme le XML, présenté il y a quelques semaines. Toutefois, une page html est divisée en deux grandes catégories.

La première catégorie est le header (en-tête) , celui-ci est utilisé pour des informations non-visibles. Il servira notamment pour charger notre Css, mais également pour afficher une icône, améliorer le référencement, ou encore charger du JavaScript.

La deuxième partie s’appelle le body, c’est là que nous plaçons toutes les informations que nous souhaitons afficher.

Une feuille de style CSS externe peut se faire avec un simple bloc-notes et il est d'usage de lui faire porter l'extension .css. Nous la lierons ensuite à la page html à l'aide d'un link placé dans le header  de la page.

Mais nous pouvons aussi déclarer les styles dans l'en-tête de la page, ou au sein des balises elles-mêmes. Cela peut être intéressant pour appliquer des styles spécifiques et ils auront un ordre de priorité plus important. C'est ce que nous appelons la "cascade".

                            Source: searchenginepeople

Mettre en forme un texte

Le formatage des polices de votre contenu est un élément primordial. En Css, nous utilisons des propriétés prédéfinies qui servent à formater nos éléments.

Par exemple, si nous souhaitons changer la police, nous utiliserons la propriété font-family, puis  pour changer la taille nous utiliserons la propriété font-size.

Plus concrètement si nous souhaitons formater les éléments texte de la balise body. 

Ça ressemblera à ceci :

Body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;

color: #333333;

La propriété color est ici utilisée pour changer la couleur. Elle peut avoir comme valeur un code hexadécimal, ou le nom de la couleur en anglais, par exemple Red.

Les marges

Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures et padding, pour les marges intérieures.

Source: http://le-pape.blogspot.ch/

Aller plus loin

Le Css est un langage énorme avec des centaines de propriétés. Si cet aperçu vous a mis la puce à l’oreille, nous vous invitons à vous rendre sur http://www.grafikart.fr/ où vous pourrez suivre plusieurs tutoriels concernant le CSS.