CREER UNE CLASSE PERSONNALISEE

CREER UNE CLASSE PERSONNALISEE


Une classe personnalisée va être utilisée ponctuellement dans les pages du site. Le nom de la
classe doit être précédé d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni
espaces, ni accent, ni caractère de ponctuation, ni tiret.
Exemple pour une classe qui met du texte en rouge sur un paragraphe :
CSS :

La valeur de la propriété de couleur peut être un mot-clef (red, green, transparent, …), un
code Hexadécimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex:
color: rgb(255,125,32); ).
NOTE : L'indication hexadécimale d'une couleur peut parfois être raccourcie en
regroupant par paire les lettres et chiffres. Ainsi, "#ff00ee" pourra s'écrire "#f0e".
Mais "#ff00de" ne pourra pas être raccourcie.
Les classes personnalisées peuvent s'appliquer à toutes les balises html.
Pour appliquer plusieurs classes à une même balise :
CSS :

Plus d'infos »

Syntaxe des règles CSS

Syntaxe des règles CSS


Contrairement au HTML qui n'était pas très standardisé, les CSS ne laissent pas de place aux
erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html.
Chaque règle doit contenir un sélecteur et une déclaration.
Les propriétés de la déclaration doivent êtres séparées par des points-virgules.
Lorsque la valeur d'une propriété est une unité de mesure et sa valeur, il ne doit pas y avoir
d'espace entre les deux :
ex:

CASSE
Les CSS ne sont pas sensibles à la casse mais par convention, on met tout en minuscules.
Le W3C recommande en outre d'écrire les codes hexadécimaux en minuscules également.

Plus d'infos »

Définition des règles CSS

Définition des règles CSS


IL Y A 4 TYPES DE REGLES
• Les sélecteurs html. Il est possible de redéfinir les balises html en CSS.
• Les classes. Il s'agit de règles librement choisies qu'on peut appliquer à n'importe quelle
balise html.
• les pseudo-classes de lien.
• Les ID. À peu près le même principe que les classes, mais ne peuvent s'appliquer qu'une
seule fois dans une page.
Toutes les règles ont la même structure :
 Sélecteur (balise html, classe, pseudo-classe ou ID)
 Propriétés qui identifient ce qui est défini.
 Valeurs données à la propriété.
La paire propriété-valeur est appelée "définition"
selecteur { propriété : valeur ;}

OU PLACER LES REGLES CSS?
Il y a 3 façons d'insérer les CSS :
- dans une balise html dans le corps du document.
- dans l'en-tête du document (balise <head>).
- relié au document html à l'aide d'une balise <link ..> également dans l'en-tête.
Le navigateur lit la page, télécharge la feuille de style et l'utilise pour afficher le reste de la
page.
Dans la balise html

Dans un fichier externe relié au document :
<link rel="stylesheet" type="text/css" href="style/style.css" />
rel="stylesheet" dit que c'est un lien externe du type feuille de style type="text/css". Le
" />" est utilisé si vous choisissez le XHTML 1.0.
CREATION DE LA FEUILLE EXTERNE.
À l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate,
TextWrangler sur Mac), créer un fichier enregistré au format texte seul, portant
l'extension .css.
Aucune balise html avec les signes < > ne doit figurer dans ce fichier !

Plus d'infos »

QU'EST CE QU'UN STYLE ?

QU'EST CE QU'UN STYLE ?


Les styles regroupent différents attributs, tels que les choix de police, de taille, de couleur à
appliquer à des titres, des sous-titres … C'est ce que va faire le CSS : permettre de définir ces
attributs dans la page html à l'aide d'un code séparé. Par exemple, les balises html comme
<h1>…</h1> qui par défaut possèdent une taille ou une graisse non modifiable en html,
verront ces caractéristiques complètement redéfinissables en CSS.
PROPRIETES DES CSS
Police : taille, style, couleur.
Texte : alignement, casse, interlignage, espace entre les mots et les lettres.
Arrière-plans : couleur ou images.
Bords et marges : marges, remplissages, largeur, hauteur.
Bordures : style, épaisseurs, couleurs.
Interface : puces, indentation, curseur.
Positionnement : emplacement exact sur l'écran.
Affichage et visibilité : si un élément apparaît et comment.
Impression : comment définir l'aspect de la page à l'impression.

Plus d'infos »

Qu'est-ce que les CSS ?

Qu'est-ce que les CSS ?


Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS)
Le principe de base est le suivant : il faut séparer le contenu de la page, de son apparence. La
page html contient l'information, et non la façon dont l'information est affichée. Pour un unique
contenu : plusieurs affichages sont possibles. On peut penser à des affichages monochrome,
sur de petits écrans, oral (le contenu de la page web est lu), une impression papier,
impression sur des transparents, impression en braille…

VERSIONS DE CSS
• CSS1 publié en 1996 .
• CSS-P (CSS positioning) permet le positionnement d'éléments.
• CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux précédentes
versions. L'accent a été mis sur l'accessibilité et la capacité à avoir un style différent selon les
media.
• CSS3 : encore en cours de construction. Nouveautés : multicolonnage, SVG, styles sur les
polices (embossage...), arrondir les coins des boîtes, utiliser des images de fond dans les
bordures, des ombres portées...

Plus d'infos »