CSS : Page 1

Nous voilà enfin dans l'antre du CSS. J'ai volontairement séparé le CSS du XHTML pour ne pas vous embrouiller. Quelle bonté !!
Bon, trêves de plaisanteries; Nous avons un programme chargé.

Où mettre le CSS

Alors que fait-on de ce fichier CSS dont tout le monde parle? Et ben, ce fichier qu'on lie à la page html; nous permet de donner du style à nos pages web. Et oui car pour l'instant, il est vrai que mes exemples n'étaient pas très design. Maintenant ça va changer. Découvrant sans plus tarder la théorie mais surtout la pratique de ce mystérieux CSS.
Tout d'abord, comment lie-t-on un fichier à l'extension .css à une page html?
Ce lien se place entre les balises <head> du document html. Voici un exemple :

<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="fr" lang="fr"> <head> <title> Page 1 </title> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="stylindex.css" />  </head> <body>

Le fichier css peut se créer avec n'importe quel éditeur tel que Notpad++. Il ne contient que du code css. Pour voir le résultat en local sur votre navigateur, il faut faire attention à l'arborescence des fichier et ouvrir uniquement le fichier html. Ce dernier, à son ouverture charge le fichier css et applique les caractéristiques imposées.
En css, on applique les styles aux balises. Pour vous faire une idée voici ce que donne un fichier css :
balise1{ propriété : valeur; propriété : valeur; propriété : valeur; } balise1{ propriété : valeur; propriété : valeur; propriété : valeur; }

On met le nom de la balise (par exemple h1), ensuite des propiétés que nous découvrirons au fil du cours. Enfin on applique une ou plusieurs valeurs à cette propriété. Un style peut être appliqué à plusieurs balises en même temps. Ces styles css s'applique à chaque partie du code html. Les class et le id en font parti. Ce sont des attributs html qui permettent d'attacher un style particulieur à un block. L'id est unique contrairement à la class qui peut s'appliquer @agrave; différentes balises. On attrubut une class comme ceci : <h1 class="">. Une fois inscrite dans le html, la class s'indetifie comme cela dans le css :
.class{ propriété : valeur; propriété : valeur; }

Pour ce qui est de l'attribut id, niveau html pas de changement. Niveau CSS, un léger chagement: le .class devient un #id. Rien de très compliqué.

J'espère que je ne vous ai pas trop embrouillé. Suivez vite la suite du cours pour vous plonger dans la pratique.

Bienvenue au pays du web statique

Où mettre le CSS