Vous êtes ici : Miss SEO Girl » HTML - CSS » Introduction au CSS …

Introduction au CSS …

Il y a une semaine, je vous ai promis un petit article d’introduction au CSS. Eh bien, le voilà ! Après l’article d’initiation au HTML par Mathieu, voici cet article, ayant l’objectif de vous familiariser avec les sélecteurs CSS : qui sont à la base de ce langage.

Un article censé introduire le sujet et ouvrir la porte à d’autres articles CSS plus complexes … Pour ce premier article, vu que je suis comme vous, novice dans le domaine, j’ai demandé à Mathieu de faire une relecture et d’apporter quelques modifications… Alors, merci à Mathieu pour son coup de pouce :) et bonne lecture à toutes et tous !

Qu’est-ce que c’est le CSS ?

Le CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML, d’après WIKIPEDIA.

Le CSS sert donc à mettre en forme les pages HTML (polices et tailles de caractères, couleurs ou encore alignement du texte). Le CSS vous offre une grande liberté pour styliser vos contenus, il serait dommage de s’en priver.

Ps: cette photo je l’ai prise pendant un voyage à l’Ile Maurice, je la trouve très belle cette cascade, pas vous? :).

Les sélecteurs

Avant de créer à proprement parler une feuille de style pour une page web, nous devons comprendre une notion propre au langage CSS : les sélecteurs.

Les sélecteurs permettent de « sélectionner » la partie du contenu qui va être mise en forme. Avant de styliser une section de contenu dans une page, il faut savoir identifier ce contenu.

Notez qu’il y a principalement 3 type de sélecteurs : des sélecteurs de balises (ou « tag » an anglais), des sélecteurs de « class » et d’autres pour les « id ». Il existe des différences entre ces trois notions sur lesquelles je vais revenir.

Rapidement, voici à quoi cela ressemble :

  • nom-balise pour styliser un bloc existant en HTML (conçu avec une balise classique).
    • ex : je veux donner un style à tous les liens (<a> en HTML), j’écris simplement a en CSS.
  • .nom-de-la-classe pour styliser un bloc HTML qui porte l’attribut class=”nom-de-la-classe”. Une classe (ou « class ») correspond à un élément répété plusieurs fois dans une même page web.
    • ex : j’ai une liste de questions sous le forme <p>…</p> en HTML et je veux lui donner un style spécifique, j’écris .question en CSS pour viser précisément les balises qui contiennent cette classe.
  • #id-du-bloc correspond à une balise dont l’attribut est id=”id-du-bloc”. Contrairement aux classes, l’id est un identifiant unique, il n’a pas le droit d’être répété plusieurs fois dans une page.
    • ex : j’ai une seule entête par page web de la forme <div id=”entete”>…</div> en HTML, j’écris #entete en CSS pour lui donner un style particulier.

Le nom que vous attribuez aux ID et CLASS est entièrement libre mais ne doit pas contenir d’accents, de caractères spéciaux ni d’espaces.

Sélecteurs de balise

Toute balise HTML peut être un sélecteur. Les balises les plus couramment utilisées pour définir une section à styliser sont les balises <div> et <span>, mais d’autres peuvent également être utilisées, telles que <form>, <p>, <hn>, <li>…

Un exemple concret de syntaxe avec une balise <div> :

<div id=”haut”>Chaussures à talon haut<div>

Si nous voulions utiliser le CSS pour mettre en forme le bloc « Chaussures à talon hauts », voici à quoi doit ressembler votre style CSS :

#haut { text-align:left; color:pink; font-style :italic}
Ici, #haut est un exemple de sélecteur CSS.

Sachez également qu’il aurait été possible d’écrire div#haut dans notre cas, cela signifierait en langage CSS « l’id haut intégré dans un <div> », cela serait donc juste également, donc ne soyez pas perdu si vous voyez des écritures différentes, elles ont parfois le même impact.

Sélecteurs de classe

