Notre HTML est bien mis en place, et les éléments sont correctement placés horizontalement, mais nous avons encore beaucoup de travail à faire avec notre mise en page. Commençons par un aperçu des fichiers CSS si vous n'avez pas déjà travaillé avec des feuilles de styles avant.
Si vous avez déjà travaillé avec le langage CSS, vous pouvez sauter la section ci-dessous !
Qu'est-ce que CSS ?
CSS signifie Cascading Style Sheets. Le langage CSS vous permet de contrôler votre mise en page, les couleurs, les polices, le positionnement, et plus encore.
La grille Bootstrap vous donne une base qui vous permet d'organiser tous vos éléments dans les colonnes, mais elle ne suffit pas à gérer toutes vos règles de style et ne vous permet pas d'obtenir une réplique parfaite de votre maquette.
La syntaxe CSS est relativement simple. Vous allez :
Identifier un élément HTML
Ouvrir des accolades
Associer une valeur à une propriété pour la modifier et ajouter un point-virgule.
Fermer les accolades
Par exemple, pour changer la couleur de fond d'un élément, vous devez définir une valeur comme code hexadécimal avec la propriété background-color. Voici un exemple de propriétés que vous pouvez changer au sein de votre CSS :
element {
color: blue; /* change la couleur */
opacity: 0.1; /* change l'opacité. Ici 10% */
background-color: yellow; /* change la couleur de fond */
font-family: Arial;/* change la police utilisée */
text-align: center; /* change l'allignement */
font-size: 14px; /* change la taille de la police */
border: 1px solid black; /* ajoute une bordure */
margin: 5px; /* ajoute une marge autour de l'élément */
padding: 10px; /* ajoute de l'espace à l'intérieur de l'élément */
height: 50px; /* hauteur de l'élément */
width: 50px; /* largeur de l'élément */
}
Dans cette liste, vous avez des propriétés qui changent la couleur des éléments, la disposition des éléments, l'espace entre les éléments, l'espace autour des éléments, et plus encore. La liste est en réalité beaucoup plus longue !
Vous n'avez pas besoin de connaitre toutes ces propriétés par coeur ; vous pouvez toujours les regarder en ligne si vous réalisez que vous avez besoin de changer une propriété particulière d'un élément. Je recommande d'utiliser Mozilla Developer Network pour faire votre recherche. Ils ont une documentation complète sur presque tout en CSS !
Priorité CSS
Lorsque vous configurez des règles de style en CSS, vous devez garder en tête que les règles plus spécifiques pour des éléments particuliers ont la priorité sur les règles générales. Par exemple, si vous définissez que la couleur du texte sur la page entière (à l'aide d'une balisebody en HTML) doit être le noir, mais que pour un paragraphe particulier, vous fixez une règle de style qui dit que le texte doit être jaune, il aura la priorité parce que la règle est plus spécifique.
Les règles sont également définies dans l'ordre chronologique : si vous définissez une règle plus haut dans votre feuille de styles puis que vous définissez la même règle plus bas dans votre feuille de styles, la deuxième valeur remplacera la première.
Pourquoi nous parler de ça pour les maquettes ?
Vous aurez beaucoup d'éléments à considérer et vous allez rapidement accumuler les règles CSS sans organisation, arrivant très vite à plusieurs centaines de lignes de code. Un fichier CSS désorganisé finit avec une page désorganisée, car des règles peuvent accidentellement en remplacer d'autres, ou certaines règles peuvent s'appliquer à d'autres éléments qui n'auraient pas dû être impactés.
Notre premier petit pas sera de créer un fichier CSS. Dans le même dossier que votre fichier index.html, ajoutez un dossier appelécss. Dans ce dossier, créez un fichier styles.css (vous pouvez le faire à partir de votre éditeur de code : créez un nouveau document et enregistrez-le au format CSS).
Regardez maintenant les éléments similaires dans la maquette et réfléchissez à ce qu'ils ont en commun. Peut-être remarquerez-vous que les deux plus grands titres dans la maquette sont blancs :
Etant les plus grands titres de la page, vous pouvez supposer qu'ils sont des éléments HTML<h1>. Voici comment le premier apparaîtrait dans votre fichierindex.html (regardez ligne 16) :
...
<!--Masthead-->
class="container"
class="row"
class="col-md-2"
src="assets/logo.svg" class="logo"
class="col-md-8"
class="row"
class="col-md-8 col-sm-12 col-lg-6"
Picture perfect
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
href="#"Read More →
class="col-md-4 hidden-sm-down"
src="assets/iPhone.png/"
...
Dans votre fichierstyles.css, nous allons définir la couleur du texte en blanc pour tous les éléments<h1>.
h1 {
color: #ffffff;
}
Les polices
C'est une bonne idée de commencer avec des styles généraux. Maintenant, nous devons penser aux polices que nous voulons définir pour le corps du texte. Cliquez sur le texte de la page ; vous remarquerez que le nom de la police est Open Sans.
Visitez Google Fonts et trouvez Open Sans. Si vous cliquez sur la petite flèche dans le carré, vous serez redirigé vers un guide de démarrage rapide. Choisissez les styles de police que vous voulez en les cochant et copiez les lignes de code à inclure dans votre projet !
Vous allez inclure <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> dans la section <head> de votre document HTML, et font-family: 'Open Sans', sans-serif; dans votre fichier CSS. Incluez la règle dans le CSS pour le sélecteur body : vous voulez que tous les textes soient en Open Sans.
body {
font-family: 'Open Sans', sans-serif;
}
Vous commencez à comprendre comment définir des règles CSS générales en utilisant votre maquette comme base, et dans le chapitre suivant nous verrons comment être encore plus spécifiques !
