Apprendre le CSS
Un fichier CSS prêt à être modifié


Il est nettement plus facile de modifier un fichier CSS que d'en créer un de toutes pièces. je vous propose donc ici un fichier CSS qui n'est autre que le design bleu par défaut qui ornait votre site lors de sa création. Libre à vous de le copier et de le modifier pour en faire votre fichier CSS personnel .

Oui, je sais, ce fichier CSS est particulièrement long, mais ne vous laissez pas intimider .



body {
    margin: 0;
    padding: 0; 
    font-size: 12px; 
    font-family:verdana,arial, Helvetica, sans-serif;
    color: #000000;
    background-color:#F3F5F5;
    background-attachment:fixed;
    text-align : left;}
td {
    background: none;
    font-family:verdana,arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color:#000000;
    padding: 0px;
    text-align:left;}
a {
    color: #000000;
    text-decoration: none;}
a:hover {
    color: #000000;
    text-decoration: underline;}
a img {
    border: none;    }
.hidden{
    display:none;}
 
#page {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    width: 95%;
    border: 2px solid #79A6C1;
    text-align: left;
    background-color :#E1E9FF ;}
#header {
    padding: 0px;
    margin: 0px;
    height: 120px;
    width: 100%;
    background-color: #79A6C1;
    background-image:url(http://utiliweb.fr/defaut/entete.png);
    background-position:center; }
#header h1{
    text-align:center;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    font-size: 30px;
    color: #000000;}
#header h1 a, #header h1 a:hover{
    color: #000000;}
#header h2 {
    display : block;
    position : absolute;
    top : 110px;
    left:0px;
    padding: 0;
    margin: 0 auto;
    font-size: 12px;
    text-align: center;
    color: #000000;
    width: 100%;
    height:30px;
    overflow : hidden;}
#header h2 a {
    color: #000000;    }
#header h2 a:hover {
    color: #000000;
    text-decoration : underline;    }
.body1 {
    border-bottom : 2px #79A6C1 solid;
    background-color : #E1E9FF;
    padding : 0px;}
.news {
    border : 1px #79A6C1 solid;
    width : 96%;}
.titrenews {
    background-color:#82A9DB;
    text-align : center;
    font-weight : bold;
    font-size : 12px;
    color : #000000;
    height : 27px;
    background-image:url(http://utiliweb.fr/defaut/titre.png);
    border-bottom : 1px #79A6C1 solid;}
.corpsnews {
    background-color:#EEF0F0;
    text-align : justify;
    color : #000000;
    padding : 2px;}
.piednews {
    background-color:#EEF0F0;
    color : #000000;
    height : 20px;
    padding : 4px;
    vertical-align : bottom;}
.imagenews {
    max-width:120px;
    max-height:120px;
    float:left;
    padding: 4px;}
#menugauche {
    width: 130px;
    height : 100%;
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;
    vertical-align : top;
    background-color:#FFFFFF;
    border-right : 2px #79A6C1 solid;}
#menugauche .titre {
    background-image:url(http://utiliweb.fr/defaut/menu.png);
    padding: 4px;
    display : block;
    border-bottom : 2px #79A6C1 solid;
    border-top : 2px #79A6C1 solid;
    color : #000000;
    background-color: #82A9DB;
    font-weight : bold;
    text-align : center;}
#menudroite {
    width: 130px;
    height : 100%;
    font-size: 12px ;
    font-family:verdana,arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    border-left : 2px #79A6C1 solid;
    vertical-align : top;}
#menudroite .titre {
    background-image:url(http://utiliweb.fr/defaut/menu.png);
    background-color: #82A9DB;
    padding: 4px;
    display : block;
    border-bottom : 2px #79A6C1 solid;
    border-top : 2px #79A6C1 solid;
    color : #000000;
    font-weight : bold;
    text-align : center;}
#main {
    background-color:#E1E9FF;
    text-align : left;
    vertical-align : top;
    padding-top : 5px;
    padding-bottom : 5px;
    padding-left : 2px;
    padding-right : 2px;
    height : 100%;
    border-top : 2px #79A6C1 solid;}
#footer {
    padding: 0;
    margin: 0 auto;
    color: #000000;
    background-color : #FFFFFF;
    text-align: center;}
#footer p {
    margin: 0;
    padding: 10px 0;
    text-align: center;}
.button{
    font-size: 12px;
    text-align:center;}
.tbox.chatbox {
    width: 60%;
    margin-left: auto;
    margin-right: auto;}
.spacer {
    padding: 0px 0 0px 0;}
