Nous avons vu dans l’article précédent comment intégrer votre contenu textuel dans une page HTML et nous avons déjà vu comment intégrer du code CSS dans une page. Nous allons pousser un peu plus loin pour mieux comprendre comment nous pouvons faire une mise en forme très personnalisée grâce au HTML et au CSS.

Mettre en forme un type d’élément en CSS

Prenons par exemple notre titre principal (balise h1) et mettons le en rouge pour respecter notre charte graphique générale. Pour cela rien de plus simple : il suffit de dire dans notre fichier CSS “tous les titre H1 de ma page seront rouges”. Et pour lui dire la syntaxe est la suivante :
h1 { color: #CC0000; }
Ne vous laissez pas impressionner par le code #CC0000 qui est juste le code couleur du rouge… Vous avez vu, c’est simple. Nous voulons maintenant lui apporter des styles spécifiques en plus, par exemple nous souhaiterions qu’il soit en italique, avec une police de 20 pixel de haut et encadré en gris. Il suffit de lui donner une suite d’instructions. Chacune se termine par un “;” et elles sont toutes entre les accolades { et } :
h1 {
color: #CC0000;
font-style:italic;
font-height: 20px;
border-style : solid;
border-color: #CCCCCC;
border-width: 1px;
}

En réalité, il n’y a pas de syntaxe précisément pour encadrer, mais nous lui avons mis une bordure solide, grise de 1px d’épaisseur ce qui est finalement la définition d’un encadrement…

De la même façon, vous pouvez attribuer un style à n’importe quelle élément de votre page :
h2 {
font-height: 16px;
}
p {
margin-left: 10px;
}

Ce code CSS impactera tout vos titre h2 (taille de police de 16px) et ajoutera une marge de 10px à gauche de chaque paragraphe.

Nommez spécifiquement un élément et lui attribuer un style spécifique

Le code css vu précédemment applique la mise en forme à tous les éléments de la page, par exemple tous vos paragraphes seront décalés de 10px vers la droite (marge à gauche = décalage à droite  ;)). Mais il est fort probable que cette règle ne s’appliquera pas à tous les paragraphes. Par exemple imaginons que vous souhaitiez mettre un paragraphe en rouge, mais un seul, pas toute la page ?

Dans un premier temps, il faut nommer votre paragraphe directement dans votre code HTML en utilisant l’attribut class. Le nommage est totalement libre :
<p class=”paragrapherouge”>ce texte doit être rouge</p>
Ainsi vous pourrez cibler directement ce paragraphe dans votre feuille de style en faisant référence à votre classe en ajoutant un point devant :
.paragrapherouge {
color: #CC0000;
}

Ce code CSS va attribuer la couleur rouge à tous vos éléments possédant l’attribut class=”paragrapherouge”, ainsi si vous pouvez également l’appliquer à un texte en gras par exemple :
<strong class=”paragrapherouge”>texte en gras et rouge</strong>
Il est bien sur possible de spécifier dans votre feuille de style CSS que ce style ne s’applique qu’exclusivement au paragraphe ayant l’attribut class=”paragrapherouge” :
p.paragrapherouge {
color: #CC0000;
}

Je pense que vous avez ici un aperçu de la puissance du CSS en terme de personnalisation : vous choisissez comment mettre en page et quel style appliquer.

Cet article vous a plu ? N'hésitez pas à le partager avec vos amis...
Categories: Programmation Web

Ne partez pas sans laisser un commentaire


This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.