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

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

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:

  • 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 style="/*code css*/"></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.
    <link rel="stylesheet" type="text/css" href="nom-du-fichier.css" />
    

Mais quels sont ces avantages ?

  • 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…)

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

<link rel="stylesheet" type="text/css" href="nom-du-fichier.css" />

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:

  • 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>
    <a></a>
    
    

    …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 #.

    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.

Utilisez-vous souvent le CSS pour parfaire votre design? Sinon, comment faîtes-vous?


Image courtesy of Arvind Balaraman http://www.freedigitalphotos.net

CSS, débutant, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

7 commentaires

  1. Bonjour Marie-Eve,
    Je n’utilise jamais le CSS, je me contente des styles versions standards fournis par les thèmes. Après, il m’arrive aussi de faire appel à des amis qui maîtrise le sujet.

    Répondre
  2. Bonjour,

    Il n’y aurait pas une erreur sur la déclaration de la feuille de style car théoriquement celle-ci ne se finit pas par un «  » mais plutôt par slach(/)?
    Ex : la barre oblique indiquant la fin de déclaration.

    Répondre
    • Bonjour,
      Tu parles de la déclaration dans la balise ? Dans ce cas, je ne vois pas d’erreur, la valeur de l’attribut href doit être entre guillemet. Le chemin du css (soit la valeur de l’attribut href) n’est pas tenu de terminer par un slash. Si tu regardes le code source de ton propre site, tu verras que les liens vers les feuilles de style respectent cette syntaxe.

      Répondre
  3. Bonjour Marie-Eve,

    Je viens de découvrir votre site suite à un commentaire que vous avez laissé sur le blog de Nassim.

    Sympathique intro sur le CSS.
    Espérant que sa lecture poussera vos lecteurs à apprendre ce langage…

    Amicalement

    Thierry

    Répondre
    • Merci Thierry, mon but avoué est en effet d’inciter mes lecteurs à se lancer dans l’apprentissage. Ca peut rendre de sacrés services de comprendre comment ça marche sous le moteur!

      Répondre
  4. Bonjour,

    Non je ne parle pas de la déclaration dans la balise mais de la terminaison de la balise « link »

    Dans votre exemple vous terminez par alors que dans le concret, cette balise se termine juste par slach

    ps: pas pratique votre formulaire et je n’ai pas reçut de mail suite à votre réponse.

    Répondre
    • Effectivement! La balise link est une balise auto-fermante et j’en avais fait une balise en deux parties. C’est à force d’utiliser des logiciels avec l’auto-complétion qu’on finit par faire une bourde pareille! Merci pour la rectification!

      Et pour me faire pardonner, je viens d’installer un plugin pour suivre les commentaires par email! 😉

      A bientôt

      Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint