| |
|
TUTORIAUX CSS
Pourquoi utiliser le CSS ?
Le CSS ou Cascading Style Sheet (feuille de style en cascade) permet de simplifier la structure de vos pages web. Il est officillement reconnu par le W3C.
Au lieu de modifier votre contenu sur chacune de vos pages, vous allez
pouvoir en modifiant une seule page modifier toutes les pages de votre
site.
Vous pourrez ainsi modifier la taille ou couleur d'un texte, proposer une taille de police spécifique suivant vos titres et sous-titres, modifer la mise en page de votre design.
Avant de commencer à apprendre le CSS, quelques notions en HTML sont vivement conseillées.
Afin d'inclure du CSS, deux solutions existent.
-
Vous intégrez la syntaxe entre <head> et </head>. Ce qui signifie que devrez répéter
cette opération sur toutes vos pages. Vous pouvez également intégrer les attributs style sur chaque ligne de votre page. Mais ce n'est donc pas l'idéal.
- Vous utilisez une page qui contiendra tous vos styles CSS de toutes vos pages. Cette page devra porter l'extension .css
Nous allons donc utiliser la seconde solution.
Introduire une feuille de style CSS
Pour introduire une feuille de style, dans l'entête de votre page html ou php, vous devrez placer ce code (entre <head> et </head>):
<link href="style.css" rel="stylesheet" type="text/css" >
Vous pouvez bien sûr lui donner le nom que vous voulez. Il suffira alors de modifer href (votre page devra toujours porter l'extension .css).
Nous allons donc à l'aide d'exemples comprendre les différentes syntaxes possibles.
Au travail maintenant:
A l'aide de votre éditeur, créez deux fichiers.
Le premier:
essai.htm
Le second: style.css
Dans votre fichier essai.htm :
insérez le code entre <head> et </head> pour intégrer votre feuille de style.
<link href="style.css" rel="stylesheet" type="text/css" >
Insérér une couleur de fond à votre page ou une image en arrière-plan dans un fichier CSS
Ouvrez maintenant votre fichier style.css:
Nous allons commencer par mettre une couleur de fond à votre page (noire).
Voici la syntaxe à insérer :
body
{
background-color: #000000;
}
body est donc le corps de votre page, vous placez ensuite des accolades ouvertes et fermées et insérez à l'intèrieur ce que vous souhaîtez modifier.
Ici donc, le background qui correspond à l'arrière-plan. Et le code couleur souhaité.
Faîtes le test et changer de couleur.
Vous pouvez également placer une image en arrière-plan dans votre fichier CSS.
CONTINUONS >> |
|
|
