CSS Playground

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.Wikipedia

Syntax du CSS

selector { 
      property: value; 
    }

selectorcorrespond au nom de l'élément HTML ou sélecteur CSS. Les sélecteurs servent à cibler les éléments auxquels nous souhaitons attribuer des styles.

propertycorrespond à l'effet de style que l'on souhaite appliquer. CSS dispose d'un ensemble de propriétés permettant la mise en forme d'éléments.

valuecorrespond à la valeur de la propriété que l'on souhaite appliquer.

Ci dessous un exemple appliquant la couleur verte aux éléments paragrahe HTML :

p { 
      color: green; 
    }

Comment utiliser du CSS ?

À l'intérieur des éléments HTML, dans un attribut style :

<p style="color:green;">My text</p>

Dans une balise style dans le head du HTML :

<html> 
      <head> 
        <style> 
          p { 
            color: green; 
          } 
        </style> 
      </head> 
      <body></body> 
    </html>

Dans un fichier .css externe :

p { 
      color: green; 
    }

Il est recommandé d'utiliser un fichier .css externe pour une meilleure lisibilité, maintenance et partage des styles parmi plusieurs fichiers HTML. La troisième option est donc à privilégier. Pour cela il suffit de créer un fichier à l'extension .css que l'on va placer dans le projet avec le fichier .html.

Ensuite, on ajoute une référence au fichier style.css dans le head du fichier index.html afin qu'il prenne en compte les styles :

<html> 
      <head> 
        <link rel="stylesheet" href="style.css"> 
      </head> 
      <body></body> 
    </html>

Attributs id et class

Utiliser les noms d'éléments HTML en tant que sélecteurs pour appliquer des styles devient très vite limité. C'est la qu'intervient les attributs sélecteurs. Ce sont de simple attributs HTML permettant d'appliquer un nom spécifique à nos éléments, il en existe deux :

id -> <p id="paragraph">My text</p>
class -> <p class="paragraph">My text</p>

Un id s'utilise en CSS avec un dièse (#) devant, une class avec un point (.) devant :

#paragraph { 
      color: green; 
    } 
 
    .paragraph { 
      color: red; 
    }

La seule différence entre les deux, est qu'un id ne peut être utilisé que sur un seul élément d'une page HTML. Une class peut être utilisée sur autant d'éléments que l'on souhaite.

Propriétés

Retrouvez la liste des propriétés CSS, manipulez les et familiarisez vous avec.

Sélecteurs

Approfondissez les possibilités de séléction CSS avec ses combinaisons et pseudo-classes.

Références

Kevin Bizien

Product Designer
Design System Jedi

Tu souhaites me parler de ton projet design ? Contactes-moi à l'adresse bonjour@kevinbizien.com et échangeons dès maintenant !