Les sélecteurs de classe peuvent être utilisés dans tout contexte HTML et permettent d’appuyer sur des éléments répétés dans une même page web, comme je l’ai déjà évoqué. Ajouter une classe est très simple, il suffit d’intégrer la syntaxe dans les balises HTML pour qu’une nouvelle classe de style soit créée. Ensuite, vous devez la récupérer dans les feuilles de style CSS avec la syntaxe .nom-de-la-classe pour indiquer la mise en forme.

Voici un exemple plus concret. Admettons que nous ayons un site avec des titres (<h2> en HTML par exemple) rouge et d’autres bleu. Si nous utilisons les sélecteurs de balises, nous précisons que les H2 auront une couleur spécifique, mais malheureusement, elle sera appliquée à l’ensemble des H2 de la page. Dans notre cas, il va falloir distinguer les divers H2 en bleu et ceux en rouge. L’idéal est de créer des classes différentes pour les deux :

<div class=”bleu”>
<h2>Chaussures à talon haut</h2>
<div>

<div class=”rouge”>
<h2>Chaussures sans talon</h2>
</div>

En CSS, on peut donc distinguer les H2 en bleu et ceux en rouge grâce aux classes spécifiques.

.bleu { color:blue; }
.rouge { color:red; }

C’est aussi simple que ça. Sachez toutefois qu’il est possible d’ajouter plusieurs classes dans un même attribut « class » en HTML en les séparant par des espaces. Par exemple, écrire permet d’utiliser trois classes différentes qui se cumulent, c’est parfois pratique…

Sélecteurs ID

L’ID fonctionne globalement comme les classes, si ce n’est que l’attribut HTML s’appelle « id » et que ce dernier n’a le droit d’être utilisé qu’une fois dans la page.

Pour reprendre l’exemple précédent, on a utilisé des classes « bleu » et « rouge » parce que nous risquons d’avoir plusieurs titres colorés par page. En revanche, si nous n’avions qu’un titre en bleu et un seul titre en rouge, nous aurions pu remplacer nos classes par des ID, cela aurait fonctionné aussi bien. Voici ce que ça aurait donné en HTML :

<div id=”bleu”>
<h2>Chaussures à talon haut</h2>
<div>

<div id=”rouge”>
<h2>Chaussures sans talon</h2>
</div>

Et en CSS :

#bleu { color:blue; }
#rouge { color:red; }

En général, les ID sont utilisés pour des éléments vraiment uniques comme l’entête, le pied de page, la colonne latérale (…) et moins pour des points de détails, la classe présentant moins de risques d’erreurs. C’est pour cette raison que nous ne trouvons quasiment que des classes dans les principaux CMS du marché, les ID ne sont utilisés que pour des cas précis.

Contrairement aux classes, il n’est pas possible de mettre plusieurs ID séparés par des espaces dans un attribut « id » en HTML, tout simplement car cela lui enlèverait son caractère unique, cela n’aurait donc plus aucun sens…

Sélecteurs de lien (ou pseudo-classes CSS)

Les liens possèdent trois états basiques : non visités, visités et actifs (en train d’être cliqués). Un état additionnel (survol) survient lorsque la souris est placée sur le lien, mais sans avoir cliqué.

Nous pouvons appliquer des styles aux liens en fonction de leur état :

a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: orange; }

Dans cet exemple, nous avons coloré les liens non visités en bleu (équivalent de « a » tout seul), les liens visités en gris, les liens survolés en orange et les liens actifs en rouge (pendant que nous cliquons sur le lien).

Il existe d’autres types de sélecteurs que ceux pour les liens !

Propriétés & valeurs

Les propriétés sont les caractéristiques réelles stylisées dans vos pages web.

La propriété « color » (pour la couleur du texte) est probablement la propriété la plus utilisée en CSS avec « background » (pour les fonds d’écran ou couleur de fond), suivi de la famille de police « font-family » et de la taille de police « font-size ».

Exemple pour le CSS du titre H1 :

h1 { color:pink; font-family:verdana; font-size:24px ; }

Comme vous le constatez, la syntaxe de base est:

