CSS pour Cascading StyleSheet
(à la William Shakespeare)
CSS pour Feuille de Style en Cascade
(à la Molière)
CSS? Quest ksé ksa?
Une feuille de style css permet de décorer votre site internet.
Un peu comme si on ajouté une plante à la maison.
Oui ça fait déjà plus joli un peu de vert dans une pièce peinte en blanc.
Un site internet n'est ni plus ni moins qu'un pièce blanche
A laquelle vous aller ajouter de la décoration (un style).
Un tapis, un canapé, des tableaux, de la peinture, etc ...
En HTML CSS, ça donne
Affiche une image tapis.
Redimensionne une Div à telle taille.
Ajoute un fond d'écran en telle couleur.
Hyperlien survole change de couleur ou pas,
Etc ...
Les propriété CSS s'appliquent sur les balise HTML
Quelques exemples de balises HTML:
Un paragraphe <p></p>
Une div <div></div>
Un lien hypertexte (plus communément appelé lien HTML)<a></a>
Etc ...
Les balises sont invisibles dans la page web
Ainsi que tout le code CSS qui se trouve à l'intérieur.
Pour voir le style d'un site il faut soit:
Appuyer la Touche F12 de son navigateur internet
Activer les outils de développement dans son navigateur internet
Alors à votre papier peint, à votre peinture, à vos clavier, à vos souris ...
Allez c'est parti pour la visite guidée on se CSSexpertise !!! !!! !!!
3 façon d'utiliser du CSS dans son site
- 1 ajouter le code directement dans une balise HTML (un span ici pour l'exemple).
<span style="color: rgb(0 162 232);font-weight:bold; float:left;">Les</span>
- 2 mettre le code CSS entre les balises <style></style>
- soit dans le header de la page HTML
- soit n'importe ou dans le body de la page HTML
<html>
<head>
<style>
html
{
color: red;
background-color: rgb(255 255 255 );
}
</style>
</head>
<body>
<style>
body
{
color: red;
background-color: rgb(255 255 255 );
}
</style>
</body>
</html>
- 3 Dans un fichier externe qui porte l’extensivement .CSS
<link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />
le lien peut être renseigné:
- soit dans le header de la page HTML.
- soit n'importe ou dans le body de la page HTML.
<html>
<head>
<link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />
</head>
<body>
<link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />
</body>
</html>
Attention dans un fichier externe le code CSS est écrit directement sans les balises <style></style>
html
{
color: red;
background-color: rgb(255 255 255 );
}
Arnaud => Administrateur de Coding-Less.com
