Jour 1: text styling

le css est vraiment important pour le design d'une page  . non pas pour just embellir la page mais  en meme temp attirer la curiositer du visiteur. le choix des text, couleurs,images est vital pour un site web.
un design simple et concis fait la difference.

ce poste comporte la deuxime facon d'incorporer du css sur un site ou une page web.
ce le internal css.







<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;
                 }
                 p{
                  color:maroon;
                  font-family:  ;
                 }
                 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>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>

CSS PROGRAM

jour 1.text formatting

jour 2.paragraph styling

jour 3.table styling

jour 4.division styling

jour 5.links and menu styling

CSS :cascading style sheet introduction

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;


}