sélecteur { propriété : valeur; }

Lorsque des combinaisons de multiples propriétés et valeurs sont utilisées, des points-virgules les séparent. C’est toujours le cas en développement web (enfin, en général), les points-virgules marquent les fins d’instructions, on retrouve donc cette logique en CSS.

Il existe des centaines de propriétés !

Pour aller plus loin :

Vérifiez vos feuilles de style CSS et vos documents HTML stylés avec CSS

GD Star Rating
loading...
Introduction au CSS ..., 4.5 out of 5 based on 8 ratings

17 réflexions au sujet de « Introduction au CSS … »

  1. Bonjour Alexandra !
    Tu dois lire dans mes pensées !
    Je suis justement en train de m’intéresser au CSS et au HTML5. Quelle bonne surprise que tu sois en train d’en parler sur Miss-SEO-Girl !
    Un article très bien construit et facile à comprendre pour ceux (comme moi) qui n’y connaissent (n’y connaissaient) rien !
    Il est vrai également que le Site du Zéro aide beaucoup pour apprendre (comme toujours).
    Merci en tout cas pour ce résumé constructif.
    Bonne journée,
    Audrey

  2. Salut,
    Très belle introduction au css !
    Bon cependant, les bases sont très faciles à comprendre et typiquement pour celui qui souhaite jouer avec son thème, les éléments abordés suffisent amplement à progresser.
    Le plus dur étant de partir sur une feuille de style vierge et d’être créatif, tout en étant optimal sur les menus, les div superposées, bref la création ;-)
    Mais une fois qu’on maîtrise un minimum, le plaisir est au rendez-vous car cela permet en un sens d’être autonome.

  3. Maitriser le CSS demande beaucoup de pratique !! Merci pour cet article qui nous en apprend un peu plus sur le CSS !

  4. Perso le CSS je suis d’une nullité totale j’oublie toujours un “;” ou un “{” quelque part et je ne comprends jamais la différence entre un “id” ou “class” donc un petit tuto bien pratique pour moi ;) faudra quand même que je fasse un jour un effort pour faire quelque chose de propre en CSS

  5. Très bon article sur le CSS 2.1 (sachant qu’il y a très peu de différences avec le CSS 2 en réalité), cela reste le seul vraiment compatible avec la plupart des navigateurs, tu as su donner les bases essentielles sans entrer dans un trop-plein de détails avec des pseudos-éléments ou des sélecteurs complexes, c’est parfait comme ça pour débuter !

  6. Merci pour ton article et ton cours gratuit surtout que je suis encore débutante dans le domaine de CSS et c’est un peu compliqué pour moi.

  7. Un bon petit tuto CSS pour les débutantes comme moi. Tes articles sur l’HTML et les CSS permettent d’avoir les bases dans la création d’un site web. A bookmarker d’urgence !

  8. Très bon article pour les débutants qui souhaitent connaitre les bases du CSS, tu devrais aussi parler de bootstrap qui facilite le développement, la bibliothèque est très sympa ! A bientôt

  9. Bonjour,

    De bonnes bases sur le css j’ai juste une remarque concernant :
    ” #id-du-bloc correspond à une balise dont l’attribut est id= »id-du-bloc ». ”

    Pour la rédaction de css avancées l’utilisation des ID est proscrite.
    Je t’invite à lire un article que j’ai rédigé pour l’occasion : votre css est malade http://davidleuliette.com/wordPress/dev/qualite-css/

  10. Même quand Miss Seo met les mains dans le cambouis technique, elle reste rayonnante, sans truc ni maquillage…
    C’est peut-être l’effet mauricien: là-bas tout est propre et bleu, et quelles que soient les religions, l’amour coule de source (et en cascade :-)).

  11. Après avoir fini avec HTML je m’intéresse actuellement au CSS, je trouve que cet article est bien détaillé et fort intéressant, merci pour le partage!

Laisser un commentaire

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

CommentLuv badge

Les liens des commentaires peuvent être libérés des nofollow.