Conception de pages pour un navigateur

Généralités sur la mise en page avec les styles

Le langage CSS

En complément du HTML, il faut utiliser le langage CSS (Cascading Style Sheets) pour mettre en forme les informations envoyées à un navigateur.

On applique un style à chaque balise.

 

Il existe trois façons d'appliquer un style à une balise :

 

Chaque style a un nom et se voit attribuer une valeur (parmis un ensemble de valeurs prédéfinies).

Exemple : le style text-align peut prendre l'une des valeurs left, right, center ou justify.

Pour attribuer une valeur à un style, le code du langage CSS est le suivant :

nom_du_style:valeur_du_style

Défintion du style dans la balise

Dans une balise, il faut utiliser l'attribut style.

Exemple : <p style="font-size:12px; color:red">...</p>

Définition du style dans l'en-tête du code HTML

Il est souvent préférable de définir le style dans l'en en-tête du code. Ainsi, il s'applique à toutes les balises concernées du document.

Exemple (le code suivant doit être placé entre <head> et </head>) :

<style type="text/css">

p {

font-size:12px;

color:red;

}

</style>

Définition d’un style dans une feuille de style séparée du document html

La feuille de style séparée

La feuille de style doit avoir un nom du type FeuilleDeStyle.css

La feuille de style ne doit contenir que des caractères.

Dans la feuille de style, les styles sont définis comme en en-tête de document.

Exemple :
nom_balise {nom_style: valeur ; nom_style : valeur}
nom_balise.nom_class {nom_style: valeur ; nom_style : valeur}

Lien entre le document html et la feuille de style

Exemple :

<html>

<head>

<link rel="stylesheet" href="FeuilleDeStyle.css" type="text/css">

<head>

<body>

    …

</body>

</html>

  Valid XHTML 1.0 Transitional   Valid CCS

ostralo.net