GuideDuDebutantEnCSS 2015

// Mini-guide du débutant en CSS
// Version 2015
// Syntaxe générale
Votre feuille de style CSS est à placer dans le header de votre page HTML (entre <head>
et </head>).
Pour délimiter la zone de texte où on parle en CSS, on utilise les balises
<style type="text/css"> et </style>
ou dans un fichier .css indépendant (recommandé), dans ce cas il faut indiquer dans votre
page HTML quel fichier utiliser via :
<link href="css/style.css" rel="stylesheet" type="text/css" />
Ici on indique que le fichier style.css se trouve dans le dossier css/

Les fichiers HTML sont à placer à la racine de votre dossier site/
L'ordre dans lequel vous écrivez vos balises CSS a son importance, si vous entrez des
infos contradictoires c'est la dernière instruction qui écrase la précédente.
Pour cette raison, on va du général au particulier, si possible.
Voici un exemple de code CSS de base de la page, qui définit un style global pour
l'ensemble de la page, et spécifie la couleur des liens.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
}
a{
color: #FF0000;
text-decoration: none; /* pas souligné */
}
a:hover {
text-decoration:underline; /* souligné au survol seulement */
}
Attention à ne pas oublier les points-virgules après chaque balise CSS !!!
// Les sélecteurs CSS
En CSS on peut sélectionner 1 ou plusieurs éléments du <body>, de plusieurs façons.
Code CSS Balises HTML ciblées Exemple HTML

h1 { … } Toutes les balises h1 <h1>...</h1>
du document
#truc { … } Une balise unique <p id="truc">...</p>
(de n'importe quel
type) dont l'attribut id
est "truc"
.truc { … } Toutes les balises de <p class="truc">...</p>
tous types dont <h1 class="titre truc">...</h1>
l'attribut classe est
"truc"
On peut cumuler les 3 syntaxes pour écrire des chemins plus complexes vers une cible
mieux délimitée :
#article .titre { … } ESPACE : Sélectionne les balises de classe "titre" DANS

une div dont l'id est "article".
h1.titre { … } PAS D'ESPACE : Sélectionne seulement les h1 qui ont
aussi la titre
#article .titre, h1.titre { … } VIRGULE : Sélectionne en même temps (cumulés) les 2
sélections décrites ci-dessus
Quelques sélecteurs spéciaux :
a{…} Tous les liens

a:hover { … } Le style au survol des liens
a:visited { … } Le style des liens déjà visités
// Les mots et les familles importantes du CSS
Ces balises décrivent un style, et sont donc à placer entre { et } une fois qu'on ciblé un
groupe de balises HTML, pour décrire le style qu'on souhaite leur appliquer.
L'ensemble du langage CSS et des compatibilités suivant le navigateur est référencé en

détail ici : http://www.w3schools.com/cssref/
Typos, lettrage, blocs de textes
Balise CSS Description Exemple

color Couleur du texte, hexadécimale color: #000000;
font-family Familles de typos, la 1ère en priorité, la font-family: Arial, Helvetica, sans-serif;

2ème si la 1ère n'est pas installée chez le
visiteur, etc
font-size Taille de la typo font-size: 12px;
font-weight Graisse de la typo font-weight: normal; // par défaut

