Introduction au CSS

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Quel symbole est utilisé pour cibler un élément avec un attribut id en CSS?

# (correct)

Quelle propriété CSS est spécifiée pour la classe .introduction?

color (correct)

border

background-color

font-size

Comment sélectionner tous les liens ayant un attribut title en CSS?

a.title()

a[title] (correct)

a#title

a.title

Quel symbole est utilisé pour cibler une classe en CSS?

. Signup and view all the answers

Quelle structure de code CSS est correcte pour définir la couleur d'un élément ID nommé 'para'?

#para { color: green; } Signup and view all the answers

Quelle est la méthode recommandée pour écrire du code CSS?

Dans un fichier.css Signup and view all the answers

Quelle option n'est pas une méthode pour incorporer du CSS dans un document HTML?

Dans un tableau Excel Signup and view all the answers

Pourquoi est-il déconseillé d'utiliser l'attribut style directement dans les balises HTML?

Parce que cela rend le code difficile à maintenir Signup and view all the answers

Quel site peut être consulté pour vérifier la compatibilité des propriétés CSS sur différents navigateurs?

<a href="https://caniuse.com/">https://caniuse.com/</a> Signup and view all the answers

Quel est le rôle de la balise head dans l'intégration du CSS dans un fichier HTML?

Elle inclut les métadonnées et les liens vers les fichiers CSS Signup and view all the answers

Quel sélecteur CSS est utilisé pour appliquer des styles à tous les paragraphes?

sélecteur d'élément Signup and view all the answers

Quelle syntaxe est correcte pour un sélecteur de classe?

.monClass { color: red; } Signup and view all the answers

Comment définir une couleur pour tous les paragraphes dans le code CSS?

p { color: blue; } Signup and view all the answers

Quelle propriété CSS permet de changer la couleur du texte?

color Signup and view all the answers

Quel type de sélecteur serait utilisé pour cibler tous les éléments avec une classe spécifique?

sélecteur de classe Signup and view all the answers

Quel est le bon format pour declarar une règle CSS pour un sélecteur d'élément?

element { property: value; } Signup and view all the answers

Comment doit-on noter une classe dans le code HTML?

les deux B et C Signup and view all the answers

Quel sélecteur serait utilisé pour cibler un unique élément ayant un ID spécifique?

#monId Signup and view all the answers

Quel est le rôle principal des règles @ dans CSS?

Importer des styles d'autres fichiers CSS Signup and view all the answers

Que permet de spécifier la règle @media dans CSS?

Des styles spécifiques pour les écrans de différentes tailles Signup and view all the answers

Quel est l'effet de la règle @page dans un fichier CSS?

Définir les marges et la taille pour l'impression Signup and view all the answers

Comment peut-on spécifier une nouvelle police dans CSS?

Avec la règle @font-face Signup and view all the answers

Dans quel cas utiliserait-on une requête de médias avec @media print?

Pour modifier le style lors de l'impression Signup and view all the answers

Quel est l'avantage principal des media queries?

Elles permettent d'adapter le design aux différents périphériques Signup and view all the answers

Quel est le sélecteur CSS correct pour cibler un élément
qui suit directement un élément
?

h3 + p { color: blue; } Signup and view all the answers

Que représente la syntaxe src dans la règle @font-face?

Le chemin vers la police à charger Signup and view all the answers

Parmi les unités mentionnées, laquelle est recommandée pour un affichage fluide qui s'ajuste à différentes tailles d'écran?

em Signup and view all the answers

Quelle propriété peut être définie avec la règle @page?

margin Signup and view all the answers

Quelle méthode ne permet pas de définir une couleur en CSS?

En utilisant une fonction hsl(Hue, Saturation, Lightness) Signup and view all the answers

Quelle propriété CSS s'appliquera aux éléments qui ont un attribut href?

color: blue; Signup and view all the answers

Quel est le sélecteur d'éléments adjacent correct pour appliquer un style à un élément
après
?

h2 + p { color: blue; } Signup and view all the answers

Quelle option représente un code hexadécimal valide en CSS?

#FF5733 Signup and view all the answers

Quel sélecteur CSS ciblerait tous les éléments avec un titre contenant 'ici'?

a[title*='ici'] Signup and view all the answers

Quelle déclaration CSS est correcte pour changer la couleur d'un élément en rouge en utilisant un mot-clé?

color: red; Signup and view all the answers

Quel est l'effet du code CSS suivant : `p { color: blue; }` ?

Le texte des paragraphes sera bleu. Signup and view all the answers

Où peut-on insérer du code CSS dans un fichier HTML ?

Dans l'en-tête du fichier HTML. Signup and view all the answers

Comment peut-on appliquer un style CSS directement à une balise ?

En ajoutant un attribut <code>style</code> à la balise. Signup and view all the answers

Quel fichier doit être créé pour contenir le code CSS mentionné ?

style.css Signup and view all the answers

Quel est le résultat de la couleur des paragraphes si le code CSS est correctement appliqué ?

