Introduction aux CSS | Nividic School : Apprenez à coder un site web dans la journée

Les débuts du CSS

Vers 1995, Netscape introduit les premières balises HTML destinées à la présentation et à la mise en page.

Elle répond à une volonté de faire évoluer HTML d’un langage de structuration à un langage de présentation.

HTML est-il un langage de structuration ou un langage mixte de mise en forme et de structuration ?
Les choix de présentation de l’auteur doivent-ils avoir la primauté sur ceux de l’utilisateur ?
La réponse aux besoins est-elle un langage de description de la mise en forme ou un langage de transformation ?

La toute première version de CSS sort en décembre 1996

Un des premiers navigateurs à prendre en compte de manière étendue les CSS est Internet Explorer 6

… malheureusement, la prise en compte du lange est largement buguée et le monopole de Windows et IE6 restera indétronable pendant presque 7 ans

La syntaxe du langage CSS est très simple

selecteur { propriété: valeur; }

#main-content { font-family: Raleway, sans-serif; } .intro { color: #ff0045; float: left; background-color: yellow; }

Le CSS est un langage déclaratif.

CSS signifie « Feuilles de style en cascade »

La « cascade » est la combinaison de différentes sources de styles appliqués au document.

Selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :

Les styles CSS peuvent s’appliquer de 3 manières différentes :

<link rel="stylesheet" type="text/css" href="style.css" />

Cette balise se place toujours dans l’entête de la page

<style>

#main-content {
	font-family: Raleway, sans-serif;
}

.intro {
	color: #ff0045;
	float: left;
	background-color: yellow;
}

</style>

Cette balise peut être placée n’importe où dans le document. Le plus souvent, on la rencontre dans l’entête.

Chaque balise possède un attribut facultatif et universel style=""

<p style="color: #ff0045; float: left;">Lorem ipsum dolor sit am</p>

Pour ouvrir la console, faites un clic droit sur la zone de mise en page que vous voulez étudier puis : « Inspecter élément«