font-weight: bold;
font-style Italique... font-style: normal; // par défaut
font-style: italic;
letter-spacing Espace entre chaque caractère letter-spacing: 2px;
word-spacing Espace entre chaque mot (c'est la taille word-spacing: 10px;

d'un espace, quoi)
text-align Alignement du texte dans son bloc text-align: justify;
parent text-align: right;
text-align: left; // par défaut
text-decoration Souligné, barré, clignotant text-decoration: none; // par défaut
text-decoration: blink;
text-decoration: line-through;
text-decoration: underline;
text-transform Passer tout le texte en majuscules ou text-transform: uppercase;
minuscules, ou ajouter des capitales au text-transform: lowercase;
début de chaque mot text-transform: capitalize;
text-indent Indentation text-indent: 50px;
Typos CSS3
http://www.fontsquirrel.com/fontface Des kits de typos web prêt à être intégrées, livrées avec
le css à copier-coller dans votre feuille de style
http://www.fontsquirrel.com/fontface/generator Pour toutes les typos truetype (.ttf) ou opentype (.otf) qui
viendraient d'ailleurs, un convertisseur qui vous livrera
un pack complet, avec plusieurs formats de polices web
et le code css à copier-coller... très pratique !
http://www.abstractfonts.com/ Un paquet de typos truetype/opentype gratuites
intéressantes, catégorisées, à ensuite passer dans le
convertisseur de fontsquirrel...
https://typekit.com/ Le site officiel Adobe, pour acheter des typos avec une
licence web complète
Typos CSS3, mode d'emploi
Pour déclarer une nouvelle typo, dans la feuille de style, à répéter pour chaque typo...
Dans l'exemple, on s'adresse donc aux 4 formats de typos fournis par fontsquirrel,
qu'on aura placés dans un dossier hetilica/ du site, lui-même dans le dossier fonts/
@font-face {
font-family: 'HetilicaBold'; /* le nom de la famille de typo */
src: url('fonts/hetilica/hetilica-webfont.eot');
src: url('fonts/hetilica/hetilica-webfont.eot?#iefix') format('embedded-
opentype'),
url('fonts/hetilica/hetilica-webfont.woff') format('woff'),
url('fonts/hetilica/hetilica-webfont.ttf') format('truetype'),
url('fonts/hetilica/hetilica-webfont.svg#HetilicaBold') format('svg');
font-weight: bold;
font-style: normal;
}
A partir de là la typo devient accessible dans le css de manière habituelle, exemple :
#header h1 {
font-family: 'HetilicaBold', Arial, sans-serif;
/* ici on indique que si la typo ne marche pas, on passe en Arial... */
}
Général
background-color Couleur de fond background-color: #FFFFFF;
color Couleur du texte color: #FF0000;
border Bordure ou pas, et description de la border: none;

bordure... border: solid 1px #FF0000;
// bordure rouge d'1 px de large, continue
border: dashed 1px #FF0000;
// bordure rouge d'1 px de large, pointillée
opacity Pour gérer la transparence d'un opacity: 0.5; // à moitié translucide
élément, entre 0 (transparent) et 1
(opaque)
box-shadow Pour créer une ombre sous l'élément -moz-box-shadow: 10px 10px 5px #888;
html. A combiner avec les balises -webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow et -webkit-box- box-shadow: 10px 10px 5px #888;
shadow /* largeur hauteur flou couleur */
pour s'assurer une meilleure
compatibilité sur les différents
navigateurs
height Hauteur du bloc height: 100px;
height: 100%; // par rapport à la balise
parente qui le contient
width Largeur du bloc width: 100px;
width: 100%; // par rapport à la balise
parente qui le contient
margin Marge extérieure au bloc margin: 20px; // 20px de tous les côtés
(dans le sens des aiguilles d'une margin: 5px 10px 15px 20px;
montre : haut-droite-bas-gauche) // des marges différentes de chaque côté
margin-top Pour toucher seulement à un côté à la margin-left: 20px; // marge à gauche
margin-bottom fois...
margin-left
margin-right
padding Marge intérieure du bloc padding: 20px; // 20px de tous les côtés
(dans le sens des aiguilles d'une padding: 5px 10px 15px 20px;
montre : haut-droite-bas-gauche) // des marges différentes de chaque côté
padding-top Pour toucher seulement à un côté à la padding-left: 20px;
padding-bottom fois... // 20px de marge intérieure, à gauche
padding-left
padding-right
overflow Pour un bloc dont on a fixé la largeur et overflow: hidden; // on cache
la hauteur, permet de spécifier ce qu'on overflow: scroll;
fait s'il y a du contenu qui dépasse... // on affiche toujours une scrollbar
overflow: auto;
// on affiche une scrollbar seulement si ça
dépasse
float A ne pas confondre avec l'alignement float: left;
du texte (text-align), ici il s'agit de float: right;
l'alignement du bloc dans la page... float: none; // par défaut
Si on utilise float, le bloc ne
"collisionne" plus avec les autres blocs,
et s'aligne par-dessus le reste...
à user avec précaution, et à combiner
avec clear:both;
clear Pour revenir à une collision standard <div style="clear:both;"></div>
entre les blocs, après des blocs en float à placer après les blocs en float, ou via une
left ou right... classe .clear : .clear { clear:both; }
<div class="clear"></div>
display Spécifie comment le bloc se positionne display: block; // retour à la ligne après
par rapport aux autres blocs, display: inline; // pas de retour à la ligne
Par défaut, une <div> est en display: none; // invisible, et ne compte pas
display:block; dans la mise en page
display: inline-block; // les blocs
s'empilent de gauche à droite mais restent
des blocs ! Super utile.
visibility Pour cacher du contenu, tout en le visibility: hidden;
faisant compter dans la mise en page. visibility: visible; // par défaut
On ne le voit pas, mais il est là.
position Permet de sortir du placement position: inherit; // par défaut
"automatique" normal d'une page position: absolute; // pour placer le bloc par
HTML, où tous les blocs s'empilent rapport aux 4 coins de la page
dans l'ordre où ils sont dans le code. position: fixed; // pour placer le bloc par
rapport aux 4 coins de la page, le bloc ne
suit pas quand on fait défiler la page
position: relative; // pour placer le bloc par
rapport à sa position naturelle
top Utilisable seulement après position. top: 20px; // 20px sous le haut de la page
Pour placer le bloc par rapport au haut top: -20px; // 20px au-dessus du haut de la
de la page. page
left Utilisable seulement après position. left: 20px; // 20px à droite du bord gauche
Pour placer le bloc par rapport à la left: -20px; // 20px à gauche du bord
gauche de la page. gauche
right Utilisable seulement après position. right: 20px; // 20px à gauche du bord droit
Pour placer le bloc par rapport à la right: -20px; // 20px à droite du bord droit
droite de la page.
bottom Utilisable seulement après position. bottom: 20px; // 20px au-dessus du bas de
Pour placer le bloc par rapport au bas la page
de la page. bottom: -20px; // 20px en-dessous du bas
de la page
z-index C'est l'équivalent d'un calque en CSS. z-index: 3; // sera au-dessus d'une balise
En indiquant des z-index à plusieurs z-index:2; // et au-dessous d'une balise
balises, vous spécifiez laquelle est au- z-index:4;
dessus et laquelle au-dessous.
Plusieurs balises peuvent avoir le
même z-index.
z-index n'est pris en compte que sur
des blocs en position:absolute,
position:relative, ou position:fixed

GuideDuDebutantEnCSS 2015

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

GuideDuDebutantEnCSS 2015

Transféré par

Droits d'auteur :

Formats disponibles

// Mini-guide du débutant en CSS

Ici on indique que le fichier style.css se trouve dans le dossier css/

En CSS on peut sélectionner 1 ou plusieurs éléments du <body>, de plusieurs façons.

Code CSS Balises HTML ciblées Exemple HTML

#article .titre { … } ESPACE : Sélectionne les balises de classe "titre" DANS

Quelques sélecteurs spéciaux :

a{…} Tous les liens

L'ensemble du langage CSS et des compatibilités suivant le navigateur est référencé en

Typos, lettrage, blocs de textes

Balise CSS Description Exemple

font-family Familles de typos, la 1ère en priorité, la font-family: Arial, Helvetica, sans-serif;

font-weight Graisse de la typo font-weight: normal; // par défaut

word-spacing Espace entre chaque mot (c'est la taille word-spacing: 10px;

A partir de là la typo devient accessible dans le css de manière habituelle, exemple :

background-color Couleur de fond background-color: #FFFFFF;

color Couleur du texte color: #FF0000;

border Bordure ou pas, et description de la border: none;

Vous aimerez peut-être aussi