Styles Css

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Styles Css

Temps d'étude : 30 min.

Niveau : Facile.

Tags : Styles Css

Fichier(s) utile(s) pour ce cours : /

Styles CSS

Il existe plusieurs moyens d'écrire du code CSS :

Dans un fichier CSS
Dans un fichier HTML
Dans l'attribut d'un fichier HTML

Style css dans un attribut Html

Exemple Html :

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
			</head>
			<body>
			
				<p style="color: green; text-decoration: underline; font-weight: bold;">Mon premier paragraphe de texte !</p>
				
			</body>
		</html>

Style css directement dans un fichier Html

Exemple Html :

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<style>
					.montexte { color: green; text-decoration: underline; font-weight: bold; }
				</style>
			</head>
			<body>
			
				<p class="montexte">Mon premier paragraphe de texte !</p>
				
			</body>
		</html>

Le seul avantage de ces deux techniques réside dans le fait qu'il est possible de tout écrire au sein du même fichier.
L'inconvénient c'est que ce style ne pourra pas être utilisé ailleurs, à moins de le réécrire à nouveau, ce qui peut être long et imprécis.

Nous privilégions donc une feuille de style CSS a part entière en plus de notre fichier HTML.

Style dans un fichier CSS externalisé

Exemple Html :

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="style.css">
			</head>
			<body>
			
				<p class="montexte">Mon premier paragraphe de texte !</p>
				
			</body>
		</html>

Autre Exemple Html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<style type="text/css">@import url('style.css');</style>
			</head>
			<body>
			
				<p class="montexte">Mon premier paragraphe de texte !</p>
				
			</body>
		</html>

Et le fichier CSS :

		.montexte{ color: green; text-decoration: underline; font-weight: bold; }

Gérer les affichages : Display Inline & Block

Nous allons prendre un cas d'étude permettant de centrer du texte sur la page.

Comprendre la différence entre la propriété display inline et display block

Exemple Html :

display.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="display.css">
			</head>
			<body>			
				
				<h1> h1 </h1>
				
				<p> p </p>
				
				<span> span </span> 
				
				<div> div </div>
				
				<a href=""> a </a>
				
			</body>
		</html>

Exemple Css :

display.css

		h1{ text-align: center; }
		p{ text-align: center; }
		span{ text-align: center; }
		div{ text-align: center; }
		a{ text-align: center; }

La propriété text-align permet de gérer l'alignement d'un texte

Le Résultat
explications Html / Css

Sur ce résultat, nous pouvons constater que chaque contenu est bien centré, sauf le span et le lien a !
Pourquoi est-ce que le contenu de mon span et mon lien (a) ne se centrent pas ?
Pour le comprendre il va falloir ajouter des bordures :
Exemple Css :

display.css

		h1{ text-align: center; border: 1px solid; }
		p{ text-align: center; border: 1px solid; }
		span{ text-align: center; border: 1px solid; }
		div{ text-align: center; border: 1px solid; }
		a{ text-align: center; border: 1px solid; }

La propriété border permet d'ajouter une bordure - 1px correspond à l'épaisseur du trait - solid correspond à un trait plein.

Le Résultat
explications Html / Css

Nous pouvons remarquer que le span et le a ne font pas toute la largeur de la page !
En effet, ils sont prévus pour occuper uniquement la place dont il ont besoin, on dit qu'il s'agit d'éléments de type inline !
C'est la raison pour laquelle nous ne pouvons pas centrer le texte, puisqu'il est déjà compressé à l'intérieur du span (et du lien a).
Si nous souhaitons les centrer, nous pouvons les passer en type block :

display.css

	h1{ text-align: center; border: 1px solid; }
	p{ text-align: center; border: 1px solid; }
	span{ text-align: center; border: 1px solid; display: block; }
	div{ text-align: center; border: 1px solid; }
	a{ text-align: center; border: 1px solid; display: block;  }

Le Résultat
explications Html / Css

Nos textes à l'intérieur du span et de notre lien (a) sont bien centrés !

Pour les autres éléments : <h1>, <p>, <div>, il n'est pas nécessaire d'appliquer la propriété display: block; car il sont déjà en type block !

Résumé
certains éléments sont de type inline et d'autres de type block.
Dans notre cas : h1, p et div sont de type block par défaut. span et a sont de type inline par défaut.

Nous pouvons changer la propriété display d'un élément via le code CSS :

	 display: block; 
	 display: inline; 
	 display: inline-block;

Margin et Padding

Dans un site web, il arrive fréquemment que l'on veuille espacer des éléments entre eux. Pour cela, il est courant d'utiliser les propriétés margin et padding.

Différence entre MARGIN et PADDING

Exemple Html

marginpadding.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="marginpadding.css">
			</head>
			<body>			
				
				<div class="maZoneA"> div </div>
				<div class="maZoneB"> div </div>
				
			</body>
		</html>

Exemple Css

marginpadding.css

	.maZoneA{
	border: 1px solid;
	background: blue;
	
	/* MARGIN : marges extérieures */
	margin: 10px 9px 8px 7px; /* 10px en haut - 9px à droite - 8px en bas - 7px à gauche */
	margin: 10px 7px; /* 10px en haut et en bas - 7px à gauche et à droite */
	margin: 10px 9px 8px; /* 10px en haut - 9px à droite - 8px en bas. */
	margin: 10px; /* 10px tout autour (haut, droite, bas, gauche). */
	
	/* Cela peut aussi s'écrire de cette manière : */
	
	margin-top: 10px; /* top en haut */
	margin-right: 10px; /* right à droite */
	margin-bottom: 10px; /* bottom en bas */
	margin-left: 10px; /* left à gauche */
	
	
	/* Même chose pour PADDING : marges intérieures */
	
	padding: 10px 9px 8px 7px; /* 10px en haut - 9px à droite - 8px en bas - 7px à gauche */
	padding: 10px 7px; /* 10px en haut et en bas - 7px à gauche et à droite */
	padding: 10px 9px 8px; /* 10px en haut - 9px à droite - 8px en bas. */
	padding: 10px; /* 10px à l'intérieur (haut, droite, bas, gauche). */	
	padding-top: 10px; /* top en haut */
	padding-right: 10px; /* right à droite */
	padding-bottom: 10px; /* bottom en bas */
	padding-left: 10px; /* left à gauche */
	}
	
	.maZoneB{
	border: 1px solid;
	background: red;
	}

Toutes les explications se trouvent en commentaire directement dans le code, mais pour bien comprendre, rien ne vaut un bon schéma :

explications Html / Css

Le padding (espace intérieur d'une zone) apparait en violet.

Le margin (espace extérieur d'une zone) apparait en jaune.

Nous pouvons constater cela avec l'aide de Firebug et modifier directement les valeurs avec l'aperçu en direct :

explications Html / Css

Faites le test !

Allez au chapitre suivant : 8. L'heritage