Les paragraphes auront une couleur bleue. Signup and view all the answers

Quelle méthode n'est pas une façon d'intégrer du CSS à un fichier HTML ?

Inclusion de code CSS dans un script JavaScript. Signup and view all the answers

Si un fichier HTML et un fichier CSS sont dans des dossiers différents, quel sera l'impact ?

Le CSS ne sera pas appliqué au HTML. Signup and view all the answers

Quel élément est essentiel pour que le code CSS prenne effet dans un HTML ?

Une balise <link> pour relier le CSS. Signup and view all the answers

Study Notes

Introduction

CSS (Cascading Style Sheets) est un langage qui sert à gérer la mise en forme d'une page HTML.
Avant 1996, la mise en forme était gérée via HTML.
CSS permet de définir la couleur, la police, la taille du texte, les bordures, le fond et la structure du site.

Plan

Introduction : Présentation générale du CSS
Premier exemple CSS : Utilisation de fichiers .CSS, dans l'en-tête <head> du fichier HTML et directement dans les balises.
Le code CSS : Structure d'un code CSS, les sélecteurs en CSS, les unités et les couleurs, les propriétés CSS.
Pseudo-classes, pseudo-éléments, règles @ et média queries : Utilisation de pseudo-classes et pseudo-éléments, et les règles @ et les média queries.
Bibliographie & Webographie : Liste des sources utilisées.

Premier exemple CSS

Le code CSS peut être écrit dans un fichier .css, dans l'en-tête <head> du fichier HTML ou directement dans les balises du fichier HTML via un attribut style.

Fichier .css

Ajouter la ligne <link rel="stylesheet" href="style.css"> sous la balise <head> d'un fichier HTML.
Ajouter la ligne Bonjour et bienvenue sur mon site ! à la balise <body> du même fichier HTML.
Créer un nouveau fichier style.css et y ajouter le code suivant p { color: blue; }.
Placer les fichiers HTML et CSS dans le même dossier et ouvrir le fichier HTML dans un navigateur web.

Dans l'en-tête `<head>` du fichier HTML

Pour utiliser du CSS dans un fichier HTML, insérer le code CSS dans la balise <style> à l'intérieur de l'en-tête <head>.
Exemple: <meta charset="utf-8" /><style> p {color: blue;}</style>

Directement dans les balises

Ajouter l'attribut style à n'importe quelle balise et insérer le code CSS directement dans cet attribut.
Exemple: Bonjour et bienvenue sur mon site !

Structure d'un code CSS

Un code CSS est structuré en sélecteurs et en propriétés.
Les sélecteurs ciblent les éléments HTML.
Les propriétés déterminent l'apparence des éléments.
Les commentaires CSS commencent par /* et se terminent par */.

Les sélecteurs en CSS

Les sélecteurs en CSS permettent de cibler des éléments HTML pour appliquer des propriétés spécifiques.
Types de sélecteurs : élément, classe, identifiant, attribut, éléments adjacents, éléments frères.

Les unités

Les unités les plus utilisées en CSS : px, %, em.

Les couleurs

Les couleurs en CSS peuvent être définies par leur nom (ex: green), code hexadécimal (ex: #F4C5A8) ou valeurs RGB (ex: rgb(45, 78, 255)).

Les propriétés css

Les propriétés CSS déterminent l'aspect et le comportement des éléments HTML.
- Propriétés liées au texte (couleur, police, taille, graisse, alignement, etc.)
- Propriétés liées au fond (couleur, image, répétition, position)
- Propriétés liées aux bordures (couleur, style, largeur, arrondi).
- Propriétés liées aux ombrages et transparence (ombre du texte, ombre de la boite, opacité).
- Propriétés liées à la position et à la taille (position de l'élément, alignement vertical, taille de l'élément, etc.)
- Propriétés liées aux listes (style, type de puce, image de puce)

Règles @

Les règles @ sont des instructions plus avancées pour moduler le comportement des feuilles de styles.
- @import : importer une autre feuille de style.
- @charset : déclarer l'encodage des caractères.
- @page: pour les règles générales des pages.
- @font-face : importer une police de caractère.
- @media : pour les requêtes de média (adaptations aux différents supports).

Media queries

Les media queries permettent d'adapter le design et la présentation d'une page web aux différents types de périphériques de consultation.
Exemple : adaptation d'un design pour différents écrans avec des résolutions en largeur.

Pseudo-classes et pseudo-éléments

Les pseudo-classes et pseudo-éléments permettent d'affiner les capacités des sélecteurs (exemple : lien visité, lien survolé, élément le plus près, dernier enfant, etc).

Bibliographie & Webographie

Liste des ressources utilisées pour la création des notes.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Découvrez les bases du CSS, le langage essentiel pour la mise en forme des pages HTML. Ce quiz couvre les premières étapes, les sélecteurs, ainsi que les média queries. Apprenez à utiliser CSS pour améliorer l'apparence de votre site web.