#4 css 101

CSS ?
Les feuilles de style en cascade,
généralement appelées CSS,
forment un langage informatique
qui décrit la présentation des
documents HTML
Source : wikipedia.org

CSS ?
Tous les éléments de la page sont de couleur
rouge.
Tous les titres de la page sont de couleur
bleue.
Certains titres de la page sont de couleur
bleue.

CSS dans une page HTML (1)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: red;">Lorem ipsum.</h1>
</body>
</html>

CSS dans une page HTML (2)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Lorem ipsum.</h1>
</body>
</html>

Première feuille de style
selecteur{
propriété: valeur;
}
!
selecteur{
}

Première feuille de style
h1{
color: blue;
font-size: 20px;
}
!
p{
color: red;
}
Selecteur
Valeurs
Propriétés

Une balise
h1{
color: blue;
font-size: 20px;
}
!
p{
color: red;
}

Une class
.titre{
color: blue;
font-size: 20px;
}
!
.toto{
color: red;
}

Une id
#titre{
color: blue;
font-size: 20px;
}
!
#toto{
color: red;
}

Selection multiple
#titre, #super, #youpi{
color: blue;
font-size: 20px;
}

Selection via inclusion
#titre ul li a{
color: blue;
font-size: 20px;
}

Pseudo classe
#titre ul li:hover a{
color: red;
}

Taille du texte
h1{
font-size: 20px;
}
!
p{
font-size: 1.1em;
}

Couleurs
h1{
color: red;
}
!
p{
color: #f03838;
}

Format du texte
h1{
text-decoration: underline;
font-style: italic;
}
!
a{
text-decoration: none;
font-weight: bold;
}
!
p{
color: #f03838;
}

Police (1)
body{
font-family: "Open Sans", arial, sans-serif;
}

Police (2)
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>

Police (3)
http://www.fontsquirrel.com/tools/webfont-generator

Alignement
h1{
text-align: center;
}
!
h2{
text-align: right;
}

Liste
ul{
list-style: none;
}
!
ol{
list-style: square;
}

Bordures
header{
border-bottom: 1px solid #303030;
}
header{
border: 3px dashed red;
}

Bibliographie
Bien construire sa hiérarchie de titres - Laurie-Anne
http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet
http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/
A vocabulary and associated APIs for HTML and XHTML - W3C
http://www.w3.org/TR/html5/
HTML5 : structure globale du document -Simon-K
http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html

Crédits
HTML5 - Erick Dimas
http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg
Hypertext Editing System (HES) console - Greg Lloyd
http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg

#4 css 101

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to #4 css 101

Similar to #4 css 101 (20)

More from Jean Michel

More from Jean Michel (17)

#4 css 101