Nous avons vu dans la partie précédente les bases de l’HTML (notion de balise et organisation basique d’une page). De la même façon, nous avons fait une première approche des modifications d’affichage via le CSS.
Il existe deux façons de rajouter des modifications via le CSS:
En rajoutant style="color : black;" dans la balise de l'élément à modifier : cela peut être pratique dans certains cas très particulier (comme sur les exemples qui vous sont donnés plus bas, les buts étant justement d'appliquer ce code précis au texte d'exemple.
En créant un fichier CSS à part de la page html : cela permet de modifier les 100 pages d'un site à partir d'un code unique plutôt que de modifier les 100 pages une à une.
En réalité, il existe également la possibilité d'insérer le code CSS dans le code html. Il s'agit donc d'une méthode hybride entre les deux précédentes : on peut modifier la façon d'afficher les paragraphes sur un page avec un code unique. Néanmoins, on perd la possibilité d'avoir un site uniforme. Cette méthode ne sera pas abordée plus que cela ici.
Néanmoins, nous ne savons toujours pas comment différencier les affichages des paragraphes dans l’en-tête et dans section par exemple. Pas plus que nous ne savons comment changer l’espace entre deux paraphrases autrement qu’en utilisant la balise <br /> directement dans le fichier html.
Nous avons déjà vu :
La propriété background-color qui permet de modifier la couleur du fond l’élément (texte ou autre).
La propriété color qui permet de modifier la couleur du texte lui-même.
Autre propriété importante: l’alignement ou text-align. C’est à dire : Place-t-on l’élément en l’alignant à gauche, en le centrant ou en l’alignant à droite. Ou le texte est-il justifié ?
Avec text-align: left; :
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: center; :
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: right; :
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: justify; :
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
01° Reprendre votre page de présentation et rajouter des titres centrés et les listes en alignement à droite. Les paragraphes devront être justifiés. Pour bien voir ces derniers, le mieux est d’avoir plusieurs lignes.
Si vous n'avez plus de page, voici la page de test :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<header>
<h3>Le titre de mon site</h3>
<p>La phrase est située dans mon header</p>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<p>J'en profite pour vous montrer comment utiliser la balise
strong pour <strong>renforcer</strong> une partie d'un texte.</p>
<p>Il est également possible d'utiliser la <em>balise em</em>, ce
n'est pas très compliqué...</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
de votre présentation.</h6>
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
</section>
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
</body>
</html>
Avec text-align: left; :
Propriété suivante : le soulignement ou text-decoration. On trouve 4 valeurs pour cette propriété :
Aucune soulignement : text-decoration: none;
Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Soulignement (normal) : text-decoration: underline;
Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Surlignement (ligne au dessus du texte, pas en dessous) : text-decoration: overline;.
Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait à travers le texte : text-decoration: line-through;.
Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit.
02° Pourriez-vous demander de souligner tous les titres h1 et h2 ?
Et si vous vouliez changer la taille ? Et bien, il existe la propriété font-size où « font » fait référence à la police de caractère.
Du plus petit au plus grand, nous avons :
font-size: xx-small;font-size: x-small ;font-size: small ;font-size: medium ;font-size: large;font-size: x-large;font-size: xx-large;03° Et si vous mettiez les titres h1, h2 et h3 en xx-large, x-large et large ?
Et si je veux plus gros encore ?
Et bien, il suffit de savoir que les valeurs ci-dessous sont comme les noms (yellow, green, olive …) des couleurs : ce sont simplement des valeurs prédéfinies pratiques mais qui ne sont qu’une petite partie des couleurs disponibles.
Vous pouvez donner la valeur de la taille relative voulue à l’aide d’un facteur multiplicatif :
Pour obtenir 80% de la taille normale : font-size: 0.8em;
Pour obtenir 250% de la taille normale : font-size: 2.5em;
04° Augmenter h1 à 300%(3.0) et les paragraphes à 125%(1.25em)
Pour les textes en italiques, nous avons la propriété font-style.
Pour mettre en italique : font-style: italic; avec un exemple
Pour revenir à la police normale : font-style: normal; avec un exemple
Pour le gras, il y a la propriété font-weight.
font-weight: bold; avec un exemple
font-weight: normal; avec un exemple
05° Et si vous mettiez les titres en gras et annuliez la mise en gras de la balise strong ? Pour signaler un contenu strong, vous devrez afficher le texte de cette balise en rouge souligné.
...CORRECTION...
h1{font-weight:bold;}
strong
{
font-weight:normal;
color:red;
}
Il nous reste à voir le classique changement de police.
Il s'agit de la commande : font-family:. Ainsi font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; veut dire de commencer par tenter
d'utiliser la police Impact, puis Arial Black si ça ne marche pas et ainsi de suite. Les doubles parenthèses " sont utilisées sur "Arial Black" à cause de l’espace entre Arial et Black.
Voilà l'exemple de la police Impact.
Voilà l'exemple de Arial Black.
Voilà l'exemple de la police Arial.
Voilà l'exemple de la police sans-serif.
Voilà l'exemple de la police Courrier New.
06° Et si vous changiez quelques polices ?
Faisons une petite pause vis à vis des modifications. Vous avez bien compris qu'on peut faire beaucoup de choses.
Nous savons maintenant comment modifier les paragraphes (tous) ou les titres h1 (tous). Mais comment faire pour modifier certains paragraphes, mais pas tous ?
La méthode consiste à appliquer une classe à la balise voulue.
Dans le fichier HTML, on aurait un code de ce type par exemple :
<p>Ce paragraphe est affiché comme un paragraphe classique.</p>
<p class="mon_premier_type">Ce paragraphe devra être différent du premier.</p>
<p class="mon_premier_type">Ce second s'affiche comme le précédent.</p>
<p class="mon_second_type">Ce paragraphe devra être d'un autre type encore.</p>
Dans le fichier CSS, on aurait un code de ce type par exemple :
.mon_premier_type
{
font-style: italic;
background-color: grey;
color : white;
}
.mon_second_type
{
text-decoration : line-through;
background-color: silver;
}
Notez bien l'utilisation du point (.) devant le nom de la classe dans le CSS.
Pour rappel le code était :
<p>Ce paragraphe est affiché comme un paragraphe classique.</p>
<p class="mon_premier_type">Ce paragraphe devra être différent du premier.</p>
<p class="mon_premier_type">Ce second s'affiche comme le précédent.</p>
<p class="mon_second_type">Ce paragraphe devra être d'un autre type encore.</p>
Et cela donne ceci :
Ce paragraphe est affiché comme un paragraphe classique.
Ce paragraphe devra être différent du premier.
Ce second s'affiche comme le précédent.
Ce paragraphe devra être d'un autre type encore.
07° Recréer cet affichage ou une variante de votre invention en utilisant au moins deux classes différentes.
On voit bien que les paragraphes 2 et 3 ont la même apparence puisqu'ils dépendent de la même classe CSS.
Les classes constituent l'un des grands outils de flexibilité du CSS.
Parfois, on veut néanmoins modifier uniquement une vingtaine de paragraphes qui se suivent. Placer une classe dans chaque paragraphe semble un peu long...
Parfois, on veut néanmoins modifier uniquement une vingtaine de paragraphes qui se suivent. Placer une classe dans chaque paragraphe semble un peu long...
On peut englober plusieurs balises à l'aide d'une balise dite générique, car elle ne dispose pas de signification précise en terme de contenu (contrairement à body, nav ...)
Si on veut créer une balise générique de type block (les balises avec passage à la ligne : p, h1...), on utilise <div> et </div> pour englober les autres.
Ainsi, si on veut 4 paragraphes à la suite réagissant de même façon, on peut créer une div de classe "mon_premier_type", on peut écrire dans le HTML :
<div class="mon_premier_type" >
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>"At ipsum vitae est lacinia tincidunt. Maecenas elit orci,gravida ut, molestie non, venenatis vel, lorem. Sedlacinia. Suspendisse potenti. Sed ultricies cursuslectus. In id magna sit amet nibh suspicit euismod.Integer enim. Donec sapien ante, accumsan ut,sodales commodo, auctor quis, lacus. Maecenas a elitlacinia urna posuere sodales. Curabitur pede pede,molestie id, blandit vitae, varius ac, purus. Mauris atipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel,lorem. Sed lacinia. Suspendisse potenti. Sed ultrucies cursus lectus. In id magna sit amet nibhsuspicit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctorquis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id,blandit vitae, varius ac, purus.</p>
<p>"Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodaleseget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementumpurus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin alorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus.Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a,nulla..</p>
<p>"Phasellus placerat purus vel mi. In hac habitasse platea dictumst. Donec aliquam porta odio. Ut facilisis. Donec ornareipsum ut massa. In tellus tellus, imperdiet ac, accumsan at, aliquam vitae, velit..</p>
</div>
On voit que cette fois, c'est la balise div qui porte la classe. Toutes les balises contenues dans la balise div subissent donc les modifications de mise en page. Pratique.
Voilà ce que cela donne :
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"At ipsum vitae est lacinia tincidunt. Maecenas elit orci,gravida ut, molestie non, venenatis vel, lorem. Sedlacinia. Suspendisse potenti. Sed ultricies cursuslectus. In id magna sit amet nibh suspicit euismod.Integer enim. Donec sapien ante, accumsan ut,sodales commodo, auctor quis, lacus. Maecenas a elitlacinia urna posuere sodales. Curabitur pede pede,molestie id, blandit vitae, varius ac, purus. Mauris atipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel,lorem. Sed lacinia. Suspendisse potenti. Sed ultrucies cursus lectus. In id magna sit amet nibhsuspicit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctorquis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id,blandit vitae, varius ac, purus.
"Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodaleseget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementumpurus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin alorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus.Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a,nulla..
"Phasellus placerat purus vel mi. In hac habitasse platea dictumst. Donec aliquam porta odio. Ut facilisis. Donec ornareipsum ut massa. In tellus tellus, imperdiet ac, accumsan at, aliquam vitae, velit..
08° A vous de faire de même.
Un peu de vocabulaire :
Regardons la structure de notre div :
<div class="mon_premier_type" >
<p>"Lorem ... laborum.</p>
<p>"At ipsum v... varius ac, purus.</p>
<p>"Morbi ... a,nulla..</p>
<p>"Phasellus ...velit..</p>
</div>
On dit que la balise div est le PARENT des balises p : les balises p sont contenues dans la balise div.
De la même façon, on dit que les balises p sont les balises ENFANTS (CHILD en anglais) de la balise div.
C'est bien beau tout ça mais la balise div est de type block. Cela veut dire qu'à chaque fois qu'on l'utilise on passe à la ligne.
On ne peut donc pas les utiliser pour modifier un bout de texte dans un paragraphe uniquement.
Pour cela, il y a la balise <span> et </span>.
Un petit exemple pour la forme. Si dans le HTML on tape
<p>Lorem ipsum dolor <span class="mon_premier_type">sit amet, consectetur adipiscing</span> elit, sed do eiusmod</p>
Cela donne normalement :
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Ces balises couplées aux classes permettent de faire beaucoup de choses
09° On voudrait avoir les trois premiers mots et les trois derniers mots d'un paragraphe en vert. Il faudra utiliser une classe et deux spans.
...CORRECTION...
Dans HTML :
<p><span class="trois_mots">Lorem ipsum dolor</span> sit amet, consectetur adipiscing elit, <span class="trois_mots">sed do eiusmod</span></p>
Dans CSS :
.trois_mots
{
color:green;
}
Vous voyez, on commence à pouvoir définir ce qu'on veut, où on veut. Mais cela demande parfois de rajouter beaucoup de class="..." dans un code HTML qui n'en contenait pas à la base car on ne pensait pas aller aussi loin. Rajouter toutes ces classes peut être assez rédhibitoire.
Nous allons voir ici que nous pouvons définir de façon plus ou moins précise ce qu'on veut faire sans passer par les classes, pourvu que les modifications soient systématiques en terme de logique de présentation.
On peut par exemple vouloir un type de paragraphe pour footer, un autre type de paragraphe pour section et encore un autre pour nav.
On pourrait donc créer trois classes. Par exemple :
class="p_footer"class="p_section" et class="p_nav").Oui. Mais cela veut dire rajouter ces codes de class à TOUS les paragraphes des différentes classes, sans en oublier un ou se tromper dans le code de la classe. Ca semble un peu lourd comme solution !
Une solution plus harmonieuse est offerte par le CSS
Dans le CSS :
footer p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans footer.nav p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans nav.section p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans section.Conclusion : Si on veut modifier les propriétés d'un type de balise 2 contenue dans une première balise 1, il suffit dans le CSS de séparer les deux balises par un espace dans l'en-tête de la déclaration.
Exemple : on veut des paragraphes en blanc sur fond noir dans header, en noir sur fond silver dans section et en vert sur fond jaune dans nav :
Attention, le code ci-dessous ne correspond pas volontairement au paragraphe juste au dessus.
header p
{
background-color: black;
color : white;
}
section p
{
background-color: white;
color : black;
}
nav p
{
background-color: yellow;
color : green;
}
10° Reprenez l'exemple générique de la page donnée plusieurs fois et appliquez les modifications donnés ci-dessus aux paragraphes.
11° On voudrait que les balises mark dans footer ne soient pas sur fond jaune (c'est déjà le cas des paragraphes) mais en rouge. Créer le code correspondant en utilisant un code comportant footer et mark séparés par un espace.
...CORRECTION...
footer mark
{
background-color: red;
}
Voilà, vous devriez avoir compris. C'est même assez puissant car normalement votre balise mark n'était pas directement dans footer mais dans une balise paragraphe de footer. Ainsi footer p mark ne modifie que les mark situés dans un paragraphe de footer alors que footer mark modifie tous les mark, même ceux situés dans un titre h1 par exemple. Vous voyez la nuance ?
Et si on ne veut modifiez uniquement le premier paragraphe situé sous un titre ?
Facile : h1 + p {... code CSS ...} va modifier l'affichage uniquement du premier paragraphe qui suit une balise h1. Pas les suivantes.
Nous avons vu les balises ayant un lien mère-fille (PARENT et CHILD). Ce lien concerne donc une relation de contenu / contenant.
On parle également de balises frères lorsque deux balises se suivent :
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
Attention : la balise p sous le premier h1 n'a pas de relation frère puisque la balise br est entre les deux.
Le paragraphe sous le titre h6 est bien le frère de h6.
Le premier li sous ul n'est pas frère mais l'enfant de ul.
12° Modifier le CSS pour que les premiers paragraphes sous un titre (de h1 à h3) soient en gras, couleur de texte blanche sur fond noir.
...CORRECTION...
h1+p
{
background-color: black;
color: white;
font-weight: bold;
}
h2+p
{
background-color: black;
color: white;
font-weight: bold;
}
h3+p
{
background-color: black;
color: white;
font-weight: bold;
}
13° Rajouter une balise <br /> entre l'un des titres et son premier paragraphe. Que constatez-vous ? Est-il vraiment malin de placer des balises br ?
...CORRECTION...
Lorsqu'on place la balise <br />, le CSS ne parvient plus à agir sur la balise p qui suit pourtant le titre à l'écran.
Il va donc falloir utiliser le CSS plutôt que les balises br pour espacer le premier paragrahe du titre. Nous verrons cela plus loin.
14° Tenter de mettre en fond rouge la première ligne des listes ul. Expliquer pourquoi cela fonctionne, ou pas...
...CORRECTION...
ul+li
{
background-color: red;
}
Ceci ne peut pas fonctionner car la balise li est une balise enfant de la balise ul et pas une balise frère.
Bon, comment faire alors ? Et bien, il faut parvenir à expliquer au CSS qu'on veut cibler le premier enfant d'une balise conteneur :
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
Ici, la balise <ul> est le conteneur des trois balises <li>.
Si vous voulez cibler la première balise li contenue dans une balise <ul>, il faut utiliser :
ul li:first-child
{
background-color: red;
}
Si vous voulez cibler la dernière balise li contenue dans une balise <ul>, il faut utiliser :
ul li:last-child
{
background-color: yellow;
}
15° Utiliser ces dernières connaissances pour afficher clairement le premier et le dernier item des listes, qu'elles soient ol ou ul.
Résumons cette activité assez fournie en nouveautés :
La fois prochaine, nous rajouterons encore plein de choses à pouvoir modfifier via le CSS.