Introduction à CSS

Les CSS (Cascading Style Sheets), Feuilles_de_style_en_cascade en français sont un langage permettant de mettre en forme les documents HTML. Elles permettent de modifier la totalité des éléments HTML pour leur donner une forme, un contour, une couleur etc. Sa syntaxe est différente de celle du HTML, par exemple elle demande de mettre un ; à la fin de chaque ligne. Vous pouvez trouver un cours très détaillé ici.

↑ Un fichier HTML sans CSS ↑


3 manières d'insérer le CSS

  1. Dans le code HTML, à l'intérieur de la balise <style> </style>, elle même placée dans l'entête <head>
  2. Dans les balises contenues dans le code HTML, en utilisant l'attribut style="". Exemple: <p style="font-size:10px;color:orange;">contenu du paragraphe </p>
  3. Soit dans un fichier externe, que l'on nomme avec l'extension .css, et que l'on charge via la balise <link href="style.css" rel="stylesheet">

Voilà à quoi ressemble une règle CSS, lorsqu'il n'est pas à l'intérieur d'une balise HTML.

#Carre {  /* le selecteur  */
          height: 50px; /* propriété: valeur; */
          width: 50px; /* propriété: valeur; */
          background-color: grey; /* propriété: valeur; */
        }

Pour faire une règle CSS, il nous faut écrire d'abord le sélecteur, suivit d'accolades {} dans lesquelles nous ajoutons une propriété suivit de deux points : et d'une valeur, puis on termine la ligne avec le point virgule ;.

Revenons sur notre balise précédente...

Grâce au fait que nous lui donnons un identifiant, il devient possible d'indiquer dans le CSS sur QUI, quelle balise on veut agir. Je sais que ma balise s'appelle fleur, du coup je peux lui donner un style en mettant un # devant son identifiant.

Il y'a 3 différents sélecteurs possibles avec CSS:

  1. Un élément avec un identifiant
  2. Toutes les balises qui possèdent le même type - par exemple on peut mettre la même couleur à tout les éléments <p>
  3. Ou un groupe de balises diverses - on appelle ça des classes.

Les différents sélecteurs

La liste de toutes les propriétés CSS est disponible ici!
Celles qui nous seront le plus utile: 

/* la couleur de fond  */
background-color: red;
/* la façon dont l'élément est positionné  */
position: absolute;
/* la hauteur  */
height: 100px;
/* la largeur  */
width: 100px;
/* la position par rapport au haut */
top: 10px;
/* la position par rapport à la gauche */
left: 15px;
/* l'élément doit être retiré du flux normal et doit être placé sur le côté droit*/
float: left;
/* la rotation */
transform: translateX(10px) rotate(10deg) translateY(5px);
/* les coins arrondis de la bordure */
border-radius: 50%;
/* le contour de l'élément */
border: dashed black 2px;
/* les marges intérieures */
padding: 10px;
/* Si vous voulez changer les marges unes par unes.. */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
/* les marges extérieures, pareil changeable une par unes aussi */
margin: 15px;
Un petit schéma de la composition d'un élément:

Vous pouvez vous servir d'une autre "boite" pour déplacer un élément.