.indent{
    padding:4px;
    border: 1px solid #79A6C1;
    background-color: #EEF0F0;}
.spoiler{
    background-color: #EEF0F0;
    color : #000000;
    padding : 4px;
    border: 1px #79A6C1 solid;}
.spoiler input{color: #000000;}
.mediumtext {
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.tbox{
    background-color: #ffffff;
    border: #79A6C1 1px solid;
    color: #000000;
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.helpbox {
    border: 0px;
    background-color: transparent;
    color:#000000;
    font-size: 10px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.fborder {
    border: #79A6C1 1px solid;
    width: 99% !important;}
.forumheader{
    background-color: #E2E7F0;
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;
    color:#000000;
    font-weight : bold;
    padding:2px;
    border: 1px solid #79A6C1;}
.forumheader A {
    font-size: 12px;
    color:#000000;
    font-weight : bold;} 
.blocforum {
    border : 1px #79A6C1 solid;}
.fcaption {
    border-top : 1px #79A6C1 solid;
    border-bottom : 1px  #79A6C1 solid;
    background-color: #82A9DB;
    background-image:url(http://utiliweb.fr/defaut/titre.png);
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;
    color:#000000;
    font-weight:bold;
    padding: 2px;
    text-align: center;}
.fcaption a{
    padding-right:4px;
    color:#000000;}
.forumcolonne1 {
    background-color : #EEF0F0;
    border : 1px #79A6C1 solid;}
.forumcolonne2 {
    background-color:#FFFFFF;
    border : 1px #79A6C1 solid;
    text-align : left;
    padding : 2px;}
.forumcolonne3 {
    background-color: #EEF0F0;
    border : 1px #79A6C1 solid;
    padding : 2px;}
.forumcolonne4 {
    background-color:#FFFFFF;
    border : 1px #79A6C1 solid;}
.forumcolonne5 {
    background-color: #EEF0F0;
    border : 1px #79A6C1 solid;}
.forumcolonne6 {
    background-color:#FFFFFF;
    border : 1px #79A6C1 solid;}
    .foruminfo {
    background-color : #E2E7F0;
    border : 1px #79A6C1 solid;
    padding-top : 1px;
    padding-bottom : 1px;}
.casetype1 {
    background-color:#EEF0F0;
    border : 1px #79A6C1 solid;
    padding: 2px;}
.casetype2 {
    border : 1px #79A6C1 solid;
    background-color: #FFFFFF;
    padding: 2px;}
.casetype3 {
    background-color: #E2E7F0;
    font-size: 12px;
    padding:2px;
    border: 1px solid #79A6C1;}
.commentaire {
    border-bottom: #79A6C1 1px solid;
    width : 85%;}
 
 
/* END NAVIGATION */
 
 
/* Affichage d'un sujet du forum */
#colonneavatar {
    width : 126px;
    background-color : #EEF0F0;
    background-repeat:no-repeat;
    text-align : center;
    border-top : 1px #79A6C1 solid;
    border-left : 1px #79A6C1 solid;
    padding : 2px;
    vertical-align : top;
}
 
#corpsforum { 
    text-align : left; 
    background-color : #FFFFFF;
    color : #000000;
    border-left : 1px #79A6C1 solid;
    border-right : 1px #79A6C1 solid;
    border-top : 1px #79A6C1 solid;
    vertical-align : top;
}
 
#menumessage {
    background-color : #EEF0F0;
    border-bottom : 1px #79A6C1 solid;
    height : 24px;
    padding : 2px;
 
    
}
 
#corpsmessage {
    background : #FFFFFF;
    padding : 4px;
    }
 
#signature { 
    border-top : 1px #79A6C1 dashed;
    vertical-align : bottom;
    padding : 4px;
    background-color : #FFFFFF;
}
 
#reponserapide {
    background-color : #EEF0F0;
    border : 1px #79A6C1 solid;
}
 
.legende {
    text-align: center;
    width : 100%;
    border : 1px #79A6C1 solid;
    background-color : #EEF0F0;
    padding : 2px;
    margin-top : 5px;
}
 
.caselegende {
text-align : center;
}
 
.titre {
    font-size: 14px;
    text-align : center;
}
 
.smalltext {
font-size : 11px;
color : #000000 ;
}
 
.smallblacktext {
font-size : 11px;
color : #000000 ;
}
 
hr
{display : none}
 
#main .titre {
font-size : 18px; 
font-weight : bold;
color : #000000;
}
 
.cpage_title {
text-align : center;
font-weight : bold;
}
 
.tableaubb {
border: 1px #79A6C1 solid;
}
 
#GB_window {
border: 1px #79A6C1 solid;
}
 
.eclairs {    
background: #EEF0F0; 
border: 1px #000 solid}


Aller à la page   <<