Savoir lire le CSS : première étape pour apprendre

Partagez si vous aimez ->

Le CSS est le langage de code utilisé pour mettre en page vos documents HTML. Pour apprendre le CSS, vous devez d’abord savoir le lire. Il est relativement simple à comprendre, du moins pour une utilisation basique.

Découvrez le principe de fonctionnement des règles CSS.

Le CSS peut être utilisé dans votre document HTML de trois façon différente:

[list style= »1″]
  • Inline : c’est à dire dans la balise HTML directement, au moyen de l’attribut « style ». Il n’y a pas de séparation du contenu et de la forme, cette utilisation présente peu d’avantage et est à proscrire (dans 95% des cas).
    <div></div>
    
  • Dans une balise « style » en haut du document HTML: une technique à mi-chemin entre les pratiques modernes et anciennes. Elle présente un faible avantage et nous ne l’étudierons pas en détails ici.
    
    <style type="text/css">/*code css*/</style>
  • Dans une feuille de style externe: cette façon de faire est la seule que vous devez retenir dans un premier temps. Elle présente de nombreux avantages.
    
    
[/list]

Mais quels sont ces avantages ?

[list style= »2″]
  • Stricte séparation du contenu et de la forme
  • Réutilisation du même fichier CSS dans plusieurs documents HTML
  • Débugage dans Firebug
  • Organisation du CSS dans plusieurs fichiers (reset, couleur, formulaire…)
[/list]

Qu’est-ce qu’une feuille de style externe ?

Une feuille de style est un fichier au format .css qui rassemble les instructions de style (= l’ensemble des règles CSS) d’un document HTML.
Elle est reliée au document HTML via la balise HTML


A quoi ça sert ?

Le grand intérêt de son utilisation permet de strictement séparer le contenu de la forme. Ainsi, il est possible de changer d’apparence sans toucher au contenu.

Et c’est tout ?

Oui, mais rien que cette caractéristique est d’une importance capitale. A l’heure où les périphériques de lecture n’ont jamais été si nombreux (smartphone, pc de toutes tailles, lecteur d’écran…), la séparation du contenu et de la forme est essentielle pour assurer la comptabilité.

Ce principe de séparation est largement répandu en programmation et tend à s’imposer comme LE standard à respecter, quelque soit le langage.

Exemple en live

Le site CSS ZenGarden illustre la puissance de CSS pour changer le design d’un site en un clic. Testez par vous-même, ça vaut le détour !

Mais comment font-ils ?

Cette grande modularité est rendue possible par une structure HTML bien pensée en amont. Ne croyez pas que le css résoudra tous vos problèmes si votre structure de base contient des illogismes de conception.

Voyons maintenant à quoi le CSS ressemble en pratique…

Syntaxe d’une règle CSS

sélecteur{
propriété:valeur;
}
Le sélecteur:
Il indique sur quel balise HTML s’appliquera la règle CSS./dd>
La propriété:
Elle désigne le nom de la règle CSS.
La valeur:
Chaque règle possède un jeu de valeurs.

Un élément HTML peut être désigné de 3 façons :

[list style= »1″]
  • Par sa balise :

    Très générale, cette méthode permet d’appliquer un même style à toutes les balises d’un même type. Pratique pour styler tous les titres H1 d’une certaines façon, quel que soit le contexte.

    Ces balises HTML….

    <div></div>
    <h1></h1>
    &nbsp;
    
    

    …seront désignées en CSS par :

    div{}
    a{}
    h1{}
    
  • Par son identifiant :

    Un attribut « id » peut-être utilisé dans la balise HTML pour nommer spécifiquement cet élément. Pour cibler cet id dans la feuille CSS, on utilisera un #.
    [/list]

    Cette balise HTML dotée d’un identifiant….

    <div id="conteneur"></div>
    

    …sera désignée en CSS par :

    #conteneur{}
    
  • Par sa classe :

    Un attribut « class » peut-être utilisée dans la balise pour la désigner. La classe peut-être utilisée plusieurs fois dans une même page, elle peut représente alors plusieurs éléments simultanément.

    Cette balise HTML dotée d’une classe….

    <h1 class="titre-de-chapitre"></h1>
    

    …sera désignée en CSS par :

    .titre-de-chapitre{}
    

Mise en pratique

HTML

<div></div>

CSS

div{
background-color: red; /* couleur du fond */
width: 150px; /* largeur */
height: 50px; /* hauteur */
}

Résultat

Rectangle rouge de 150px (L) X 50px (H)

J’espère que cette introduction vous aide à y voir plus clair en matière de CSS. Si vous ne connaissiez pas ces bases, c’est un bon début pour apprendre à utiliser réellement CSS

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons