C'est dans ce fichier, différent de celui de la page HTML qu'il est conseillé de définir les styles CSS qui s'appliquent à la page HTML. Le rôle de la balise <link> située dans l'entête <head> de la page index.html permet d'indiquer à la page le fichier de style CSS à utiliser.
<link rel="stylesheet" href="style.css">
Pour changer la police du titre qui utilise la balise H1 mais uniquement pour le titre H1 que je veux, j'utilise les attributs class ou id :
<h1 id="titreprincipal">Big Data : données, données, donnez-moi !</h1>
Il y a deux balises <h1> mais seule la première sera concernée le style que je vais définir :
#titreprincipal { text-align: center; background-color: green; font-size: 16px; font-family: Verdana; }
Visualise le résultat obtenu.
Pour en savoir plus sur les propriétés CSS de mise en forme du texte :
Pour attribuer un style CSS, il faut pouvoir sélectionner une balise HTML. Quand je veux appliquer un style à un élément qui n'est pas dans une balise, j'utilise une balise universelle. Il en existe deux :
qui est une balise de type block, qui entoure un bloc de texte ou d'éléments HTML comme les balises <p> ou <h1>
<p>... les <span class="important">mot important</span> ... un <span class="important">autre mot important</span> ....<p>
.important { font-style: italic; color: red; }
Voici des noms de couleur que tu peux utiliser :
Il y a bien plus de couleurs possibles. Pour cela une solution est d'utiliser la notation hexadécimale comme #FF5A28 :
Le site http://www.colorpicker.com permet de trouver la valeur hexadécimale d'une couleur.
Les propriétés CSS suivantes permettent de gérer la page en intervenant sur la balise <body>.
/* On travaille sur la balise body, donc sur TOUTE la page */ body { background-color: lime; /* Le fond de la page sera vert clair */ color: gray; /* Le texte de la page sera gris */ }
Pour choisir une image de fond, après avoir téléchargé l'image dans ton projet, utilise cette propriété CSS :
body { ... background-image: url("uneimage.png"); }
Les bordures permettent de décorer ta page en précisant de nombreuses propriétés CSS : border-width, border-color, border-style, etc.
Pour simplifier la déclaration des propriétés d'une bordure, j'utilise la super-propriété border qui regroupe l'ensemble de ces propriétés en combinant plusieurs valeurs.
J'utilise jusqu'à trois valeurs pour modifier l'apparence de la bordure :
Exemple pour une bordure bleue, en tirets, épaisse de 3 pixels autour du paragraphe en utilisant l'attribut class dans la paragraphe ou doit s'appliquer le style que j'appelle alire :
.alire { border: 3px blue dashed; }
Voici un lien parmi d'autres pour découvrir les balises de base du CSS :