Donnez du style à votre page avec CSS

Commencez par les styles généraux.

Avant de concevoir chaque section, nous définirons quelques règles de base pour toute la page.

Ouvrez le fichier styles.css de votre projet et commencez par :

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #222222;
  background: #ffffff;
  line-height: 1.6;
}

Nous supprimons ainsi la marge par défaut du navigateur et définissons une base commune pour la page.

box-sizing: border-box facilite la gestion des dimensions en incluant le padding et les bordures dans la largeur totale des éléments.

Concevez la navigation.

Nous commencerons par donner une structure au menu créé dans la leçon précédente.

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Plusieurs nouvelles propriétés apparaissent ici.

max-width limite la largeur maximale du contenu.

margin: 0 auto centre le bloc horizontalement.

display: flex permet de répartir les éléments de manière flexible.

justify-content: space-between sépare les éléments vers les extrémités.

Donnez du style aux liens.

Par défaut, les navigateurs affichent les liens soulignés. Nous pouvons modifier leur apparence.

nav a {
  color: #222222;
  text-decoration: none;
  margin-left: 20px;
}

Nous pouvons aussi définir ce qui se passe au survol du curseur :

nav a:hover {
opacity: 0.6;
}

Ce petit changement apporte déjà une interaction visuelle.

Concevez la section principale.

La première section doit avoir assez d’espace pour mettre en valeur le message principal.

main > section:first-child {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 30px;
}

Nous pouvons maintenant mettre en forme le titre :

h1 {
  max-width: 850px;
  margin: 0 0 30px;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 400;
}

L’espace blanc fait aussi partie du design. N’essayez pas de remplir chaque zone de l’écran avec du contenu.

Créez un bouton.

Nous pouvons transformer le lien de la section principale en un appel à l’action visuel.

En HTML, nous pouvons lui ajouter une classe :

<a href="#servicios" class="button">
Voir les services
</a>

Et en CSS :

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 25px;
  background: #222222;
  color: #ffffff;
  text-decoration: none;
}

La classe permet d’appliquer des styles uniquement aux éléments qui l’utilisent.

Espacez les sections.

Un site est généralement plus facile à lire lorsque les sections sont suffisamment espacées.

section {
  padding: 90px 30px;
}

section > h2,
section > p,
section > article {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

Nous pouvons distinguer une section en utilisant un autre fond :

#sobre {
background: #f5f2ec;
}

Transformez les services en cartes.

Dans la leçon précédente, nous avons créé des éléments article pour les services.

Nous pouvons les présenter sous forme de cartes :

#servicios article {
  margin-top: 20px;
  padding: 30px;
  border: 1px solid #dddddd;
}

Nous pouvons aussi améliorer leurs titres :

#servicios h3 {
  margin-top: 0;
  font-size: 26px;
  font-weight: 400;
}

Même un design simple peut paraître professionnel avec une bonne hiérarchie et suffisamment d’espace.

Concevez la section de contact.

Nous souhaitons que l’appel à l’action final se distingue du reste du contenu.

#contacto {
  text-align: center;
  background: #222222;
  color: #ffffff;
}

Nous pouvons aussi adapter son lien :

#contacto a {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 25px;
  background: #ffffff;
  color: #222222;
  text-decoration: none;
}

Terminez le design avec le footer.

Nous garderons un pied de page simple.

footer {
  padding: 35px 30px;
  text-align: center;
  border-top: 1px solid #dddddd;
}

footer p {
  margin: 0;
  font-size: 14px;
}

La cohérence compte plus que la décoration.

Quand on débute avec CSS, il est facile de vouloir ajouter beaucoup de couleurs, d’ombres, de bordures et d’effets.

Pourtant, un bon design repose souvent davantage sur des choix cohérents.

Utilisez une palette de couleurs limitée.

Gardez des tailles de titres cohérentes.

Répétez les mêmes espacements entre les sections.

Utilisez le même style pour les boutons similaires.

Privilégiez toujours la lisibilité.

Un design professionnel n’a pas besoin d’être compliqué. Il doit avoir une intention, une hiérarchie et une cohérence.

RÉSUMÉ

Ce que vous avez appris.

Comment définir les styles généraux d’un site.
Comment utiliser max-width pour contrôler le contenu.
Comment centrer des blocs avec margin auto.
Comment utiliser Flexbox dans une navigation.
Comment concevoir les titres et les sections.
Comment créer des boutons avec des classes.
Comment transformer le contenu en cartes.
Comment distinguer les sections avec des fonds.
Comment concevoir un footer simple.
Pourquoi la cohérence visuelle est essentielle.

MISE EN PRATIQUE

Donnez du style au site que vous avez construit.

Ouvrez votre projet mi-primera-web et travaillez sur la structure créée dans la leçon 05.

Appliquez des styles généraux au body.
Concevez la navigation.
Limitez la largeur du contenu.
Ajoutez de l’espace à la section principale.
Mettez en forme le h1.
Transformez un lien en bouton.
Ajoutez un fond différent à une section.
Présentez les services sous forme de cartes.
Donnez du style à la section de contact.
Concevez le footer.

Modifiez ensuite certaines tailles, espacements et couleurs pour créer votre propre version.

Vérifiez aussi ce qui se passe lorsque vous réduisez la fenêtre du navigateur. Vous découvrirez probablement que certains éléments s’affichent moins bien. Cela nous mène directement à la prochaine leçon : le design responsive.

Donnez du style à votre page avec CSS.