Hier on a vu comment faire du internal css. et comment donner a un text un style de fonte, une couleur...
aujourdhui on va etudier comment donner du style a tout un paragraph en faisant du inline css. couleur de fonte,style de fonte, verdana, helvetica essayez aussi sans-serif et courier. on verra aussi comment ajouter de l'epaisseur a un text dans un p tag . lui donner aussi la grosseur par le css attribute font-weight: bold
creez un documeent html :
<html>
<head>
<title>Text stylyng with css</title>
<style type="text/css">
body{
padding:100px;
font-family:helvetica;
}
h1{
color:purple;
}
span{
margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}
div{
width:200px;height:200px;
float:left;
border:1px solid #ccc;
margin:2px;
padding:2px;
}
div:hover{
background-color:#fafafa;
}
input[type=submit]{
background-color:orange;
color:white;
}
</style>
</head>
<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p style="color:indigo;font-family:verdana;">Bienvenu sur mon site web cher visiteur<br>
sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>
<p style="font-size:18px;font-weight:bold;">Bienvenu sur mon site web cher visiteur</p>
<p style="color:magenta;font-family:helvetica;">Bienvenu sur mon site web cher visiteur<br>
sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>
<div>
un contenu
</div>
<div>
une image
</div>
<div>
Login
<form>
Username:<input type="text" name="username" >
Password:<input type="text" name="password" >
<input type="submit" name="submit" value="login" >
</form>
</div>
</body>
</html>
Dans ce document on mixe de l' internal css et de l'inline css .
ReplyDeleteremarquez le premier p tag (premier paragraph) vous verez qu'il a une couleur en particulier pour tout le paragraph, sa fonte est le verdana. le deuxieme paragraph une a un font-size qui est l'epaisseur et un font weight qui est la grosseur.
le weight peut etre bol, italic,ou normal
le troisieme paragraphe a une fonte helvetica