Réalisation d'un design complet (HTML / CSS) en 4 étapes

Tutorielcss

Publié par le , mis à jour le (131358 lectures)

css design

De la couleur et des images !

Voilà qui est mieux, un cadre, des couleurs, des images décoratives pour la partie header, la partie page et pour les titres de pages. On commence à voir quelque chose d'un peu plus présentable.

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #dea ;
}

On a ajouté de quoi mettre une police de caractère et une couleur de fond

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci

h1#header
{
	height: 258px;
	background: url(apple.jpg) no-repeat left top;
}

Une image de fond correspondant aux 258 pixels de tout à l'heure, attention à bien compresser vos images

div#contenu
{
	padding: 0 30px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(little_apple.gif) no-repeat left bottom ;
	color: #9b2 ;
	border-bottom: 1px solid #9b2 ;
}

Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout

div#contenu a
{
	color: #8a0 ;
}

div#contenu a:hover
{
	color: #9b2;
}

On met en forme les liens contenu dans la page

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

Mise en forme de la partie pied de page, rien d'extra-ordinaire

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

Une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du bloc pre

pre span
{
	color: #560 ;
}

Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre

pre span.comment
{
	color: #b30000 ;
}

Couleur différente pour les span de classe .comment, ceux utilisés pour les commentaires

 Voir le résultat