Création numérique
Atelier Conception et publication Web

Séance 5 - CSS, ornements de blocs

Les couleurs en CSS

La mise en forme CSS

Pratique

Template HTML

<!DOCTYPE html>
<html>
<head>
  <title>Pratique CSS - Séance 5</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  </style>
</head>
<body>
  <h1>Mon blog</h1>
  <header>
    <ul class="menu">
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Les articles</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </header>
  <div class="content">
    <div class="article" id="article-1">
      <h2>Article 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
      <p class="suite"><a href="#">Lire la suite...</a></p>
    </div>
    <div class="article" id="article-2">
      <h2>Article 2</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p><p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex.</p>
      <p class="suite"><a href="#">Lire la suite...</a></p>
    </div>
    <div class="article" id="article-3">
      <h2>Article 3</h2>
      <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan.</p>
      <p class="suite"><a href="#">Lire la suite...</a></p>
    </div>
    <div class="article" id="article-4">
      <h2>Article 4</h2>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p><p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p><p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to.</p>
      <p class="suite"><a href="#">Lire la suite...</a></p>
    </div>
    <div class="article" id="article-5">
      <h2>Article 5</h2>
      <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz.</p><p>Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave.</p>
      <p class="suite"><a href="#">Lire la suite...</a></p>
    </div>
  </div>
  <footer><p>Copyright 2016 © Prénom Nom</p></footer>
</body>
</html>

Consignes

Écrivez dans la feuille de style interne le CSS nécessaire pour arriver au résultat ci-dessous :
consigne exercice d'intégration HTML/CSS séance 5

Aide

Pour aller plus loin

Ressources utilsées :