CSS "Cascading Style Sheets" en français "Feuilles de style en cascade".
De quoi s'agit-il ?
On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (à l'extension .css au lieu de .html).
C'est un fichier dans lequel on écrit l'apparence que notre site à savoir :
La mise en page, la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc...
Faisons notre premier document css:
- style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs.
- index.htm : contiendra tout notre code HTML.
1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
2. Créons un modèle de page, comprenant une boite de largeur 1024 px et de hauteur 300 px.( width:1024px; height:300; )
Cette boite occupera une position relative ( position:relative; )
Cette boite sera situé au milieu de le fenetre. ( margin-right: auto; margin-left: auto; )
Cette boite sera le premier élément les éléménts suivant viendrons se positionner dessus. ( z-index:1; )
Cette boite sera de couleur jaune. ( background-color: #FFFF99; )
Cette page sera un fichier CSS nommée: style_div.css
position:relative;
width:1024px;
height:300px;
z-index:1;
margin-right: auto;
margin-left: auto;
background-color: #FFFF99;
}
Pour inclure notre CSS dans notre page HTML, il nous suffit d'insérer le code suivant entre les balises <head> et </head>:
<link rel="stylesheet" type="text/css" href="style_div.css">, pour indiquer le chemin du fichier style_div.css
Pour inclure la boite, il nous suffit d'insérer le code suivant entre les balises <body> et </body>.<div id="boite"></div>
On peu inclure du texte après la fin de balise > et avant la balise </div>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link rel="stylesheet" type="text/css" href="style_div.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="boite">Ceci est une boite de 1024 px par 300 px
</div>
</body>
</html>
