Voilà une partie ultra-importante de ce cours, nous allons lier notre fichier CSS à notre fichier HTML, en fait il existe plusieurs façons de lier son HTML a son CSS, il en existe trois. Certains sont même «banni par les moteurs de recherche». Alors il faut choisir attentivement la manière d’utiliser son CSS.
Ne vous inquiétez pas, le CSS est un langage aussi simple que le HTML. Alors dans ce tutoriel nous allons voir les façons d’utiliser le CSS pour le lier à notre fichier HTML.
Version vidéo
Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Rappel sur le CSS
En 1er lieu je vais vous faire un rappel sur ce qu’est le CSS. Le CSS contrairement au HTML permet de faire la mise en page de notre site Web. Alors que le HTML lui permet d’ajouter le contenu à notre page web.
Voici le site web informerick sans CSS:
Voici Google sans CSS:
Et maintenant voici les deux sites lorsque nous ajoutons le CSS:
Comme vous pouvez voir, tout ce qui attrait à la couleur, à la grosseur, à l’emplacement est avec le CSS, alors nous allons voir comment faire pour ajouter du CSS dans le HTML et de connecter un fichier externe CSS au HTML.
Associer une feuille de styles à une page HTML
La 1re façon qui est la plus recommandée qui est aujourd’hui dans la HTML5 et qui est utilisé par les moteurs de recherche pour l’indexation est le fait de lier dans l’entête de notre page HTML un fichier externe CSS, nous allons lier ceux-ci et le code sera appliquée directement dedans.
Voici le code qu’il va falloir ajouter dans votre balise <head>:
<link rel="stylesheet" type="text/css" href="style.css">Alors si nous décomposons la balise, nous y voyons 3 attributs. La 1re attribut:
rel=”stylesheet”Est notre attribut qui définit la relation qui en lien avec la balise comme nous avons dit, c’est stylesheet qui ça veut dire une feuille de style.
Le 2e attribut est:
type=”text/css”Alors le type lui nous permet de dire quels fichier relier à notre page alors comme nous disons que dans cela est du texte et du CSS.
Et finalement la 3e attributs est:
href=”style.css” En bref, c’est le fichier qui va être utilisé avec notre CSS alors oui il va falloir créer un fichier style.css.
Pour créer votre fichier CSS, vous avez simplement à ajouter une nouvelle page et l’enregistrer au format CSS (Cascade Style Sheet). Le CSS vous pouvez aussi créer un fichier TXT et enlever son extension et de remplacer par .CSS.
Écrire les styles dans la page
Une autre façon d’ajouter du CSS est le fait d’écrire une balise directement dans l’entête, lorsque nous ajoutons la balise:
<style> </style>Tout le code qui s’y retrouvera dedans sera du code CSS.
Attention cette méthode n’est pas recommandée parce qu’elle alourdit le fichier HTML. Lorsque le navigateur télécharge le fichier HTML, le fait d’ajouter le code CSS dedans fait que ça va être plus long de charger la page. Cela est une méthode utilisée dans les anciennes versions, mais il est recommandé d’y ajouter les style dit “essentiels” à votre page pour son chargement, le fait d’ajouter ces éléments essentiels font que votre page apparaisse plus vite aux navigateurs et tu n’as pas besoin de télécharger le fichier CSS tout de suite,
Écrire des styles dans une balise
Et la dernière méthode pour ajouter du CSS il va y avoir l’attribut:
style=””Tout ce qui se retrouve dedans est du CSS, mais en plus nous pouvons l’ajouter dans toutes les balises. Attention cette méthode est banni par les moteurs de recherche. C’est une façon d’utiliser de l’ancien HTML CSS, mais si vous n’avez pas accès à un fichier CSS, alors il peut être utile d’utiliser la balle est-il dans les cas extrêmes.
FAQ
Avec quoi ouvrir les fichiers css ?
Vous pouvez ouvrir les fichiers CSS avec les mêmes logiciels que pour le HTML. Soit:
- Visual Studio Code
- Notepad++
- SublimeText
- Et des tas d’autres, voici une liste.
Pourquoi apprendre css ?
Apprendre CSS, un des languages les plus demandé dans le design! Si vous souhaitez être un designer, un infographiste, un concepteur de site web, le CSS seras votre meilleur amis pour concevoir de manière numérique.
Avec le CSS vous pouvez créer des animations, faire le design de sites web complets!
Ce tutoriel se trouve dans la catégorie: Programmation
