CSS INTERNE
Le CSS interne, également connu sous le nom de CSS intégré, fait référence à l'inclusion des styles CSS directement dans le code HTML d'une page web. Cela se fait en utilisant la balise <style> dans l'en-tête <head> du document HTML. Par exemple :
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de CSS interne</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Titre de la page</h1>
<p>Ceci est un paragraphe avec des styles CSS internes.</p>
</body>
</html>
Dans cet exemple, les styles CSS sont définis à l'intérieur de la balise <style> dans la section <head>. Cela permet de définir des styles spécifiques à cette page HTML particulière. Bien que le CSS interne soit pratique pour de petites modifications de style, il peut devenir difficile à gérer pour des projets plus importants. Dans ces cas-là, il est généralement préférable d'utiliser des fichiers CSS externes pour une meilleure organisation et une maintenance facilitée.
CSS EXTERNE
Le CSS externe fait référence à l'utilisation d'un fichier CSS distinct pour définir les styles d'une page web. Plutôt que d'inclure les styles directement dans le fichier HTML, on crée un fichier CSS séparé contenant toutes les règles de style, puis on lie ce fichier CSS à la page HTML à l'aide de la balise <link> dans la section <head> du document HTML.
Voici un exemple de comment cela fonctionne :
Fichier HTML (index.html) :
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de CSS externe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre de la page</h1>
<p>Ceci est un paragraphe avec des styles CSS externes.</p>
</body>
</html>
Fichier CSS (styles.css) :
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
font-size: 16px;
}
Dans cet exemple, les styles CSS sont définis dans le fichier "styles.css", puis liés à la page HTML à l'aide de la balise <link> dans la section <head>. Cette approche permet de séparer le contenu HTML de la présentation CSS, ce qui facilite la maintenance et la mise à jour des styles sur l'ensemble du site web. De plus, cela permet de réutiliser les mêmes styles sur plusieurs pages HTML sans avoir à les réécrire à chaque fois.
Commentaires
Enregistrer un commentaire
Merci pour ton message 🙂
Connectez-vous pour laisser un commentaire