Cascading Style Sheets / feuilles de style en cascade
Intégrez le lien d'une feuille de style CSS à une page html
Avant tout, créez une feuille de style.
Avec votre éditeur de texte, créez simplement un nouveau document, sans le remplir d'aucune autre indication. Et nommez le "style.css".
ATTENTION, il est important de créer un dossier "css" à la racine de votre site (comme pour le dossier "images") pour y sauvegarder cet élément.
Puis sur toutes les pages html de votre site, ajoutez ce lien dans l'entête
<HTML>
<HEAD>
<TITLE>08:30</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css">
</HEAD>
<BODY>
Le blabla habituel
</BODY>
</HTML>
Changer la couleur de fond de vos pages
body { background-color: #CCCCCC;}
Changer la couleur et le soulignement des liens (sur la feuille de Style.CSS)
a {color:#777777; text-decoration:none;}
Changer la couleur et le soulignement des liens en état survolé
a:hover {color:#C2C2C2; text-decoration:underline;}
Changer la couleur de fond de vos pages
body { background-color: #CCCCCC;}
Définir des blocs pour positioner vos textes et vos images
Au sein de votre feuille de style.css :
#logo{
position:absolute;
left:42px;
top:25px;
width:250px;
height:100px;
z-index: 1;
}
Au sein de votre page.html :
<html>
...
<body>
<div id="logo">
<a href="index.html">
<img src="images/logo.jpg" width="250" height="100" border="0">
</a>
</div>
<p>Vous pouvez créer autant de blocs que vous voulez. <br />
En les nommant comme vous voulez<br />
Et en les superposant avec "z-index=1;" =2, =3...=42...</p>
</body>
</html>
Mettez la police de caractère que vous voulez sur vos pages :
Puis pour mieux vous y retrouver, créez un nouveau dossier dans ce dossier css : "/font" ou "/police" : "/css/font"
Vous pouvez en télécharger un exemple ici
Au sein de votre feuille de style.css :
@font-face{
font-family: 'Whateverthenameofthefont';
src: url ('Whateverthenameofthefont.ttf') format('TrueType');
}
p {font-family: 'Whateverthenameofthefont';}
Modifiez l'apparence de vos textes et ajoutez la police de caractère que vous voulez sur vos pages :
Au sein de votre feuille de style.css :
.style1 {
font-family:"lucida grande", verdana, arial, sans-serif;
font-size:12px;
font-weight:bold;
font-style: italic;
text-align: center;
color:#B9B9B9;
}
Au sein de votre page.html :
<p class="style1">Vous pouvez nommer autant de style de texte que vous le voulez</p>
<
/body>
</html>
Creez un sous menu :
Modifiez l'apparence de vos textes et ajoutez la police de caractère que vous voulez sur vos pages :
Au sein de votre feuille de style.css :
.style1 {
font-family:"lucida grande", verdana, arial, sans-serif;
font-size:12px;
font-weight:bold;
font-style: italic;
text-align: center;
color:#B9B9B9;
}
Ajouter une image de fond d'écran
Au sein de votre feuille de style.css :
body {background-image:url(../images/mon_image_de_fond.jpg);}
On peut ensuite spécifier plusieurs paramètres :
body {
background-image:url(../images/mon_image_de_fond.jpg);
background-repeat: no-repeat; /* on peut remplace "no-repeat" par "repeat-y" ou par" repeat-x" */
background-attachement: fixed; /* remplacable par "scroll" */
background-position: top left /* ou simplement "top", "center", "bottom", "left", "right" sinon vous avez le choix parmis la trentaine de combinaison que ces positions peuvent combiner*/
}
Appliquer une transparence à une couleur de fond dans un bloc <DIV> :
Au sein de votre feuille de style.css :
#transparence {background: rgba(200, 54, 54, 0.5);}
Au sein de votre page.html :
<div id="transparence">Texte, images... </div>
Ajouter une ombre à vos textes :
Au sein de votre feuille de style.css :
.ombre{
color:#0DCEFF;
text-shadow: 2px 3px 4px #0DCEFF;}
Au sein de votre page.html :
<p class="ombre">Votre texte</p>
Creez une galerie photo :
Le rendu du site
Merci de compresser votre dossier et de me le faire parvenir via le site WeTransfert
à l'adresse nicolas@marouze.fr
Si, d'ici cette date, vous avez besoin d'aide pour la réalisation de votre site,
n'hésitez pas à me soliciter.