Affichage du tutoriel
 Tutoriaux
> Programmation > CSS > Les cours > Mise en place et syntaxe des CSS |
Mise en place et syntaxe des CSS
Comment appeler la feuille style à partir du document HTML ?
Et comment appliquer un style à un texte ?
Dans ce tutorial, vous aurez toutes les explications. 
Chapitre 1 : Les CSS, comment ça marche ?
Comme je l'ai dis dans le premier didacticiel, il faut commencer par appeler la feuille de style à partir de votre document HTML.
Dans l'entête de votre document HTML, vous déclarez la CSS à l'aide de la balise <link>.
Chapitre 2 : Le code de déclaration de CSS
Dans votre document XHTML :
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mes premiers pas en CSS</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" title="Normal" />
</head>
Chapitre 3 : Les explications
Explications :
Les propriétés rel, type, media, href et title doivent être présentes.
rel : Indicateur pour les navigateurs et robots,
type : Pour indiquer vers quel type de contenu la liaison se fait,
href : Correspond à l'emplacement de votre feuille de style,
media : possibilité d'offrir des styles spécifiques selon le media visé (screen, projection, handheld, print, tv),
title : dans le cas de feuilles de style persistantes et alternatives.
Chapitre 4 : Les premières lignes de CSS
Tout d’abord, je vous donne un exemple d’instructions présentes dans une feuille de style :
Code :
p{
color:#ffffff; /* la couleur de mon paragraphe */
text-decoration:underline; /* le style appliqué au texte, je décide de le souligner */
background:#000000; /* la fond de couleur appliqué au paragraphe, il est noir dans mon cas */
}
Dans un premier temps, il faut préciser sur quelle balise les styles doivent être appliqués. On précise par ce que l’on appelle un SELECTEUR, dans ma feuille de style le sélecteur est un paragraphe p.
A ce sélecteur, on ajoute des déclaration du type : color :#ffffff ;
Et cette déclaration est composée d’une propriété possédant une valeur.
Propriété : color
Valeur : #ffffff
Chapitre 5 : Les règles de syntaxe
Si vous ne l’avez toujours pas remarqué, il est obligatoire d’encadrer les styles appliqués à un sélecteurs par des accolades ({ }).
exemple :
a { }
En ce qui concerne les propriétés, il est impératif de mettre un point virgule (
après la valeur donnée.
exemple :
Propriété : valeur ;
Comme dans mon exemple, si vous voulez commenter votre code, il suffit de mettre votre commentaire entre /* */.
exemple :
/* mon commentaire */
Conlusion
J'espère que cette deuxième étape n'a pas été trop difficile ou au contraire trop ennuyante, mais vous pouvez prétendre connaître la syntaxe du langage CSS. 
Commentaires
| Tutoriaux
> Programmation > CSS > Les cours > Mise en place et syntaxe des CSS |