michel.pageperso webdesign

Récapitulatif:

Nous sommes partis d'un site d'exemple sans aucun style sauf celui défini par défaut par votre navigateur. Nous avons modifié les données générales de l'html et du body. Puis celui du haut de page, celui du menu de navigation, celui du ventre (contenant article et colonne qui eux mêmes contiennent titre - paragraphe - annotation - lien et ligne), enfin celui du bas de page.
Voici le code complet de CSS:

/*style michel.pageperso simple*/
html,body,h1,h2,h3,h4,h5,h6,p,a,ol,ul,li,hr{
	font-size:100%;
	margin:0;
	padding:0;
	border:0;
	text-decoration:none;
	list-style:none;
	}
/*pour tout le site*/
body{
	background:Gray;
	color:Black;
	}
a{	
	font-size:1em;
	font-weight:bold;
	color:Red;
	}
a:hover{
	color:Blue;
	}
#site{
	width:768px;
	margin:0 auto;
	background:White;
	}
/*haut de page*/
#haut{
	text-align:center;
	}
#haut h1{
	font-size:2.5em;
	}
#haut p{
	font-weight:normal;
	font-size:1.5em;
	}
/*menu de navigation*/
#menu{
	padding:1% 2%;
	background:Black;
	}
#menu ul li a{
	text-transform:uppercase;
	font-size:1.25em;
	}
#menu ul li ol li {
	display:inline;
	}
#menu ul li ol li a{
	text-transform:none;
	font-size:1.1em;
	margin-left:2%;
	}
/*ventre du site - les 2 colonnes*/
#ventre {
	overflow:hidden;
	}
/*colonne de droite*/
#article {
	float:left;
	width:66%;
	padding:1% 2%;
	}
#article h1{
	font-size:1.2em;
	font-weight:bold;
	}
#article p{
	font-weight:normal;
	font-size:1.1em;
	text-align:justify;
	}
#article h2{
	font-weight:normal;
	font-size:0.9em;
	text-align:right;
	font-style:italic;
	}
#article #lien{
	text-align:right;
	}
#article hr{
	height:2px;
	margin:10px 0;
	background:Black;
	}
/*colonne de gauche*/
#colonne{
	margin-left:70%;
	padding:1% 2%;
	}
#colonne h1{
	font-weight:bold;
	}
#colonne p{
	font-weight:normal;
	}
#colonne hr{
	height:1px;
	margin:10px 0;
	background:Black;
	}
/*bas de page*/
#bas{
	padding:1%;
	text-align:center;
	background:Black;
	}
#bas p{
	font-size:1.5em;
	color:White;}

Afin de revoir ces modifications l'une après l'autre, j'ai modifié le menu de notre site d'exemple pour que celui-ci intègre chaque étapes de notre travail. Cliquez sur un sous menu pour voir le style évoluer.

Voir les évolutions du style simple

Prochain exercice: à venir...

michel.pageperso embellie le web