CSS ? Qu’est ce que c’est ?
Le CSS vient de l’anglais « Cascading Style Sheets » et permet la customisation et l’ajout de style à notre page web. Le CSS permet d’ajouter des couleurs aux textes, aux arrières plans, de souligner, surligner, mettre en italique, en gras… Et pleins d’autres choses.
Ici nous allons utiliser Bulma qui permet de faire du CSS facilement !
On veut ajouter du style sur un bouton mais pas un autre, ou sur un paragraphe en particulier, comment fait-on ?
En HTML on peut catégoriser les balises qu’on utilise, pour ce faire on utilise les classes. Une classe est une catégorie, une classe a un nom. Plusieurs balises peuvent avoir les mêmes classes.
<p class="home">J'ai une classe !</p> <p class="user button">J'ai deux classes !</p>
Les classes sont séparées d’un espace et peuvent permettre d’ajouter du CSS sur un élément en particulier ou d’avoir plusieurs règles qui restent entre les différentes pages. Ici on les utilisera surtout parce que ça nous permettra de mettre les mots clés de Bulma.
Bulma ? Qu’est ce que c’est ?
Bulma est un framework CSS qui permet de faciliter la vie des personnes qui font du web. Cela permet d’ajouter très simplement des couleurs, de la mise en forme sans se prendre la tête.
Si tu veux aller voir un peu plus ce que c’est → Bulma
<head> <title>demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> </head>
Quoi ? Mais ça a juste enlevé le style déjà existant et changé la police.
Pas de panique c’est normal ! Maintenant il faut qu’on lui dise ce qu’on veut faire maintenant :
C'est quand même déjà mieux ! Mais on peut faire mieux, pour l'instant on a juste ajouter à deux endroits des modifications
Pour ajouter du css avec bulma il suffit d’ajouter des mots clés dans les classes des balise HTML.
Il existe plusieurs manières de styliser ses boutons dans Bulma.
<button class="button">Bouton</button>
Ce qui donne :
On peut ajouter d’autre manière de styliser son bouton, notamment en ajoutant de la couleur, des arrondis, ou de changer la taille.
Pour plus d’information : Les boutons dans Bulma !
Ajouter un titre et ajouter du style :
<h1 class="title">Title</h1> <h2 class="subtitle">Subtitle</h2>
Et ça donne :
Pour plus de taille et de modification je te laisse aller voir sur : Les titres de Bulma !
<section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title"> Primary title </h1> <h2 class="subtitle"> Primary subtitle </h2> </div> </div> </section>
Les couleurs sont aussi données par des mots clés :
Pour la couleur « is-primary » :
<button class="button is-primary">is-primary</button>
Un onglet ressemble à ça :
Pour l’ajouter à ton projet tu peux aller voir ici : Les onglets Bulma
Pour ajouter un peu de couleur et de style à tes formulaires :
Si tu veux mettre différents contenu HTML côte à côte pour que ce soit plus facile au niveau de la lecture tu peux utiliser : les colonnes avec Bulma.
[TODO : Bulma avec Saas]
On veut changer de couleur ? Récupérer des photos ? On va sur The Stocks.
On veut des information sur Bulma on va sur : Documentation Bulma.
Un ID est là pour identifier une balise, on peut lui donner un nom.
Les id peuvent être utiles dans la création du CSS mais grâce à Bulma on va moins les utiliser. Par contre il sera nécessaire de les utiliser pour du code.
Un id s’écrit de cette manière :
<p id="paraImportant">J'ai un id !</p>
Au contraire des classes, un ID ne peut avoir qu’une seule balise.