CSSéducteur

Apprenez les bases du CSS pour styliser vos pages web et créer des designs attrayants. Découvrez les sélecteurs, les propriétés courantes et les techniques responsives.

Introduction au CSS

Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour contrôler l’apparence et la mise en page des éléments HTML sur une page web. En apprenant le CSS, vous pouvez transformer un HTML simple en sites visuellement attrayants et interactifs.

Qu’est-ce que le CSS ?

Le CSS définit comment les éléments HTML doivent être affichés sur un écran, du papier ou d’autres médias. Il sépare le contenu (HTML) de la présentation (CSS), ce qui facilite la maintenance et le style des sites web.

Exemple de HTML et CSS

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exemple de CSS</title>
    <style>
      body {
        background-color: #f4f4f4;
        font-family: Arial, sans-serif;
        color: #333;
      }
      h1 {
        color: #007bff;
        text-align: center;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>Bienvenue au CSS</h1>
    <p>
      Ceci est un exemple simple d'utilisation du CSS pour styliser une page
      web.
    </p>
  </body>
</html>

Dans cet exemple :

La balise body est stylée avec un fond gris clair, une police personnalisée et une couleur de texte.
La balise h1 a une couleur bleue et un texte centré.
La balise p a une taille de police et un espacement entre les lignes ajustés.

Les Types de CSS

Il existe trois principales manières d’appliquer du CSS au HTML :

CSS Inline : Style appliqué directement sur un élément HTML avec l’attribut style.
```
<p style="color: red;">Ce texte est rouge.</p>
```
CSS Interne : Style écrit dans une balise <style> dans la section <head> du HTML.
```
<style>
  p {
    color: blue;
  }
</style>
```
CSS Externe : Style écrit dans un fichier .css séparé et lié au HTML avec la balise <link>.
```
<link rel="stylesheet" href="styles.css" />
```
styles.css :
```
p {
  color: green;
}
```

Sélecteurs CSS

Les sélecteurs définissent les éléments auxquels une règle CSS s’applique. Voici quelques sélecteurs courants :

Sélecteur de Type : Cible tous les éléments d’un type spécifique.
```
p {
  color: purple;
}
```

Sélecteur de Classe : Cible les éléments avec un attribut class spécifique.

.surligner {
  background-color: yellow;
}

<p class="surligner">Ce texte a un fond jaune.</p>

Sélecteur d’ID : Cible un seul élément avec un id unique.

#entete {
  font-size: 24px;
}

<h1 id="entete">Entête Unique</h1>

Sélecteur Universel : Cible tous les éléments.
```
* {
  margin: 0;
  padding: 0;
}
```
Sélecteur Groupé : Applique le même style à plusieurs éléments.
```
h1,
h2,
p {
  color: darkblue;
}
```

Propriétés CSS Courantes

1. Style du Texte

color : Change la couleur du texte.
font-size : Ajuste la taille du texte.
font-family : Spécifie la police à utiliser.

p {
  color: #555;
  font-size: 18px;
  font-family: "Helvetica", sans-serif;
}

2. Modèle de Boîte (Box Model)

Le modèle de boîte définit la structure des éléments, notamment :

Margin : Espace à l’extérieur de l’élément.
Border : Contour de l’élément.
Padding : Espace à l’intérieur de l’élément, autour du contenu.

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

3. Fond

background-color : Définit la couleur d’arrière-plan.
background-image : Ajoute une image d’arrière-plan.

body {
  background-color: #f0f0f0;
  background-image: url("fond.jpg");
}

4. Alignement

text-align : Aligne le texte horizontalement (left, center, right).
vertical-align : Aligne les éléments en ligne verticalement.

h1 {
  text-align: center;
}

Conception Responsive avec CSS

Le design responsive garantit que votre site est agréable à utiliser sur tous les appareils. Voici quelques techniques :

Mises en Page Flexibles : Utilisez des unités relatives comme les pourcentages ou em au lieu des unités fixes comme px.

Media Queries : Appliquez des styles en fonction de la taille de l’écran.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Flexbox : Simplifiez les mises en page avec Flexbox.

.container {
  display: flex;
  justify-content: space-around;
}

Conclusion

Le CSS est une technologie fondamentale pour créer des pages web belles et fonctionnelles. En maîtrisant les sélecteurs de base, les propriétés et les techniques responsives, vous pouvez donner vie à vos conceptions et offrir des expériences conviviales. Continuez à expérimenter et à développer vos compétences pour exploiter tout le potentiel du CSS !

Introduction au CSS

Introduction au CSS

Qu’est-ce que le CSS ?

Exemple de HTML et CSS

Les Types de CSS

Sélecteurs CSS

Propriétés CSS Courantes

1. Style du Texte

2. Modèle de Boîte (Box Model)

3. Fond

4. Alignement

Conception Responsive avec CSS

Conclusion

Articles connexes

Premier pas avec CSS

Développer avec Tailwind CSS