Pas d'affolement, nous allons faire simple. Notre CSS reprendra l'intégralité du style créé précédemment; nous nous contenterons d'ajouter des lignes de code.
Commençons par dire à notre fichier HTML que nous désirons lui donner un nouveau style en nommant ce nouveau fichier "style_002.css", et comme le premier, l'enregistrerons au même niveau que notre fichier HTML. Il nous faudra bien entendu modifier la ligne qui relie nos 2 fichiers, passer de:
link rel="stylesheet" href="style_001.css" type="text/css" media="screen"
à:
link rel="stylesheet" href="style_002.css" type="text/css" media="screen".
Allez, c'est parti. En premier il est très important que nos liens > a soient très visibles. Donnons leurs une taille de 1em, un corps gras, une couleur rouge. Quand ces liens seront survolés > a:hover par notre souris, nous voulons qu'ils changent de couleur, donnons leurs la couleur bleu. Enfin donnons à notre site une largeur de 768px, centrons le (en réalité donnons une marge égale à gauche et à droite) avec margin:0 auto puis donnons comme couleur de fond la couleur blanche.
Notre premier style:
Travaillons maintenant notre bloc > haut celui qui contient l'entête > haut h1 et le slogan > haut p.
Centrons le texte de tout le bloc, donnons une taille importante à l'entête (ici 2.5em soit la taille standard définie par votre navigateur multipliée par 2.5 fois), donnons au slogan un corps de texte normal et une taille de 1.5em.
Ajoutons les lignes à notre fichier style_002.css et enregistrons le.
Centrons le texte de tout le bloc, donnons une taille importante à l'entête (ici 2.5em soit la taille standard définie par votre navigateur multipliée par 2.5 fois), donnons au slogan un corps de texte normal et une taille de 1.5em.
Ajoutons les lignes à notre fichier style_002.css et enregistrons le.
Maintenant, un gros morceau: le bloc > menu celui qui contient la liste des menus > menu ul li a et des sous-menu > menu ul li ol li a.
Détachons notre menu des bords du site en lui donnant un espace en haut et en bas de 1% et à gauche et à droite de 2%. Ajoutons lui un fond noir. Nous désirons que les menus soient en majuscule, ce sera text-transform:uppercase puis donnons leurs une taille importante, ici 1.25em. Rappelons que ces menus et les sous menus sont des liens internes, ils héritent donc des caractéristiques définis précédemment pour les liens de tout le site (voyez par exemple leurs couleurs. Nous désirons que les sous menus ne soient plus alignés l'un en dessous de l'autre mais l'un à coté de l'autre. Mettons les en ligne avec display:inline. Ces sous menus héritent des caractéristiques des menus, modifions ces premiers pour qu'ils ne soient plus en majuscule, qu'ils soient d'une taille plus petite et décalés sur la droite de 2%.
Ajoutons les lignes:
Détachons notre menu des bords du site en lui donnant un espace en haut et en bas de 1% et à gauche et à droite de 2%. Ajoutons lui un fond noir. Nous désirons que les menus soient en majuscule, ce sera text-transform:uppercase puis donnons leurs une taille importante, ici 1.25em. Rappelons que ces menus et les sous menus sont des liens internes, ils héritent donc des caractéristiques définis précédemment pour les liens de tout le site (voyez par exemple leurs couleurs. Nous désirons que les sous menus ne soient plus alignés l'un en dessous de l'autre mais l'un à coté de l'autre. Mettons les en ligne avec display:inline. Ces sous menus héritent des caractéristiques des menus, modifions ces premiers pour qu'ils ne soient plus en majuscule, qu'ils soient d'une taille plus petite et décalés sur la droite de 2%.
Ajoutons les lignes:
Attaquons nous aux blocs > ventre qui contiendra le bloc > article et le bloc > colonne.
Rien ne doit venir empiéter sur le bloc > ventre; ce sera l'affaire de overflow:hidden. la colonne de droite, le bloc > article, viendra à droite et aura une largeur de 70% (n'oublions pas les espaces à droite et à gauche de 2% soit une largeur réelle de:70-(2+2)=66%). La colonne de gauche, le bloc > colonne, viendra se placer de suite à droite grâce à une marge gauche de 70% (la largeur du bloc > article).
Modifions notre CSS et enregistrons le.
Rien ne doit venir empiéter sur le bloc > ventre; ce sera l'affaire de overflow:hidden. la colonne de droite, le bloc > article, viendra à droite et aura une largeur de 70% (n'oublions pas les espaces à droite et à gauche de 2% soit une largeur réelle de:70-(2+2)=66%). La colonne de gauche, le bloc > colonne, viendra se placer de suite à droite grâce à une marge gauche de 70% (la largeur du bloc > article).
Modifions notre CSS et enregistrons le.
Il nous faut maintenant donner un aspect intéressant aux textes aussi bien des artcles que de la colonne de droite.
Je ne vais pas vous détailler les différentes modifications apportées, elles sont facilement compréhensibles. Sachez que les titres correspondent à la balise > h1, les paragraphes des textes à la balise > p, les annotations à la balise > h2 et les lignes de séparation à la balise > hr. Nous alignerons les liens de articles > article #lien à droite pour bien les séparer du texte.
Complétons notre fichier CSS.
Je ne vais pas vous détailler les différentes modifications apportées, elles sont facilement compréhensibles. Sachez que les titres correspondent à la balise > h1, les paragraphes des textes à la balise > p, les annotations à la balise > h2 et les lignes de séparation à la balise > hr. Nous alignerons les liens de articles > article #lien à droite pour bien les séparer du texte.
Complétons notre fichier CSS.
Il nous reste à modifier le bloc > bas.
Ce bloc ne viendra pas géner les articles ou la colonne de droite car nous avions pris soit de sortir le bloc > ventre du flux normal. Il nous suffit donc de donner au bloc > bas un fond noir, un espace de 1% et de centrer le texte. Ce texte > bas p sera agrandi à 1.5em et coloré en blanc.
Ce bloc ne viendra pas géner les articles ou la colonne de droite car nous avions pris soit de sortir le bloc > ventre du flux normal. Il nous suffit donc de donner au bloc > bas un fond noir, un espace de 1% et de centrer le texte. Ce texte > bas p sera agrandi à 1.5em et coloré en blanc.
Qu'en pensez vous? Vous voici avec un webdesign simple mais fonctionnel. Bien entendu, c'est un minimum; de nombreuses autres possibilités existent.
N'hésitez pas à revenir en arrière, à voir et revoir les modifications apportées l'une après l'autre. Le mieux étant de créer un petit site en interne, sur votre ordi, de modifier le fichier CSS à votre guise et de voir ce que cela donne. Bon courage.
N'hésitez pas à revenir en arrière, à voir et revoir les modifications apportées l'une après l'autre. Le mieux étant de créer un petit site en interne, sur votre ordi, de modifier le fichier CSS à votre guise et de voir ce que cela donne. Bon courage.
