Modèle de style

les styles de titres

Titre 1

le H1 ou Titre 1 est toujours flottant à droite. Je déconseille d'en ajouter dans le contenu.

Titre 2

le H2 ou Titre 2 est surligné d'un cadre rouge (ou bleu si festival). Il correspond "aux titres des lignes"

Titre 3

Titre 4

Titre 5
Titre 6

Les listes

Les listes à puces

  • Proin dapibus semper malesuad
  • Proin dapibus semper malesuada
    • semper malesuada
      • semper malesuada
    • semper malesuada
  • Proin dapibus semper malesuada
  • Proin dapibus semper malesuada
  • Proin dapibus semper malesuada
  • Proin dapibus semper malesuada

Les listes ordonnées

  1. Proin dapibus semper malesuad
  2. Proin dapibus semper malesuada
  3. Proin dapibus semper malesuada
  4. Proin dapibus semper malesuada
  5. Proin dapibus semper malesuada
  6. Proin dapibus semper malesuada

Styles de texte, liens et hr

Mise en forme du texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat urna, tempor eu cursus dapibus, tempus ut purus. Aenean pulvinar faucibus nunc sed scelerisque.

Un lien

Ut in magna sit amet libero pharetra accumsan. Vestibulum facilisis auctor pellentesque. Vestibulum blandit accumsan urna eu aliquet.

Une ligne de séparation, ou hr




Un tableau

A 1 2 3
B      
C      
D      

Les styles CSS : les couleurs

classe : grey

Sed molestie mi vitae massa faucibus id sollicitudin turpis placerat. Aliquam sodales pulvinar ipsum, eget convallis sapien hendrerit vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur purus mi, fringilla non tempus et, fringilla vitae ligula. Integer non risus quis leo viverra vestibulum a a massa.

classe : red

Sed molestie mi vitae massa faucibus id sollicitudin turpis placerat. Aliquam sodales pulvinar ipsum, eget convallis sapien hendrerit vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur purus mi, fringilla non tempus et, fringilla vitae ligula. Integer non risus quis leo viverra vestibulum a a massa.

classe : color

Sed molestie mi vitae massa faucibus id sollicitudin turpis placerat. Aliquam sodales pulvinar ipsum, eget convallis sapien hendrerit vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur purus mi, fringilla non tempus et, fringilla vitae ligula. Integer non risus quis leo viverra vestibulum a a massa.

Les styles CSS : les fonds et marges

classe : bg-grey

Phasellus mollis, neque ac molestie feugiat, ligula metus tempus nunc, eget accumsan sem ante et nisl. Duis ac ante at urna tempor mattis. Aenean eu urna neque. Sed purus urna, vestibulum ut pharetra tempus, tristique at justo. Mauris accumsan elementum vestibulum.

Phasellus mollis, neque ac molestie feugiat, ligula metus tempus nunc, eget accumsan sem ante et nisl. 

empor mattis. Aenean eu urna neque. Sed purus urna, vestibulum u tempor mattis. Aenean eu urna neque. Sed purus urna, vestibulum u

classe : no-margin

Une classe très pratique qui réduit la marge inférieur du bloque sur laquelle elle est appliquée.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat urna, tempor eu cursus dapibus, tempus ut purus. Aenean pulvinar faucibus nunc sed scelerisque. Nunc iaculis molestie libero nec molestie. Vestibulum euismod imperdiet erat. Sed ultrices turpis at mauris tempus tempor. Ut in magna sit amet libero pharetra accumsan. Vestibulum facilisis auctor pellentesque. Vestibulum blandit accumsan urna eu aliquet.
 

Lorem ipsum dolor sit amet,pus ut purus. Aenean pulvinar faucibus nunc sed scelerisque. Nunc iaculis molestie libero nec molestie. Vestibulum euismod imperdiet erat. Sed ultrices turpis at mauris tempus tempor. Ut in magna sit amet libero pharetra accumsan. Vestibulum facilisis auctor pellentesque. Vestibulum blandit accumsan urna eu aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat urna, tempor eu cursus dapibus, tempus ut purus. Aenean pulvinar faucibus nunc sed scelerisque. Nunc iacmsan. Vestibulum facilisis auctor pellentesque. Vestibulum blandit accumsan urna eu aliquet.

Les styles CSS : les classes particulières

classe : introduction

Ajout d'une bordure inférieure

Aliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id. Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc.

Aliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id.

Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc. Phasellus ultrices, eros ut iaculis dictum, augue justo blandit felis, dignissim consectetur diam nibh at nulla.

Suspendisse potenti. Mauris porta arcu et orci dictum interdum.

classe : information

Agit de la même façon que bg-grey, mais ne cible que la première colonne

Aliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id. Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc. Phasellus ultrices, eros ut iaculis dictum, augue justo blandit felis, dignissim consectetur diam nibh at nulla. Suspendisse potenti.

Mauris porta arcu et orci dictum interdum.

plaquette cinéma au collègeAliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id. Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc. Phasellus ultrices,

lis, dignissim consectetur diam nibh at nulla. Suspendisse potenti. Mauris porta arcu et orci dictum interdum.

à savoir : il est possible de combiner plusieurs classes !

Aliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id. Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc. Phasellus ultrices, eros ut iaculis dictum, augue justo blandit felis, dignissim consectetur diam nibh at nulla.

Suspendisse potenti. Mauris porta arcu et orci dictum interdum.Aliquam vestibulum auctor hendrerit. Morbi lobortis dignissim orci, et feugiat nisl imperdiet id. Nullam neque purus, condimentum tempus sagittis sed, consectetur at nunc.

Morbi lobortis dignissim orci, et feugiat nisl imperdiet id.Morbi lobortis dignissim orci, et feugiat nisl imperdiet id.

Phasellus ultrices, eros ut iaculis dictum, augue justo blandit felis, dignissim Morbi lobortis dignissim orci, et feugiat nisl imperdiet id.

consectetur diam nibh at nulla. Suspendisse potenti. Mauris porta arcu et orci dictum interdum.