CSS Définition

Le CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire la présentation d’un document HTML ou XML. Il permet aux développeurs de créer des pages web plus riches et plus interactives.

C’est un langage de style qui permet aux développeurs de contrôler l’apparence des éléments HTML sur une page web. Il permet de définir la couleur, la police, la taille et l’espacement des éléments. Le CSS peut également être utilisé pour créer des animations et des effets visuels.

Un langage de style relativement simple à apprendre. De nombreux outils en ligne et des livres permettent aux développeurs de se familiariser rapidement avec les concepts de base.

Le CSS est un langage important pour les développeurs web. Il leur permet de créer des pages web plus riches et plus interactives.

Comment apprendre le CSS ?

Il existe de nombreuses façons d’apprendre le CSS. Il y a des cours en ligne, des livres et des tutoriels disponibles sur le web. Certains éditeurs de code offrent également des fonctionnalités d’aide pour le CSS.

Les techniques de base du CSS

Il existe trois façons de définir les règles CSS à appliquer à un document HTML :

– En ligne, à l’aide de la balise `<style>`.
– Dans un fichier externe, à l’aide de la balise `<link>`.
– Avec les attributs `style` des éléments HTML.

## La balise `<style>`

La balise `<style>` permet de définir des règles CSS à appliquer à la page courante. C’est la méthode la plus couramment utilisée pour définir des feuilles de style.

Elle s’utilise de la façon suivante :

```html
<style>
/* Règles CSS */
</style>
```

## La balise `<link>`

La balise `<link>` permet de charger un fichier externe contenant des règles CSS.

Elle s’utilise de la façon suivante :

« `html
<link rel="stylesheet" href="monfichier.css">
« `

## Les attributs `style`

Les attributs `style` des éléments HTML permettent de définir des règles CSS directement dans les balises HTML. Cette méthode est la moins utilisée car elle n’est pas la plus lisible.

Les règles CSS s’écrivent directement dans l’attribut `style` :

« `html
<p style="color: blue;">Mon texte en bleu</p>
« `

## Sélecteurs

Les sélecteurs permettent de définir les éléments visés par les règles CSS.

Il existe plusieurs types de sélecteurs. Les plus courants sont :

– les sélecteurs d’éléments ;
– les sélecteurs d’attributs ;
– les sélecteurs d’enfants.

## Les sélecteurs d’éléments

Les sélecteurs d’éléments permettent de définir des règles CSS pour un type d’élément précis.

Pour définir un sélecteur d’éléments, on utilise la balise HTML correspondant :

« `css
h1 {
color: blue;
}
« `

## Les sélecteurs d’attributs

Les sélecteurs d’attributs permettent de définir des règles CSS pour un élément en fonction de la valeur d’un de ses attributs.

Pour définir un sélecteur d’attributs, on utilise les crochets `[]`. On peut sélectionner :

– l’attribut seul ;
– l’attribut avec une valeur précise ;
– l’attribut avec une valeur partielle.

## Les sélecteurs d’enfants

Les sélecteurs d’enfants permettent de définir des règles CSS pour un élément en fonction de la structure de la page.

Pour définir un sélecteur d’enfants, on utilise la barre oblique `>`. On peut sélectionner :

– le premier enfant ;
– le deuxième enfant ;
– le troisième enfant, etc.

## Les propriétés CSS

Les propriétés CSS permettent de définir le style des éléments visés par un sélecteur.

Les propriétés CSS les plus courantes sont :

1. la couleur ;
2. la taille ;
3. la police ;
4. la largeur ;
5. la hauteur ;
6. les marges ;
7. les padding ;
8. les bordures ;
9. le positionnement.

## La couleur

Pour définir la couleur d’un élément, on utilise la propriété `color`. Elle prend une chaîne de caractères en entrée.

Pour définir la couleur d’un élément, on utilise la propriété `color`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les couleurs :

– les couleurs nommées ;
– les couleurs RGB ;
– les couleurs HSL.

## La taille

Pour définir la taille d’un élément, on utilise la propriété `font-size`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les tailles :

– les tailles en pixels ;
– les tailles relatives ;
– les tailles absolues.

## La police

Pour définir la police d’un élément, on utilise la propriété `font-family`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les polices :

– les polices par défaut ;
– les polices web ;
– les polices système.

## La largeur et la hauteur

Pour définir la largeur et la hauteur d’un élément, on utilise respectivement les propriétés `width` et `height`. Elles prennent une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les largeurs et hauteurs :

– les valeurs en pixels ;
– les valeurs en pourcentage.

## Les marges

Pour définir les marges d’un élément, on utilise la propriété `margin`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les marges :

– les marges individuelles ;
– les marges abrégées.

## Les padding

Pour définir les padding d’un élément, on utilise la propriété `padding`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les padding :

– les padding individuels ;
– les padding abrégés.

## Les bordures

Pour définir les bordures d’un élément, on utilise la propriété `border`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons d’écrire les bordures :

– les bordures individuelles ;
– les bordures abrégées.

## Le positionnement

Pour définir le positionnement d’un élément, on utilise la propriété `position`. Elle prend une chaîne de caractères en entrée.

Il existe plusieurs façons de positionner les éléments :

– les éléments flottants ;
– les éléments en absolu ;
– les éléments en relatif.

## Les éléments flottants

Les éléments flottants permettent de positionner des éléments les uns à côté des autres.

Pour définir un élément flottant, on utilise la propriété `float`. Elle prend une chaîne de caractères en entrée.

Il existe deux valeurs courantes pour la propriété `float` : `left` et `right`.

## Les éléments en absolu

Les éléments en absolu permettent de positionner des éléments en fonction de la page.

Pour définir un élément en absolu, on utilise la propriété `position`. Elle prend une chaîne de caractères en entrée.

Il existe trois valeurs courantes pour la propriété `position` : `static`, `relative` et `absolute`.

## Les éléments en relatif

Les éléments en relatif permettent de positionner des éléments en fonction de leur position actuelle.

Pour définir un élément en relatif, on utilise la propriété `position`. Elle prend une chaîne de caractères en entrée.

Il existe trois valeurs courantes pour la propriété `position` : `static`, `relative` et `absolute`.