CSS : éléments de base
Le CSS doit être écrit dans un (ou des) fichier(s) à part, dont l'extension est .css. Il est possible de faire autrement mais cela est fortement déconseillée (directement dans le fichier html).
Le lien vers ces fichiers est donné dans l'entête du fichier html.
<link rel="stylesheet" media="screen" type="text/css" title="Premier style" href="styles/premier.css" />
Remarquez que l'on peut définir un style pour l'affichage écran, et un autre pour l'impression par exemple...
Dans un CSS, on trouve 3 éléments différents :
Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les titres <h1>, je dois écrire h1
Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte etc etc...
Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on veut etc etc...
p
{
color: blue;
font-size: 18px;
}
Essayez pour voir !
Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?
On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :
-
L'attribut class
-
L'attribut id
Class
C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
Les class vous permettent de définir un style personnalisé.
Supposons que vous vouliez définir un style appelé "important" qui écrive le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important" à chacune des balises que vous voulez modifier.
.important
{
color: red;
font-size: 18px;
}
Id
Il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois.
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page, comme par exemple le logo.
Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (#) :
<img src="images/logo.png" alt="Logo du site" id="logo" />
#logo
{
/* Mettez les propriétés CSS ici */
}
Cette balise sert à délimiter une partie de texte au sein d'un paragraphe de manière à pouvoir lui appliquer un style particulier : sans style, elle n'a aucun effet.
<p>N'hésitez pas à aller le <span class="visite"> visiter </span>, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
.visite
{
color:red;
}
Le but ici est de pouvoir changer le style d'un élément seulement s'il est contenu dans un autre élément (par exemple, l'allure du paragraphe dans une citation longue.
blockquote p
{
text-align:right;
color:grey;
font-family:arial;
}
Si, dans votre CSS, vous mettez plusieurs identifiants séparés par un espace, vous obtenez l'effet d'imbrication.
Si vous séparez par une virgule, vous obtenez un effet de liste (tous les éléments listés partagent les éléments de style définis là)
h1,h2
{
font-weight:bold;
text-decoration:underline;
}
