Apprendre la programmation HTML et CSS #5 Lier fichier CSS

html-css-5-ajouter-css
Tu veux savoir comment lier html a un fichier css. Je montre comment ajouter du css a ton html dans ce tutoriel!

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.

Cours HTML/CSS Débutant #5 - Ajouter le CSS (2022)Cours HTML/CSS Débutant #5 – Ajouter le CSS (2022)

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.

Publicité

Voici le site web informerick sans CSS:

informerick-sans-css

Voici Google sans CSS:

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.

Publicité

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:

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

Partager ceci

Facebook
Twitter
LinkedIn
Reddit
Pinterest
WhatsApp
Telegram

À voir également

html-css-13
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #13 Site Web CSS Responsive
octobre 6, 2022
html-css-12
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #12 Formulaires HTML
octobre 6, 2022
html-css-11
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #11 Figures, videos et audios
octobre 6, 2022
html-css-10
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #10 Tableaux HTML
octobre 6, 2022

À voir également sur le forum

Besoin d'aide ?

Malgré que tu as lu ce tutoriel, tu te poses toujours des questions à ce sujet? Le problème ne s’est pas réglé ? Vous êtes bloqué à un endroit ?

Viens poser ta question et sois répondu par la communauté Informerick rapidement!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *