CSS interne

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 7 sur 76.

Le CSS interne est une méthode d'ajout de styles CSS à un document HTML en les plaçant à l'intérieur d'une balise <style> dans la section <head> du document. Cette approche vous permet d'appliquer des styles à plusieurs éléments sur une seule page sans avoir besoin de feuilles de style externes. Le CSS interne est utile pour styliser un document unique ou effectuer des modifications de style rapides.

Voici la syntaxe de base pour utiliser le CSS interne :

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Dans cet exemple, la balise <style> contient des règles CSS qui définissent la couleur d'arrière-plan du body en bleu clair, la couleur du p (paragraphe) en bleu et la taille de la police à 16 pixels. Ces styles s'appliqueront à tous les éléments du document HTML.

Défi

Facile

On vous donne un document HTML. Utilisez du CSS interne pour styliser le document avec les propriétés suivantes :

Définissez la couleur d'arrière-plan du body sur lightgreen.
Définissez la couleur du texte de tous les titres h1 sur red.
Définissez la taille de la police de tous les paragraphes (p) sur 18px.

Un code CSS de départ vous est fourni.

Aide-mémoire

Le CSS interne est ajouté à l'intérieur d'une balise <style> dans la section <head> d'un document HTML :

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

Le CSS interne vous permet d'appliquer des styles à plusieurs éléments sur une seule page sans feuilles de style externes.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>