CSSéducteur

Découvrez les bases de CSS pour contrôler l'apparence de vos pages web. Apprenez à ajouter du CSS à votre HTML, à utiliser des sélecteurs et des propriétés courantes, et à créer des mises en page simples.

Premiers Pas avec CSS

Bienvenue dans vos premiers pas pour apprendre CSS (Cascading Style Sheets) ! CSS est un outil puissant qui permet de contrôler l’apparence et la mise en page de vos pages web. Ce guide vous aidera à commencer avec les bases.

Qu’est-ce que CSS ?

CSS est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit en HTML ou XML. Il vous permet de séparer le contenu (HTML) de la présentation (CSS), rendant vos pages web plus flexibles et faciles à maintenir.

Ajouter du CSS à votre HTML

Il existe trois façons d’ajouter du CSS à vos documents HTML :

CSS en ligne : Utiliser l’attribut style directement dans les balises HTML.
```
<p style="color: blue;">Ceci est un paragraphe bleu.</p>
```

CSS interne : Utiliser la balise <style> dans la section <head> de votre document HTML.

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

CSS externe : Lier un fichier CSS externe à l’aide de la balise <link>.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Exemple de contenu dans styles.css :

p {
  color: green;
}

Le CSS externe est la méthode privilégiée pour les projets de grande envergure, car elle permet de garder vos styles organisés et réutilisables.

Syntaxe de Base du CSS

Une règle CSS est composée de sélecteurs et de déclarations :

Les sélecteurs définissent les éléments HTML auxquels le style s’applique.
Les déclarations contiennent une propriété et une valeur pour définir le style.

sélecteur {
  propriété: valeur;
}

Exemple

h1 {
  color: purple;
  font-size: 24px;
}

Cette règle CSS définit que le texte des éléments <h1> sera de couleur violette avec une taille de police de 24 pixels.

Propriétés CSS Courantes

Voici quelques propriétés CSS fréquemment utilisées :

Couleur : Définit la couleur du texte.
```
color: red;
```
Taille de la police : Définit la taille du texte.
```
font-size: 18px;
```
Couleur de fond : Change la couleur d’arrière-plan d’un élément.
```
background-color: lightblue;
```
Marge : Ajoute de l’espace à l’extérieur de la bordure d’un élément.
```
margin: 20px;
```
Remplissage (Padding) : Ajoute de l’espace à l’intérieur de la bordure d’un élément, autour de son contenu.
```
padding: 10px;
```
Bordure : Ajoute une bordure autour d’un élément.
```
border: 2px solid black;
```

Sélecteurs CSS

Les sélecteurs permettent de cibler les éléments HTML à styliser. Voici quelques sélecteurs clés :

Sélecteur universel : Cible tous les éléments d’une page.
```
* {
  margin: 0;
  padding: 0;
}
```
Sélecteur de type : Cible tous les éléments d’un type donné, comme <p>.
```
p {
  color: blue;
}
```

Sélecteur de classe : Cible tous les éléments avec une classe donnée.

.highlight {
  background-color: yellow;
}

HTML correspondant :

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

Sélecteur d’ID : Cible un élément spécifique avec un ID unique.
```
#header {
  font-size: 24px;
}
```
HTML correspondant :
```
<h1 id="header">Titre unique</h1>
```

Conclusion

Ces bases vous permettent de commencer à utiliser CSS pour styliser vos pages web. En continuant votre apprentissage, vous découvrirez de nombreuses autres propriétés et techniques pour créer des conceptions modernes, interactives et réactives. Bonne exploration !

Premier pas avec CSS

Premiers Pas avec CSS

Qu’est-ce que CSS ?

Ajouter du CSS à votre HTML

Syntaxe de Base du CSS

Exemple

Propriétés CSS Courantes

Sélecteurs CSS

Conclusion

Articles connexes

Introduction au CSS

Premier pas avec CSS

Premiers Pas avec CSS

Qu’est-ce que CSS ?

Ajouter du CSS à votre HTML

Syntaxe de Base du CSS

Exemple

Propriétés CSS Courantes

Sélecteurs CSS

Conclusion

Articles connexes

Introduction au CSS

Qu’est-ce que CSS ?