Comment intégrer du code CSS dans une page HTML ?
Bonjour, comment faire pour intégrer du code CSS dans une page HTML ou PHP ?
Voici un exemple simple pour intégrer du code CSS dans une page HTML dont voici le code initial :
<html>
<head>
<meta charset="utf-8">
<title>1FORMATIK.com</title>
<head>
<body>
<div>un exemple de texte</div>
</body>
</html>
Imaginons que vous vouliez appliquer du CSS à la balise <div> pour mettre le texte en gras.
Le code CSS pour mettre en gras est font-weight: bold;
Vous avez trois moyens d'intégrer ce code CSS à votre HTML et de l'appliquer à la balise <div> :
- Soit en insérant le code CSS directement dans la balise
<div>:
Exemple pour intégrer du code CSS directement dans la balise HTML :
<html>
<head>
<meta charset="utf-8">
<title>1FORMATIK.com</title>
<head>
<body>
<div style="font-weight: bold;">un exemple de texte</div>
</body>
</html>
- Soit avec la balise
<style>que vous devez placer directement dans le code HTML entre les balises<head>:
Exemple pour intégrer du code CSS avec la balise HTML <style> :
<html>
<head>
<meta charset="utf-8">
<title>1FORMATIK.com</title>
<style>
div {font-weight: bold;}
</style>
<head>
<body>
<div>un exemple de texte</div>
</body>
</html>
- Soit en externalisant votre code CSS dans un fichier style.css, dans ce cas vous devez déclarer le fichier style entre les balises
<head>.
Exemple pour intégrer du code CSS avec un fichier externe style.css :
<html>
<head>
<meta charset="utf-8">
<title>1FORMATIK.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<head>
<body>
<div>un exemple de texte</div>
</body>
</html>
Remarque : Privilégiez l'utilisation d'un fichier style.css lorsque vous avez beaucoup de code CSS à intégrer à vos pages HTML ou PHP.
Vous trouvez un tutoriel complet sur l'utilisation et l'intégration des feuilles de style sur https://developer.mozilla.org/fr/docs/Web/CSS.