CSS Définition

  • Element Carré
  • Element Triangle
  • Element Triangle
  • Element Carré

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`.

Qu'est-ce que le CSS ? Langage de style pour décrire la présentation d'un document HTML ou XML
But Contrôler l'apparence des éléments HTML sur une page web
Utilité Création de pages web plus riches et interactives

CSS signifie "Cascading Style Sheets". C’est un langage informatique utilisé pour décrire la présentation visuelle des pages web, incluant la mise en forme des éléments HTML comme les couleurs, les polices de caractères, les tailles et positions des éléments, et bien plus encore.

CSS est important car il permet de séparer la présentation visuelle du contenu structurel de la page web, ce qui facilite grandement la maintenance et la mise à jour des sites web. Il permet également de créer des designs et des mises en page plus complexes et sophistiquées, avec un code plus simple et plus léger.

Il existe plusieurs façons d’utiliser CSS sur une page web, mais la méthode la plus courante est d’inclure une référence à un fichier CSS externe dans l’en-tête HTML de la page. Cette référence spécifie le chemin vers le fichier CSS, qui contient les règles de mise en forme pour les éléments HTML de la page. Les règles CSS peuvent également être intégrées directement dans la balise HTML elle-même, ou même être définies dans un bloc de style dans la balise <head> de la page.

  • Elément Rond et petite tache
  • Elément Triangle blanc et violet rose
  • Elément Rond violet et blanc
  • Elément Triangle blanc et violet rose
  • Elément Rond blanc et un autre violet
  • Elément Triangle blanc et violet rose

Ne remettez pas à plus tard votre projet, faites-le devenir réalité dès aujourd'hui !