Initiation intégration CSS

Comment inclure un fichier CSS dans une page HTML

Étape 1 : Préparation de l’environnement

Dans un nouveau dossier nommé « CSS » ou « Initiation CSS + HTML »

Créer un fichier HTML :
- Nommez-le par exemple index.html
- Ce fichier contiendra la structure de votre page web.
Créer un fichier CSS :
- Nommez-le par exemple style.css
- Ce fichier contiendra les règles de style pour personnaliser l’apparence de votre page.

Étape 2 : Comprendre les différents moyens d’intégrer le CSS

(Dans cette partie, il faut juste lire & comprendre)

Il existe trois manières principales pour inclure du CSS dans une page HTML :

CSS en ligne : Le style est définis directement dans la balises HTML. Il s’applique donc uniquement à cette balise. Donc ici notre titre sera de couleur bleu, uniquement ce titre là.

HTML

<h1 style="color: blue;">Titre principal</h1>

<h1 style="color: blue;">Titre principal</h1>

CSS dans une balise <style> : Tout le CSS est inclus dans l’en-tête du fichier HTML, entre les balises <style>. Le CSS peut donc s’appliquer à tout le fichier.

HTML

<style>
    h1 {
        color: blue;
    }
</style>

<style>
    h1 {
        color: blue;
    }
</style>

Dans l’exemple ci-dessus, toute les balises html <h1></h1> de mon fichier, seront de couleur bleu.

CSS externe, lien entre styles.css et index.html : Le CSS est écrit dans un fichier séparé, puis relié au fichier HTML via une balise <link>.

HTML

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="style.css">

Étape 3 : Lier un fichier CSS externe à une page HTML

(Maintenant c’est à vous de faire)

Recopier ce code dans le fichier index.html
Placez la balise <link> dans la section <head> de votre fichier index.html comme suit :

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Exemple</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Titre principal</h1>
    <p>Bienvenue sur ma page web.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Exemple</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Titre principal</h1>
    <p>Bienvenue sur ma page web.</p>
</body>
</html>

Configurer le fichier style.css
Dans le fichier style.css, ajoutez les règles suivantes :

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

Sauvegarder les fichiers
Assurez-vous que les deux fichiers (HTML et CSS) sont dans le même dossier, ou adaptez le chemin dans href si le fichier CSS est dans un sous-dossier (ex. css/style.css).

Étape 4 : Tester dans un navigateur

Ouvrez le fichier index.html dans un navigateur web (Google Chrome, Firefox, etc.).

Le fichier style.css ne s’ouvre pas, c’est normal !!!

Étape 5 : Inclure une ressource dans une autre

Ajouter une image dans la page HTML :
Ajoutez une balise <img> pour insérer une image dans votre page web (faite attention décrire le code au bon endroit) :

HTML

<img src="image.jpg" alt="Description de l'image" width="300">

<img src="image.jpg" alt="Description de l'image" width="300">

Styliser l’image avec le CSS :
Dans le fichier style.css, ajoutez :

CSS

img {
    border: 2px solid black;
    border-radius: 10px;
    display: block;
    margin: 20px auto;
}

img {
    border: 2px solid black;
    border-radius: 10px;
    display: block;
    margin: 20px auto;
}

Cette règle ajoute une bordure, arrondit les coins et centre l’image.
Tester la relation entre les fichiers :
- Modifiez les styles dans style.css et rechargez le navigateur.
- Observez les changements appliqués au fichier HTML.

Conclusion

Vous avez appris à :

Créer un lien fonctionnel entre un fichier HTML et CSS.

Ressource pdf complémentaire :

Css Télécharger

Comment inclure un fichier CSS dans une page HTML

Étape 1 : Préparation de l’environnement

Étape 2 : Comprendre les différents moyens d’intégrer le CSS

Étape 3 : Lier un fichier CSS externe à une page HTML

Étape 4 : Tester dans un navigateur

Étape 5 : Inclure une ressource dans une autre

Conclusion

Un site créé par Mr LOPEZ

Nos cours