HTML => Utiliser HTML avec CSS

Introduction

CSS fournit des styles aux éléments HTML sur la page. Le style en ligne implique l'utilisation de l'attribut de style dans les balises et est fortement déconseillé. Les feuilles de style internes utilisent la <style> et sont utilisées pour déclarer des règles pour les parties dirigées de la page. Les feuilles de style externes peuvent être utilisées via une <link> qui prend un fichier externe de CSS et applique les règles au document. Cette rubrique couvre l’utilisation des trois méthodes de pièce jointe.

Syntaxe

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

Utilisation de la feuille de style externe

Utilisez l'attribut de link dans la head du document:

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

Vous pouvez également utiliser des feuilles de style fournies par des sites Web via un réseau de diffusion de contenu, ou CDN. (par exemple, Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

En règle générale, vous pouvez trouver un support CDN pour un framework sur son site Web.

Feuille de style interne

Vous pouvez également inclure des éléments CSS en interne en utilisant la <style> :

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

Plusieurs feuilles de style internes peuvent également être incluses dans un programme.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Style en ligne

Vous pouvez styliser un élément spécifique en utilisant l'attribut de style :

<span style="color: red">This text will appear in red.</span>

Remarque: essayez d'éviter cela - le but du CSS est de séparer le contenu de la présentation.

Feuilles de style multiples

Il est possible de charger plusieurs feuilles de style:

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

Notez que les fichiers et déclarations ultérieurs remplaceront les fichiers précédents . Donc si general.css contient:

body {
    background-color: red;
}

et specific.css contient:

body { 
    background-color: blue;
}

si les deux sont utilisés, l'arrière-plan du document sera bleu.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

HTML
Utiliser HTML avec CSS

Recherche…