CSS (Cascading Style Sheets)
Ce langage vient compléter le HTML et gère la mise en forme de votre site.
Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page. Mais tous les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS.
source : mindsparklemag.com/design/summer-3d-graphics/
Examiner l’élément de la page web pour consulter le code html + CSS.
travailler en local
Travailler en local comporte de nombreux avantages. Le plus important est certainement le fait de pouvoir créer ou tester de nouvelles fonctionnalités sans impacter le fonctionnement d’un site « live » qui serait déjà visité par des internautes.
Commencez toujours par créer votre projet en « local », c’est-à-dire avec des fichiers stockés sur votre machine puis une fois le travail terminé ou bien amorcé, déposez votre site sur le serveur d’un hébergeur. On parle alors du transfert des fichiers via une connexion FTP (comme avec FileZilla par exemple).
où écrit-on le CSS ?
Vous pouvez écrire du code en langage CSS dans :
-
dans un fichier
.css(méthode la plus recommandée) -
dans l’en-tête
<head>du fichier HTML
On écrit le code CSS dans un fichier spécifique ayant l’extension .css tandis que les fichiers HTML portent l’extension .html. C’est la méthode la plus pratique et la plus souple, et vous évite de tout mélanger dans un même fichier !
1- Avec Sublime Text, créez un nouveau fichier et enregistrez-le sous le nom index.html puis écrivez le code HTML suivant :
Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css"/> : c’est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.
2- Il convient de créer sur votre disque dur un dossier « racine » dans lequel vous regroupez les fichiers de votre site. Pour cet exemple, les fichiers .html et .css.
3- Créez un autre fichier, enregistrez-le sous le nom style.css puis écrivez le code CSS suivant :
4- Ouvrez votre fichier index.html dans un navigateur pour observer la mise en forme du CSS.
méthodes à retenir
Si vous placez le code CSS dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML, c’est à dire les pages du site ! Si vous changez d’avis ou si vous avez des modifications à faire, il sera très certainement plus simple et plus rapide de modifier le CSS plutôt que d’intervenir sur chaque fichier HTML ?
pour appliquer un style CSS,
on identifie la balise
-
Noms de balise : on écrit les noms des balises dont on veut modifier l’apparence.
Par exemple, pour les paragraphes<p>, je dois écrirep. -
Propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés.
Par exemple, la propriétécolorpermet d’indiquer la couleur du texte,font-sizepermet d’indiquer la taille du texte, … -
Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur.
Par exemple, pour la propriétécolor, il faut indiquer le nom de la couleur.
Pourfont-size, il faut indiquer la taille souhaitée, …
Si deux balises doivent avoir le même aspect, vous pouvez combiner la déclaration en séparant les noms des balises par une virgule :
indiquer des commentaires dans le CSS
Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations utiles pour vous.
Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes.
pour appliquer un style à différentes balises, attributs « class » et « id »
Comment faire pour styliser certains paragraphes de différentes manières ?
On peut utiliser des attributs spéciaux qui fonctionnent sur toutes les balises, il en existe deux :
-
l’attribut
class; -
l’attribut
id.
Un attribut peut être indiqué à n’importe quel type de balise : titre, paragraphe, image, …
Lorsque vous écrivez l’attribut class , vous devez indiquer une valeur. Cette valeur sert à identifier la balise. Par exemple : introduction, menu, titre, réseaux,…
Dans le fichier style.css, vous devez précédé le nom de la class avec un point (.)
L’attribut id fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu’une fois dans le code. Il sera notamment utile si vous utilisez du JavaScript pour reconnaître certaines balises ou pour réaliser des ancres.
En pratique, les id sont utilisés sur des éléments uniques dans la page, comme par exemple le logo. Dans le fichier CSS, il faudra faire précéder le nom de l’id par un dièse (#)
les balises universelles
Les balise universelles sont des balises qui n’ont aucun sens particulier (contrairement à <p> qui veut dire « paragraphe », <strong> « important », etc.). Le principal intérêt de ces balises est que l’on peut leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne convient.
Il existe deux balises génériques : inline et block.
<span> </span>: c’est une balise de type inline, c’est-à-dire une balise que l’on place au sein d’un paragraphe de texte, pour sélectionner certains mots uniquement.Les balises<strong>et<em>sont de la même famille.
<div> </div>: c’est une balise de type block, qui entoure un bloc de texte. Les balises<p>,<h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne.<div>est une balise fréquemment utilisée dans la construction d’un design.
