Vous êtes sur la page 1sur 5

CSS

Cascading Style Sheet


Le CSS est un langage de mise en forme des balises tel que l’alignement, la couleur, les bordures, etc…
Il peut s’appliquer à une balise ou un groupe de balises. Chaque balise a un nombre de propriétés qui
peuvent être fixé dans le css
Tous les paragraphes du document auront ce style
P{
Font-family:arial;
Color:#A0EFF;
Text-align:justify;
}
Trois possibilités pour définir les styles
Style dans un tag HTML
<p style=‘’color:#A0E0FF;font-style:italic;align:center’’>seul ce paragraphe aura ce style</p>
Style dans une page HTML
<style>
a,h1,p {
font-weight:bold;
}
</style>
Style pour un ensemble de pages
définit dans un fichier indépendant d’extension css, puis lier à chaque page devant contenir ce style par
la balise link
<link rel="stylesheet" type="text/css" href="styles.css" />
CSS
Les différents types de sélecteurs CSS
Définition de styles pour tous les tags de même nom
H1 { text-align: center; font-family: verdana; font-weight: bold; color: #A0E0FF;}
Définition d'un style pour plusieurs catégories de tags
P, H1, H2, h3 { font-family: verdana;}
Définition de styles pour des tags imbriqués
/* Style pour les liens contenus dans un paragraphes */
P A { color: blue; }
La notion de classe de style
<html>
<head>
<title>Page de test</title>
<style>
<!--
.Style1 { color: red; }
.Style2 { color: green; }
.Style3 { color: blue; }
-->
</style>
</head>
<body>
<h1 Class="Style1">Titre de niveau 1</h1>
<p class="Style1">Premier paragraphe</p>
<p class="Style2">Second paragraphe</p>
<p class="Style3">Troisième paragraphe</p>
</body>
</html>
CSS
Définition de styles pour un tag particulier
<html>
<head>
<title>Page de test</title>
<style>
<!--
#TheId { color: red; }
-->
</style>
</head>
<body>
<h1>Titre de niveau 1</h1>

<p>Premier paragraphe</p>
<p id="TheId">Second paragraphe</p>
<p>Troisième paragraphe</p>
</body>
</html>
Attributs Couleurs
Couleurs et images d'arrière plan
color: permet de fixer la couleur d'avant-plan.
color: purple;
color: rgb(255,0,255);
color: #FF00FF
background :permet de fixer la couleur d'arrière-plan.
background: red;
background: rgb(255,0,0);
background: #FF0000
background-image: Permet de fixer une image d'arrière plan.
background-image: url('http://hostname/reps/fichier.html');
background-repeat : repeat-x repeat-y no-repeat repeat
background : ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment']
opacity : %
Exercices
• Afficher le paragraphe jaune sur bleu, le
justifier
• Séparer deux paragraphes par un trait et les
afficher de couleurs différentes