Qu'est ce que CSS ?
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web (HTML ou XML).
Grâce au CSS, vous pouvez en effet appliquer des règles de mise en forme (titrage, alignement, polices, couleurs, bordures, etc.) à plusieurs documents simultanément.
Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont des paragraphes et afficher leurs textes en rouge avec ce code CSS :
p {
color: red;
}Inclusion de style
Il existe trois (3) méthodes d’utilisation de CSS:
Dans l’entête
Pour inclure du CSS dans l’en-tête d’une page HTML, il faut utiliser la balise « style » à l’intérieur de la balise «head » :
<head> <title>Titre de la page</title> <style> *{padding:0px;margin:0px;} body{background-color:#ffffff;} </style> </head>
Dans un fichier externe
Pour inclure un fichier CSS externe, il faut utiliser la balise « link » à l’intérieur de la balise « head » :
<head> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
Dans une balise
Pour définir un style CSS directement dans une balise, il faut utiliser l’attribut « style » :
<p style="font-color=#000000">Texte de couleur noir</p>Les sélecteurs
Il existe deux types de sélecteurs en CSS : « class » et « id ».
- Le sélecteur « class »
Ce sélecteur est utilisé lorsque l’on veut reproduire un style sur plusieurs éléments HTML. Dans une feuille de style, le nom du sélecteur « class » est toujours précédé d’un « . » :<p class="droite">paragraphe de la class</p .droite { text-align:right; }
- Le sélecteur « id »
Ce sélecteur est utilisé lorsque l’on veut attacher un style à un seul élément HTML. Dans une feuille de style, le nom du sélecteur « id » est toujours précédé d’un « # » :
<p id="paragraphe">paragraphe de l'id</p>
#paragraphe {
text-align:right;
}
Les propriétés de types font
Les propriétés CSS de type font- vont nous permettre de modifier l’apparence de notre police d’écriture, et donc de nos textes. Par exemple on peut transformer la taille, le poids, et le style de notre police.
les propriétés de type font- les plus utilisées sont:
font-size: pour modifier la taille de nos textes ;
font-style: pour modifier le style de nos textes ;
font-weight: pour modifier le poids de nos textes.
font-family: pour modifier le type de nos textes ;
body{
font-family: "source code pro", verdana, sans serif;
}
Les propriétés de types Text
Les propriétés CSS de type text vont nous permettre de changer la mise en forme de nos textes et leur apparence.
Les propriétés les plus utilisées sont:
La propriété text-align (gère l’alignement) ;
La propriété text-transform (gère la mise en majuscules / minuscules) ;
La propriété text-decoration(gère la décoration) ;
La propriété text-indent (gère l’indentation) ;
La propriété text-shadow (gère les ombres).
Exemple:
p { text-align: center; } Les bordures
De nombreuses propriétés CSS permettent de modifier l’apparence des bordures. border regroupe l’ensemble de ces propriétés ; on peut utiliser jusqu’à trois valeurs pour modifier l’apparence : largeur(en pixels), couleur (mettre le nom de la couleur ou la valeur hexadécimal ou valeur RGB), type de la bordure(none, solid, dashed, double,inset, ….).Exemple : pour avoir une bordure rouge, en trait simple et épaisseur égale 3pixels, voici le code :
h1{
border : 3px red solid ;
} Les marges
Pour affecter des marges aux différents éléments d’une page web, les propriétés CSS à utiliser sont « margin », pour les marges extérieures, et « padding » pour les marges intérieures. Pour chaque élément HTML, on peut donc définir l’espacement qui le séparera des autreséléments (« margin ») et les espacements intérieurs dont il peut bénéficier (« padding »).
p {
width:200px;
padding:40px;
margin:auto;
} Largeur et hauteur
Les propriétés CSS width et height permettent de contrôler la largeur et la hauteur du contenu des éléments de type bloc et ceux remplacés. Pour fixer la largeur vous pouvez utiliser la propriété width. Exemple: Nous allons définir la longueur et la largeur d’un div
div {
witdth : 200 px;
height : 100px;
}Les ombrages en CSS
La propriété text-shadow permet de créer des ombres sur un texte. Cette propriété s’utilise de la façon suivante :Pour créer des ombres autour des boites à l’intérieur ou à l’extérieur, vous pouvez utiliser la propriété box-shadow qui prend deux quatre valeurs différentes dans l’ordre suivant:
p {
border: 3px solid yellow;
box-shadow: -5px -4px 5px yellow
} Image de fond
L’image de fond permet de casser avec les fonds unicolores traditionnels et donne, si elle est bien choisie, une véritable identité au site. L’image de fond s’attache généralement à la balise « body » mais il est possible de l’attacher à n’importe quel élément de type bloc. Dans l’exemple suivant, l’image est attachée au corps de la page (« body ») :
body {
color:black;
background-color:white;
background-image:url(images/fond.png);
} Apparences dynamiques
Lors de la navigation dans des sites web, des événements comme un clic, une sélection ou un survol, se produisent. Avec CSS, vous avez la possibilité de modifier l’apparence de certaines sections dynamiquement lorsque ces évènements se produisent.
Pour cela, on utilise pour cela les pseudo-formats :
– :hover
– :active modifie l’apparence des liens au moment du clic ;
– :visited lorsqu’un lien a déjà été visité ;
– :focus permet de modifier l’apparence d’un élément sélectionné.
a:hover /* Apparence au survol des liens */
{ text-decoration: underline;
color: green;
}
Menu déroulant CSS
Cet effet ne sera supporté que sur des navigateurs récents et il faudra plutôt privilégier Javascript pour que cela fonctionne sur tous les navigateurs. L’avantage majeur de CSS est sa légèreté et c’est pourquoi le sujet mérite d’être abordé. Le contexte est simple, on a deux listes imbriquées, une qui affiche les entêtes des menus et une autre qui affiche les rubriques :
-------------------Le code html du menu-------------------------
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">sous-menu 1</a></li>
<li><a href="#">sous-menu 2</a></li>
</ul>
</li>
</ul>
</div>
--------------------Le code css du menu----------------------
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:2px;
background-color:#E4E4E4;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
