04 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.

• Créer un fichier style.css
• Intégrer le fichier style.css dans l'entête du fichier index.html

Rappel:

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

nb: un commentaire en CSS

/* COMMENTAIRE */

Premier exemple CSS

p{
    color: red;
}

• Quel est le type de sélecteur CSS utilisé ?
• Quels éléments sont ciblés par ce sélecteur ?
• Quelle est la mise en forme appliquée par ce code CSS ?
• Pourquoi est-ce une mauvaise idée d'utiliser les noms des couleurs ?

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;
}

• Quelle est la mise en forme appliquée par ce code CSS ?

p{
   background-color: #2980b9;
   border: 1px solid #8e44ad;
}

• Quelle est la mise en forme appliquée par ce code CSS ?

p{
   background-color: #2980b9;
   border: 1px solid #8e44ad;
   padding: 12px;
}

• Que constatez vous ?
• Comment se comporte la propriété padding ?

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

• Que constatez vous ?
• Comment se comporte la propriété margin ?

Sélecteurs CSS

Sélecteur universel

*{
    font-size: 14px;
}

• Quels sont les éléments ciblés par ce sélecteur ?
• Quelle est son utilité ?

Sélecteur d'élèment

h1{
    color: red;
    background-color: orange;
    font-size: 3.4em;
}
a{
    color: green;
    text-decoration: none;
}

• Quels sont les éléments ciblés par ces sélecteurs ?
• Que signifie em ? Quelle est son utilité ?

Sélecteur de pseudo-classe

a:hover{
    color: red;
    text-decoration: underline;
}

• Quels éléments et à quel moment sont-ils ciblés ?
• Quelle est l'utilité de la propriété text-decoration ?

Sélecteur d'ID

Exemple HTML:

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

Exemple CSS:

#main-title{
    color: blue;
}

• Quelle est l'utilité des ID HTML ?
• Quel élément est ciblé par ce sélecteur ?

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;
}

• Quelle est l'utilité des classes CSS ?
• Quels sont les éléments ciblés par chacun de ces sélecteurs ?

Sélecteur descendant

ul.menu{
    text-align: center;
    list-style: none outside none;
}
ul.menu li{
    display: inline-block;
}
ul.menu li a{
}

• Quelle est l'utilité de ces sélecteurs ?
• Quels éléments sont ciblés par celui-ci ?
• Quelle est l'utilité de la propriété list-style ? De la propriété display ? Et text-align ?

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%;
}

• Quel est l'intérêt de la propriété float ?
• Ajouter une couleur de fond aux colonnes col-70 et col-30
• Que constatez-vous ?
• Quel est le souci lié au footer ?

Ajoutez le code suivant dans votre css:

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

• Quelle est l'utilité du sélecteur :after
• Quelle est l'utilité de ce code css ?