Le css comme son nom lindique est une feulle qui definit style destinee soit a une page web ou a tout un site web . il existe 3 facons d'ajouter du css a une page web : external css, internal css et inline css.
on va commencer par un example d'external stylesheet :
un external css est une feuille qui contient le stle d'une page et des element que contien la page.
pour que le style fasse effet il faut importer la feuille dans la page html comme suit:
etape 1- creez une page nomez la cssintro.html
<html>
<head>
<title>import du css sur une page web</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<a href="#1">Acceuil</a> <a href="#2">A propos</a> <a href="#3">Contacts</a> <a href="#4">Blog</a>
</div>
<div align="center">
<p>
<h1>
Bienvenue sur notre site web
</h1>
cette page web demontre l'import de css sur une page web<br>
cette page web demontre l'import de css sur une page web<br>
<img src="welcome.jpg">
</p>
</div>
</body>
</html>
etape 2 creez maintenant une page CSS appelez la style.css
body{
background-color:#ccc;
color:grey;
}
a:link{
color:white;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;
font-weight:bold;
font-size:18px;
}
a:active{
color:blue;
text-decoration:underline;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;
}
a:visited{
color:white;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;
}
a:hover{
color:black;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#fff;
border:2px solid #eee;
width:80px;
}
img{
padding:2px;
border:1px solid #fff;
}
*Comme vous pouvez le voir , dans l'entete il ya un lien qui lie notre html a la feuille css. le link tag se charge d'importer la feuille de style.
ReplyDelete*avec comme attribut rel : qui specifie que c'est une feuille de style.
ensuite l'attribut type specifie que c'est un document css.
*pour donner un style quelconque a un element on doit cibler l'element en question dans la feuille css.
*observer bien la feuille style.css ... vous remarqurez qu'on donne le nom de l'element ensuite entre les accolades on definit le style de l'element