Leçon de CSS n°1: la boite à outils CSS
Ces leçons de CSS ne sont pas supposées faire de vous un as du CSS, je n’en suis pas un (du tout, du tout!), mais vous donneront un bagage suffisant pour faire à peu près tout ce que vous voulez en vous amusant. Si vous avez quelques connaissances en photoshop et un intérêt pour la création, alors le CSS vous ouvre grand les portes du design web. Si vous n’avez pas de connaissances en HTML, un petit cours de rattrapage s’impose.
Bon, pour éviter les considérations techniques qui ne nous intéressent pas (tapez CSS sur wikipedia si ça vous semble vital!) faisons simple: le CSS ( »Cascading Style Sheet » entraînez vous à le prononcer, ça fait tout de suite plus pro) est ce qui vous permet de contrôler l’apparence de votre page d’une manière rapide et efficace.
Vous avez peut-être connu la mise en page avec utilisation de tableaux, le CSS vous permet de faire sans et de gagner un temps précieux, vous voulez attribuer des styles (des apparences) identiques pour certains éléments… le CSS sera votre meilleur allié. Une seule feuille de style CSS (nommée justement style.css) sur du (x)HTML, voilà ce qui va transformer n’importe que page en un ensemble beaucoup plus esthétique. Pour cela, vous n’avez besoin que d’un éditeur de texte brut (sans aucune mise en page, pas Word ni Pages!) .
Assez trainé, alors commençons!
Le principe
Chaque élément de votre page est déclarée sous une identité HTML, le CSS permet de donner un style (une apparence) à chaque identité:
- vous ciblez l’élément que vous voulez styliser (un titre par exemple)
- vous lui attribuez un style grâce à un langage (il faut juste aimer l’anglais, et ne pas être allergique aux cours de langue).
Syntaxe, un peu de grammaire
La syntaxe CSS est toujours la même:
sélecteur { propriété : valeur ; }
- un sélecteur : la cible de votre règle (pour un titre ce sera h1)
- une propriété : ce que vous voulez modifier (la couleur tu texte sera color)
- une valeur: comment vous voulez le modifier ( pour la couleur du texte tapez le code couleur #ffffff par exemple)
Avec une règle CSS, que vous placez donc dans le fichier style.css, que vous déclarez par la partie <head> de votre fichier html grâce à la formule d’appel (<link rel= »stylesheet » href= »le lien relatif » type= »text/css » media= »screen » />) vous allez pouvoir styliser tous les éléments signalés d’une balise h1 (les titres les plus importants.
Par exemple la règle CSS h1 { color : #ff0000 ; } fera apparaître tous vos titres signalés par une balise double h1 en rouge (le rouge correspondant au code couleur #ff0000).
La boite à outils des sélecteur indispensables
Les basiques
- body : votre page en entier
- p : les paragraphes
- ul, li et ol : les listes
- h1, h2, … , h6 : les titres
- a : les liens, ne pas oublier les pseudos classes associées (à déclarer dans cet ordre):
- a:link : pour styliser le lien tel qu’il apparaît non cliqué
- a:visited : pour styliser le lien tel qu’il apparaît une fois la page en question visitée
- a:hover : pour styliser le lien tel qu’il apparaît au survol de la souris
- a:active : pour styliser le lien tel qu’il apparaît lorsque le bouton de la souris est enfoncé
id et class à la rescousse
Un petit rappel: la double balise div (donc un tag pour le début <div> et un pour la fin </div> pour délimiter) permet de structurer le document en plusieurs sections (conteneurs), et remplace les tableaux pour la disposition des éléments (styliser la div c’est aussi la placer).
Une div peut contenir tous les autres marqueurs html (des h1, d’autres div, mais aussi des tableaux).
id et class permettent de styliser les div (qui se présentent sous la forme <div id= »blabla »> bloublou </div> ou <div class= »blabla »> bloublou </div>)
- Les id servent à individualiser un élément qui ne revient qu’une fois dans la page. Il n’y a qu’une seule div nommée « blabla » dans la page et le sélecteur utilisé pour la styliser est #blabla
- Les class servent à individualiser un élément qui peut revenir plusieurs fois dans la page. Toutes les <div class= »blabla »> sont ciblées par le sélecteur .blabla
La boite à outils des propriétés indispensables
Une fois que l’on sait ce qu’on a envie de styliser, une fois qu’on l’a sélectionné à l’aide du selecteur, reste à dire ce qu’on veut changer pour cet élément de la page sélectionné:
- la couleur de la police : utilisez la propriété color
- la couleur du fond : utilisez la propriété background-color
- la police utilisée : utilisez la propriété font-family
- la taille de la police : utilisez font-size
- la marge (marge extérieure) : utilisez margin
- le padding (marge intérieure) : utiliser padding
- l’alignement du texte : utilisez text-align
La boite à outils des valeurs à connaître
Dans le trio de choc sélecteur/propriété/valeur reste donc à préciser la valeur de la propriété, pour un sélecteur donné !
- pour les couleurs (propriétés color et background-color) utilisez les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc). on peut aussi nommer les couleurs (
- pour les polices : le web aime helvetica et georgia, les ordinateurs aussi, alors ne vous en privez pas!
- pour les tailles : vous pouvez utiliser les longueurs relatives (exemple: 5em), les pourcentages (exemple 90%), les pixels (exemple: 12px) ou enfin les points (exemple: 15pt).
- les positions : on en restera pour aligne le texte à left, right, center
Un exemple de feuille de style css style.css
Note 1 : dans un fichier css, vous pouvez écrire des notes en les encadrant de /* et */
Note 2 : commencez votre feuille de style par un « reset » pour mettre toutes les marges à 0 et éviter tout problème de navigateur (internet explorer est le cauchemar des web designer… mais est utilisé par une part non négligeable des internautes)
html, body {
background-color: white;
font-family: Verdana, sans-serif;
font-size: 80%;
}
h1 {
font-size: 200%;
color: navy;
text-align: center;
}
h2 {
font-size: 120%;
color: blue;
padding-left: 15px;
}
p,ul,li {
color: black;
}
a:link {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color:red;
}
a:hover {
color: red;
text-decoration: none;
}
Pour en savoir un peu plus, et surtout vous familiariser avec toutes ces appellations barbares, un autre cours de css pour débutants ici.
