JOUR 3: TABLE STYLING WITH CSS3

voici un exemple qui illustre cooment donner du style a une table html
explication entre lignes 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;
                 }
                 a:visited{
                  text-decoration:underline;
                  color:red;
                 }


                 /* le style de la table commence ici*/
                 /* j'attribue a la table une largeur de 650px*/
                 /* ensuite je lui donne une bordure  fine de 1px et une couleur grise legere*/
               
                 table{
                    width:650px;
                   
                    border:1px solid #eee;

                 }
                 /* ici je cible seulement l'entete de la table (th= table header)*/
                 /* je lui donne une couleur de fond orange*/
                 /* ensuite le padding-top :definit une espace de 2px entre le text et le bord de l'element*/
                 /* enfin j'attribue a l'entete une hauteur de 50px .*/
               
                 table tr th{
                  background-color:orange;                
                  padding-top:5px;
                  height:50px;

                 }

                 /* ici le vertical-align:top signifie que le text commence en haut*/
                 /* par defaut il ya une espace de marge dans le th . on l'enleve pour un bon rendement*/
                 /* remarquez ici que le padding definit une espace entre le contenu de la colonne(td) et ses 4 bord*/
                 /*pour definir l'espace seulment a gauche utilisez padding-left , a droite padding-right,*/
                 /* au dessus padding-top et en bas padding-bottom*/
                 table tr td{
                  background-color:#eee;
                  vertical-align:top;
                  height:20px;
                  padding:2px;

                 }
                 /* ici je donne une action de changer de couleur lorsque la souri parcour une colonne (td)*/

                 table tr td:hover{
                  background-color:#ccc;
                 

                 }



              </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:#000;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>

              <h2>Program</h2>
             
              <table>
                   <tr>
                       <th>Day1</th><th>Day2</th><th>Day3</th><th>Day4</th>

                   </tr>
                   <tr>
                        <td>html intro</td><td>html text</td><td>html paragraph</td><td>html tables</td>
                   </tr>

                   <tr>
                      <td>css3 intro</td><td>css3 text</td><td>css3 paragraph</td><td>css3 tables</td>
                   </tr>
                 


              </table>


             



        </body>



</html>

jour 2 : suite

danc cette suite j'attribue un width au 3eme paragraph . ensuite je lui attribue une couleur de fond #eee qui est une variante du gris (#aaa = gris  jusque a  #fff= blanc).
<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;background-color:#eee;width:650px">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>

CSS3 : day 2. paragraph styling

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>