CSS signifie en anglais « Cascading Style Sheets » et se traduit « feuilles de style en cascade » en français.
On utilise le langage CSS pour décrire la présentation d'un document écrit en htlm ou xml. La CSS décrit les couleurs, la police...
La CSS permet de rendre un document plus agréable à lire, mieux présenté... La CSS a donc pour rôle d'améliorer la mise en page, de séparer la structure de sa présentation et d'améliorer l'accessibilité des pages web. Le langage CSS n'est autre que des feuilles de style en cascade.
Différentes possibilités avec CSS
Placer le lien dans la balise head
<link rel="stylesheet" type="text/css" href="style-css.css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Apprendre XHTML</title>
<meta name="Description" content="HTML vous permettra de créer des pages web statiques" />
<meta name="Keywords" content="Apprendre HTML" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="style-css.css" />
</head>
@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif; /* Modifier la police de caractéres */
background-color: #CCCCCC; /* Modifier la couleur de fond en gris */
font-size: 12px;/* Modifier la taille de la police en 12 pixel*/
}
p {
margin-left:5px; /* Marge à gauche*/
margin-bottom: 5px;/* Marge en bas*/
margin-top: 10px; /* Marge en haut*/
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}
ul {
list-style-image: url(images/puce.png);/* */
}
a {
color: #000;
}
#Haut {
background-color: #666;
padding: 10px;
font-size: 14px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-left-color: #000;
color: #FFF;
font-weight: bold;
letter-spacing: 1px;
}
#Menu {
width: 800px;
margin-left: auto;
margin-right-auto;
background-color: #FFF;
margin-bottom : 10px;
background-image: url(images/dialog-warning.png);
background-repeat: no-repeat;
background-position: right center;
height: 40px;
margin-right: auto;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 14px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
#Menu a{
color: #000000;
text-decoration: none;
}
#Contenu {
width : 800px;
margin-left: auto;
margin-right-auto;
background-color: #FFFFFF;
backgroung-image: url:('images/formation-xhtml.jpg');
padding: 10px;
margin-right: auto;
border: 1px solid #000;
}
.HTML {
background-color: #FFF;
background-image: url(images/formation-xhtml.jpg);
background-repeat: no-repeat;
background-position: left center;
border: 1px solid #000;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 110px;
margin-top: 10px;
}
.Commentaire {
background-color: #FFC;
padding-top: 10px
border-color: #000000;
border: 1px solid #000;
padding: 5px;
margin-top: 10px;
}
.TexteRouge {
color: #F00;
}
.Style {
padding: 5px;
border: 1px solid #900;
}
