Les styles CSS dans HTML

de | 9 septembre 2018


CSS est un langage qui décrit le style d’un document HTML, CSS décrit comment les éléments HTML doivent être affichés.

Ce tutoriel vous apprendra les bases des feuilles de styles CSS .

Les styles HTML avec CSS

CSS signifie Cascading Style Sheets (feuilles de styles en cascades) .

CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur d’autres supports.

CSS économise beaucoup de travail. Il peut contrôler la disposition de plusieurs pages Web en une seule fois.

CSS peut être ajouté aux éléments HTML de 3 manières:

  • Intégré – en utilisant l’attribut style dans les éléments HTML
  • Interne – en utilisant un élément <style> dans la section <head>
  • Externe – en utilisant un fichier CSS externe

La manière la plus courante d’ajouter des CSS consiste à conserver les styles dans des fichiers CSS distincts. Cependant, nous utiliserons ici un style en ligne et interne, car cela est plus facile à démontrer et plus facile à essayer vous-même.

CSS Intégré

Le CSS intégré est utilisé pour appliquer un style unique à un seul élément HTML.

Le CSS intégré utilise l’attribut style d’un élément HTML.

Cet exemple définit la couleur bleu du texte de l’élément <h1> :

Exemple

<h1 style = « color: blue; »> Ceci est un titre bleu </ h1>

CSS interne

Le CSS interne est utilisé pour définir un style pour une seule page HTML.

Le CSS interne est défini dans la section <head> d’une page HTML, dans un élément <style>:

Exemple

<! DOCTYPE html>
<html>
<tête>
<style>
body {background-color: blueblue}
h1 {couleur: bleu;}
p {couleur: rouge;}
</ style>
</ head>
<body>

<h1> Ceci est un titre </ h1>
<p> Ceci est un paragraphe. </ p>

</ body>
</ html>

CSS externe

Une feuille de style externe est utilisée pour définir le style de nombreuses pages HTML.

À lire aussi  Les styles dans HTML

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en changeant un fichier!

Pour utiliser une feuille de style externe, ajoutez-y un lien dans la section <head> de la page HTML:

Exemple

<! DOCTYPE html>
<html>
<tête>
<link rel = « stylesheet » href = « styles.css »>
</ head>
<body>

<h1> Ceci est un titre </ h1>
<p> Ceci est un paragraphe. </ p>

</ body>
</ html>

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucun code HTML et doit être enregistré avec une extension .css.

Voici à quoi ressemble la page « styles.css »:

corps {
background-color: powderblue;
}
h1 {
Color blue;
}
p {
Color red;
}

CSS et les Fonts

La propriété color dans CSS définit la couleur du texte à utiliser.

La propriété font-family dans CSS définit la police à utiliser.

La propriété font-size dans CSS définit la taille du texte à utiliser.

Exemple

<! DOCTYPE html>
<html>
<head>
<style>
h1 {
Color bleue;
font-family: verdana;
font-size: 300%;
}
p {
color rouge;
font-family: courrier;
font-size: 160%;
}
</ style>
</ head>
<body>

<h1> Ceci est un titre </ h1>
<p> Ceci est un paragraphe. </ p>

</ body>
</ html>

CSS Border

La propriété de border dans CSS définit une bordure autour d’un élément HTML:

Exemple

p {
border: 1px powderblue solide;
}

CSS Padding

La propriété padding dans CSS définit un remplissage (espace) entre le texte et la bordure:

Exemple

p {
border: 1px powderblue solide;
padding: 30px;
}

La marge des éléments HTML (Margin)

La propriété de margin dans CSS définit une marge (espace) en dehors de la bordure:

Exemple

p {
border : 1px bleu de poudre solide;
margin : 50px;
}




Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *