DY

DelahayeYourself

modules / UE3.4 /

TP03: Un peu de style

Nous avons découvert comment créer le fonds de nos documents, il est donc temps de les mettre en forme.

Entrainement

Un petit jeu pour commencer ? CSS Diner Uniquement jusqu'au niveau 14.

Reprenez l'exemple de règle du TP2 et attachez le à une nouvelle feuille de style.

Sans toucher au code HTML, ajoutez à votre feuille de style les règles qui permettront d'obtenir le résultat ci-dessous.

Premier contact

En reprenant le fichier du TP1 mettons en forme notre page d'actualités.

Rappel:

<link rel="stylesheet" type="text/css" href="style.css" />

nb: un commentaire en CSS

/* COMMENTAIRE */

Premier exemple CSS

p{
    color: red;
}

Découvrons désormais les propriétés margin/padding et border

N.B: Pensez à ajouter les codes au fur et à mesure dans votre fichier css. Si le même sélecteur CSS revient plusieurs fois dans l'énoncé c'est qu'il s'agit d'une maj de notre style pour ledit sélecteur et non pas d'un ajout dans le fichier.

Pour cette exemple pensez à avoir au moins deux paragraphes (p) dans votre fichier html.

html, body{
   background-color: #95a5a6;
}
p{
   background-color: #2980b9;
   border: 1px solid #8e44ad;
}
p{
   background-color: #2980b9;
   border: 1px solid #8e44ad;
   padding: 12px;
}
p{
   background-color: #2980b9;
   border: 1px solid #8e44ad;
   padding: 12px;
   margin: 20px;
}

Sélecteurs CSS

Sélecteur universel
*{
    font-size: 14px;
}
Sélecteur d'élèment
h1{
    color: red;
    background-color: orange;
    font-size: 3.4em;
}
a{
    color: green;
    text-decoration: none;
}
Sélecteur de pseudo-classe
a:hover{
    color: red;
    text-decoration: underline;
}
Sélecteur d'ID

Exemple HTML:

<h1 id="main-title">HELLO WORLD</h1>

Exemple CSS:

#main-title{
    color: blue;
}
Sélecteur de classe

Exemple HTML:

<p class="color-red">HELLO WORLD</p>
<p class="color-red font-weight">HELLO WORLD!</p>
.font-bold{
    font-weight: bold;
}
.color-red{
    color: red;
}
Sélecteur descendant
ul.menu{
    text-align: center;
    list-style: none outside none;
}
ul.menu li{
    display: inline-block;
}
ul.menu li a{
}

Les flottants

Dans votre fichier HTML complétez afin d'obtenir ceci:

<main>
    <div class="container">
        <div class="col-70">
            <div>..</div>
       </div>
       <div class="col-30">
            <div>..</div>
       </div>
    </div>
</main>

Puis dans style.css:

.container{
}
.col{
    float: left;
}
.col-70{
    width: 70%;
}
.col-30{
    width: 30%;
}

Ajoutez le code suivant dans votre css:

.container:after{
    clear: both;
    display: block;
    content: "";
}