`, je dois écrire `p` (sans les chevrons). 2. **La ou les propriétés CSS**: les effets de style sont listés via des propriétés. Par exemple, `color` permet d'indiquer la couleur du texte, `font-size` permet d'indiquer la taille du texte, etc. Il existe **BEAUCOUP** de propriétés CSS ! Mais rassurez-vous, vous n’avez pas besoin de les connaître toutes par cœur. 3. **…et leurs valeurs**: pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété `color`, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc. ```{image} ../media/structure_css.jpg ``` ```{admonition} Accolades sur le clavier Sur mac, vous utilisez: - les touches `option ⌥` + `(` pour faire l'accolade ouvrante; - et les touches `option ⌥` + `)` pour faire l'accolade fermante; ``` `````{admonition} Exercice 2 :class: note Modifiez le code CSS de l'exercice précédent (pizza) pour changer tous les titres principaux (`h1`) en rouge et tous les éléments de liste (`li`) en vert. ````{dropdown} Solution ```{code-block} css p { color: blue; } h1 { color: red; } li { color: green; } ``` ```` ````` ## Appliquer une propriété CSS à plusieurs balises HTML Et si je veux appliquer la couleur bleue aux paragraphes et aux titres ? Il suffit de donner la liste des balises qui seront affectées par ce changement de propriété (séparées par des `,`): ```{code-block} css p, h1 { color: blue; } ``` ```{image} ../media/css_bleu.png ``` ```{question} Faire dans la nuance D'accord maintenant TOUS les paragraphes du site sont bleus. Est-il quand même possible de changer la couleur de quelques paragraphes ? Si oui, comment d'après vous ? * {f}`Non, c'est impossible. Ils resteront bleus.` * {f}`Oui c'est possible, en ajoutant une autre couleur dans la propriété CSS.` * {v}`Oui c'est possible, en ajoutant un attribut aux paragraphes que l'on veut d'une autre couleur.` * {f}`Oui c'est possible, par magie ?` === Eh oui c'est possible ! Et heureusement ! Vous allez voir que les attributs `class` et `id` permettent d'appliquer des propriétés CSS de manière plus précise qu'en ciblant directement des balises. ``` ## Appliquer un style à une classe d'éléments Imaginez que vous voulez appliquer la couleur violette à certains éléments de votre page, indépendemment de leur type (titre, paragraphe, liens, etc). Pour ce faire, vous allez commencer par créer une classe CSS: ```{code-block} css .ma-classe { color: purple; } ``` Ce code définit une classe nommée `ma-classe` et demande à ce que tous les éléments qui en font partie soient écrits en violet (purple en anglais). Notez qu'il faut mettre un `.` avant le nom de la classe. Maintenant, il faut spécifier quels éléments HTML doivent faire partie de `ma-classe`. Cela se fait en spécifiant l'attribut `class` d'un élément HTML: ```{code-block} html
Ceci est un paragraphe qui fait partie de ma-classe
Ceci est un second paragraphe
``` ```{admonition} Testez par vous-même :class: note N'hésitez pas à tester ces exemples dans CodePen. ``` `````{admonition} Exercice 3 :class: note Modifiez le code CSS de l'exercice précédent (pizza) pour mettre les éléments de la liste d'ingrédients qui contiennent de la tomate (1er et 3ème) en rouge. Pour ce faire, créez une classe CSS et ajoutez les attributs HTML correspondants. ````{dropdown} Solution Voici le code CSS: ```{code-block} css p { color: blue; } h1 { color: red; } li { color: green; } .classe-rouge { color: red; } ``` Et voici la liste HTML modifiée: ```{code-block} htmlCeci est un paragraphe qui fait partie de ma-classe
Ceci est un second paragraphe avec un identifiant unique
``` On définit les propriétés de cet élément unique en commençant par un dièse `#`: ```{code-block} css .ma-classe { color: purple; } #mon-id { background-color: yellow; /* Cette propriété définit la couleur de fond */ } ``` ```{admonition} A retenir :class: note L'attribut `id` a la priorité sur tout le reste, mais il faut l'utiliser avec parcimonie car il crée plein d'éléments uniques rendant le code plus difficile à maintenir. ``` ## Les balises universelles `span` et `div` Tout ça c'est très bien mais comment appliquer un style à un mot particulier qui n'est pas entouré par une balise ? Par exemple, comment écrire en rouge `automatique` et `information` dans le paragraphe suivant: ```{code-block} htmlL'informatique est la science du traitement automatique de l'information !
``` Cela serait facile si ces deux mots étaient entourés par des balises... Eh bien on a inventé des balises qui ne servent à rien, exactement dans ce but ! Il s'agit de: - ` ` - et ``, `
L'informatique est la science du traitement automatique de l'information !
``` ```` ````` ```{admonition} Refaire la face de Mario Vous vous souvenez du Mario du début de chapitre ? Voici le lien pour voir comment ça a été fait (n'hésitez pas à essayer de modifier la couleur de sa moustache si vous vous en sentez capable !). ``` ## Exercice récapitulatif 5 ```{admonition} Exercice récapitulatif 5 :class: note Il est temps d'ajouter un peu de style à votre site de photographe ! Reprenez votre dossier `photographie` des exercices récapitulatifs précédents. Créez-y un fichier `style.css`, puis, dans chacun de vos fichiers `.html`, ajoutez le lien vers la feuille de style `style.css` comme expliqué au début de ce chapitre. Faites les améliorations suivantes: - Appliquez la couleur noire (black) à tous vos liens. - Appliquez une couleur et une couleur de fond à votre nom (titre principal de la page d'accueil). - Appliquez le style `color: #A5B4FC;` à 2 mots **séparés** de votre paragraphe auto-biographique. - Dans votre page galerie, appliquez une couleur de fond à un bloc regroupant toute vos photos. Déposez votre dossier compressé sur Moodle à l'endroit prévu. ```