Vous avez besoin d'un site web pour votre activité mais vous êtes nul en programmation ... MyWebsite est fait pour vous.

* Offre 1&1 MyWebsite « 1 mois d’essai gratuit » : pendant le mois d’essai gratuit, résiliation possible à tout moment, sans frais.

* Cette publicité ne s'affiche qu'une fois par jour et s'ouvre dans une nouvelle fenêtre.

Vous êtes ici : Accueil >> CSS >> Base pour créer un site en CSS >> Feuille de style externe

Feuille de style externe






Comme nous l'avons vue dans les précédents tuto, les éléments du style sont incluent directement dans la page elle même ( comme dans le code ci-dessous ) . Nous allons donc dissocier le " style " du reste de la page pour le mettre dans un fichier externe.

<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>Effets sur les liens</title>
<style type="text/css">
.cadredumenugauche a:link {color: red ; text-decoration: underline overline ;}
.cadredumenugauche a:hover {border: 1px solid #000000; color: #00FBFF}
a:link {color: #000000 ; text-decoration: underline ;}
a:visited {color: #FF6699 ; } a:hover { color: red ; text-decoration: underline 
overline ; }
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
.cadredumenugauche {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#FBFBFF;
border:1px solid #000000; /* cadre menu */
color:#666666;
}
.cadredumenudroite {
float:right;
text-align:left;
width:150px;
padding:10px;
background-color:#FBFBFF;
border:1px solid #000000; /* cadre menu */
color:#666666;
}
#cadrehaut {
height:100px;
background-color:#FFCCCC;
margin-bottom:10px;
}
#cadrecentrale { margin-left:180px;
min-height:150px;
margin-right:180px;
border-left:1px dashed #000000; /* couleur du cadre */
border-right:1px dashed #000000;
border-bottom:1px dashed #000000;
border-top:1px dashed #000000;
background-color:#00FBFF;
}
  </style>
</head>
 
<body>
<div id="moncadre">
<div id="cadrehaut"></div>
<div class="cadredumenugauche"><a href="index.php">mon lien</a></div>
<div class="cadredumenudroite"></div>
<div id="cadrecentrale"></div>
</div>
</body>
</html>

1: Créer un nouveaux fichier que vous appellez style.css dans lequel vous recopier tout les éléments du style ( sans les balises <style> ) .
2: Supprimez ensuite le style ( au complet ) de votre fichier html ou php en incluent la balise <style type="text/css"> à  </style> et remplacer le par <link type="text/css" href="style.css" rel="stylesheet"> .

Vous voila donc avec ce code + un fichier de style externe :

<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>Effets sur les liens</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
 
<body>
<div id="moncadre">
<div id="cadrehaut"></div>
<div class="cadredumenugauche"><a href="index.php">mon lien</a></div>
<div class="cadredumenudroite"></div>
<div id="cadrecentrale"></div>
</div>
</body>
</html>

<link type="text/css" href="style.css" rel="stylesheet"> permet d'appeller le fichier de style externe nomé style.css . Votre code est ainsi plus lègé pour la navigation et vous permet d'intervenir que dans un seul fichier si vous avez besoins de modifier  l'apparence de votre site .

Catégorie CSS

Commentaire sur : Feuille de style externe
Signaler une erreurSignaler une erreur

Créer plusieurs effets de style sur les liens avec du cssCréer plusieurs effets de style sur les liens avec du cssBase pour créer un site en CSSBase pour créer un site en CSS Exemple d'une page créée avec du CSSExemple d'une page créée avec du CSS