Redéfinir les balises HTML :

balise_html {prop1;prop2;..}

p { font-family: Verdana; font-size: 10px}
H1 { font-family: Verdana; font-size: 20px}
H2 { font-family: Verdana; font-size: 18px}

Lier une page avec une feuille de styles externe:

<LINK href="feuille_style" rel="stylesheet" type="text/css">

<LINK href="fstyle.css" rel="stylesheet" type="text/css">

Créer une classe :

.Nom_Classe {prop1;prop2;..}.

.encadre { border: 1px solid #FF0000}
.surlignage {background-color: #FFFF99}
.tableau { font-family: Verdana; font-size: 10px;background-color: #FFFF99;}

Appliquer une classe à une balise :

<p class="encadre">Mon paragraphe</p>
<table class="tableau" >
<span class="grand">I</span>

Appliquer une classe à une partie de texte :

<SPAN class="classe">texte</SPAN>

<p>Ceci est un texte <span class="surlignage">surligné</span>. Suite</p>

Définition de css dans une balise html:

<balise style="{…}">

font-family: police
font-size: taille/pourcentage/smaller/xx-small/x-small/medium/large/x-large/xx-large
font-style: normal/italic/oblique
font-weight: normal/ bold/ bolder/ lighter/ 100-900
color: couleur

Définit la police


Définit le style
définit l’épaisseur des traits

Définit la couleur

font-family: Verdana
font-size:11px

font-style :italic
font-weight :bold

color : #00FF00

border : taille dotted/dashed/solid couleur
border-top : medium/thin/thick
border-right : medium/thin/thick
border-bottom: medium/thin/thick
border-left : medium/thin/thick
border-width : medium/thin/thick
border : taille
border-style: none/dotted/dashed/solid/double/groove/ridge/ inset/outset

Bordure

border: 1px solid #000000;

border: 1px; border-style: dashed;border-color:red;width:40%;height=100

margin nombre ou % ou auto
margin-right: nombre ou %
margin-left: nombre ou %
margin-top: nombre ou %
margin-bottom: nombre ou %

Marges

margin-left:50px

margin-left:10%

padding: nombre ou %
padding-top: nombre ou %
padding-right: nombre ou %
padding-left: nombre ou %
padding-bottom: nombre ou %

Remplissage

padding: 20px;

padding: 10px 20px 10px 20px; border: dashed silver 1px ;width:300

text-indent: nombre ou %

Retrait 1ere ligne paragraphe

text-indent :20px

text-align: justify/left/right

text align:justify

line-height: hauteur ou %

Hauteur des lignes

Line-height :13px

float : none/left/right

Images ou tableaux flottants.

float:right;margin-left:20px

background-color: couleur ou transparent
background-image: url(url) ou none
background-repeat: repeat/repeat-x/repeat-y/no-repeat
background-attachement: scroll/fixed
background-position: pourcentage/longueur/top/center/bottom/left/right

Couleur de fond
Image de fond

background-image: url(cegos.gif); background-attachment: fixed;background-repeat: no-repeat; background-position: center center

text-decoration: none/underline/overline/ line-through

Soulignement ,surlignement, barré

text-transform: none/capitalize/uppercase/ lowercase

Transforme l’affichage des  caractères

text-transform: capitalize

list-style-type: upper-roman/lower-roman/upper-alpha/lower-alpha/decimal/square/circle/disc
list-style-position:inside/outside
list-style-image: url(image)

Liste à puces avec A,a,I,i,1,carré, cercle, disque.

List-style-type :decimal

vertical-align: baseline/ sub/ super/ top/ text-top/middle/ bottom/ text-bottom

Alignement vertical

vertical-align: sub;font-size:10px

vertical-align: super; font-size: 12px

width: largeur ou %
height: hauteur ou %

Largeur

font-family: Verdana;font-size: 12px;border: 1px dotted #000000 ;width:30%;

word-spacing : normal ou nombre
letter-spacing: normal ou nombre

Espacement mots
Espacement lettres

Cursor: auto/crosshair/hand /pointer/ move/text/ wait/help

Forme du curseur

cursor:wait

Position: absolute/relative
left : auto/nombre/pourcentage
top: auto/nombre/pourcentage
bottom : auto/nombre/pourcentage
right : auto/nombre/pourcentage
z-index :nombre
overflow :visible/hidden/scroll/auto
visibility : inherit/visible/hidden/hide/show
clip:forme

Position à gauche
Position haut
Position bas

<span id="moncalque" style="position:absolute; left:150px; top:50px; width:140px; height:68px;

z-index:1; overflow: visible; clip: rect(50 200 200 50);"><img src="images/deauville.jpg" width="291" height="194"></span>


clip: rect(50 200 200 50)

a:link  { }
a:visited { }
a:hover {  }
a:active {  }

Redéfinit les couleurs des liens hyper-textes.

a:link { font-family: Verdana; font-size: 11px; color: #000000; text-decoration: none}
a:visited { font-family: Verdana; font-size: 11px; color: #000000; text-decoration: none}
a:hover { color: #FF0000;text-decoration: underline}

Exemples de CSS:

Tableau encadré:
<table width="300" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" style="{border:1px solid black}">

Champ de saisie d'un formulaire:
.champsaisie { font-family: Verdana; font-size: 10px;border: 1px solid #000000}

Bouton de formulaire:
.bouton { font-family: Verdana; font-size: 10px;background-color: #99CCFF; border: 1px solid #000000}

Fond de page avec image unique fixe:
.fondpage {background-attachment: fixed; background-image: url(cegos.gif); background-repeat: no-repeat; background-position: center center;}


Liste à puces avec image:
.maliste {list-style-image: url(puce_rouge.gif)}

Calque:
<span id="moncalque" style="position:absolute; left:114px; top:25px; width:88px; height:48px; z-index:1; background-color: #FFFF33; layer-background-color: #FFFF33; border: 1px none #000000;"></span>

<INPUT class="champsaisie" >

<INPUT class="bouton">





<BODY class="fondpage" >

ou

<body style="{background-attachment: fixed; background-image: url(cegos.gif); background-repeat: no-repeat; background-position: center center;}">

<UL class="maliste">

Couleurs:
white/silver/red/maroon/purple/
fuchia/lime/ yellow/olive/green/
blue/grayblack/ navy/teal/aqua