Découvez les bases du CSS dans ce tutoriel.
Elles seront applicables à :
Nous pouvons modifier l'apparence l'apparence d'une balise HTML
Exemple : Je veux une balise h3 en gris, Times New Roman et taille 18
Exemple de Formatage de la balise h3 avec CSS
Code CSS
h3 {
color: #CC0000; /* Couleur du texte */
font-family: "Times New Roman", Times, serif; /* Type de police */
font-size: 18px; /* Taille du texte */
}CSS vous propose différentes possibiltés pour stocker vos régles CSS
Code HTML
<h3>Formatage de la balise h3 avec CSS</h3>Exemple
Une classe en CSS peut s'appliquer à n'importe quel balise HTML.
Je peux l'appliquer sur une balise p, span, div, h1, h2, h3, ul, li etc ... autrement dit toutes les balises que vous connaissez et autant de fois que vous le souhaitez à l'intérieur d'une page HTML.
Le nom d'une classe doit toujours commencer par un point et ne pas comporter d'espaces ni de caractéres accentués.
Exemple : .texte-vert
Code CSS
.texte-vert {
font-family: "Arial Black", Gadget, sans-serif; /* Police de caractére */
color: #9C3; /* Couleur du texte en vert */
}
Pour appliquer une régle CSS sur une balise, on utilise l'attribut class="nom-classe"
Code HTML
<p class="text-vert">Texte vert, formaté avec ma régle .texte-vert</p>
Résultat
Texte vert, formaté avec ma régle .texte-vert
Un ID s'applique comme une classe en CSS et a le même rôle
La différence est dans le fait que le ID ne peut être contenu qu'une fois dans une page HTML.
On l'utilisera avec Javascript.
Si vous utiliser une classe, ça marchera à tous les coups !
Le nom d'un ID doit toujours commencer par un diése et ne pas comporter d'espaces ni de caractéres accentués.
Exemple : #haut
Code CSS
#header {
width: 100%; /* Largeur de la boite*/
height: 150px; /* Hauteur de la boîte */
background-color: #6F7072; /* Couleur de la boîte */
font-size:25px; /* Taille du texte */
color:#FFF; /* Couleur du texte */
text-align:center; /* Centrage des éléments contenu ) l'intérieur */
}
Pour appliquer un ID sur une balise, on utilise l'attribut id="nom-id"
Code HTML
<div id="header">Mon id #header</div>Résultat
En CSS, les éléments peuvent hériter des propriétés des éléments parents.
Exemple 1 : Si vous avez crée une régle pour modifier la police de caractère de la balide body, tous les éléments textuels que vous allez mettre dans votre page vont récupérer la police qui a été mis dans la régle body.
Exemple 2 : Si je reprends l'exemple de la régle que nous avons crée au dessus pour la balise h3.
Le texte est rouge, en Times New Roman et avec une taille de 18.
Par défaut la balise "a" (lien hypertexte), est de couleur bleue et soulignée.
Donc si je mets un lien hypertexte sur ma balise h3, elle va hériter des propriétés de la balise a (Texte bleu et souligné).
<h3><a href="lien.html" title="Lien">Lien sur une balise h3</a></h3>
Ca vous donnera ça :
Je veux obtenir un texte orange sans soulignement si j'ai un lien hypertexte sur la balise h3
Je devrais créer cette régle :
Code CSS
La régle h3 a signifie que l'on va modifier l'apparence de la balise h3 lorsqu'elle contient un lien hypertexte.
Vous pouvez de même combiner ces balises avec des classes et des ID