Programmation

Comment insérer le CSS sur une page html ?

Bonjour, j’espère que vous allez bien. Nous voici encore de retour vers vous avec un nouvel article qui vient en dépendance de ces deux derniers articles, Comment programmer une page web en Html? Et Les balises HTML et leurs attributs, cette fois-ci nous allons voir comment insérer le CSS sur une page Html.

Comme nous l’avons dit dans nos précédents articles, le Html est un langage de balisage qui nous permet de créer des pages web. Car, créer une page Web ne suffit pas, mais l’apparence du  site aux internautes est un atout important à tenir à compte.

C’est ainsi que nous avons pensé à vous suggérer cet article, pour afin donner une apparence à votre site que vous aviez créé récemment.

Pour arriver à donner cette belle apparence à notre site web, nous  devons utiliser c’est qu’on appelle le style, c’est pourquoi sur cet article nous verrons comment ajouter le CSS sur la page web.

Par contre, avant de commencer à répondre à la préoccupation de notre article, je dois d’abord apporter plus de lumières  aux questions ci-dessous afin de savoir plus sur cet article.

Qu’est-ce-que le CSS ?

Oui, tu attends assez parler par plusieurs programmeurs surtout Web, de ce mot CSS. Pas de soucis, ici, tout vous serait bien éclairci.

VOIR AUSSI  Comment apprendre plusieurs langages de programmation le plus simplement ?

A cet effet, le CSS comme un sigle qui veut dire « Cascading Style Sheets » en anglais et en français « Feuille de style en cascade » est un langage informatique qui décrit la présentation des documents HTML et XML.

Par ajout, d’une autre manière, je peux définir le ss comme étant un langage informatique qui permet de faire la mise en forme sur un site Web.

Pourquoi il est important d’utiliser le CSS  en programmation web ?

Le HTML nous permet seulement d’ajouter les contenus sur la page sans aucune mise en forme, par conséquent, pour ajouter du Style sur notre page Web comme : définir la police, la  couleur de la page, le titre et plein d’autres mises en formes que vous connaissez, vous devez passer par le CSS.

Voilà comme l’utilisation de CSS en programmation web est très importante. Même si les contenus d’une page web sont très capitaux  pour lire sur internet.

Par contre, la mise en forme des données sur la page est aussi primordiale pour permettre aux internautes de se localiser dans la navigation de vos pages Web sur internet.

Comment insérer le CSS sur une page Html ?

Celle-ci est la question qui nous intéresse tous. Bouf !!!, alors continuez ensemble pour savoir comment insérer le CSS sur une page Html.

Pour insérer le CSS sur une page html, il y a trois méthodes, car avoir une connaissance sur les propriétés de CSS, c’est encore bien mais il est important de connaitre aussi comment les insérer pour que votre site éclaire comme pour les autres, aussi plus  qu’eux, car tout est possible.

VOIR AUSSI  Liste des Balises Html et Leurs Attributs

1er méthode : insérer sur l’entête (head)

Cette méthode permet tout simplement d’insérer les propriétés de CSS de la balise sélectionnée sur la balise <head> </head>. Et pour ce faire, voici la structure ci-dessous :

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
			color: red;
		}
	</style>
	<title></title>
</head>
<body>
	<p>Bonjour School informatique, ça va?</p>

</body>
</html>

Comme vous avez vu la structure ci-dessus, nous avons donné la couleur rouge à la balise P enfin, que le paragraphe ait cette couleur. Et donc, vous pouvez appliquer comme le bon vous ensemble.

Mais, il est à signaler que, cette méthode est rarement utilisée.

2ème méthode : insérer le CSS sur la balise ouvrante

Oui, tu sais déjà qu’est-ce qu’une balise ouvrante? si non, ça veut dire que la balise qui n’a pas de slash, par exemple <body> </body>, comme tu vois bien, le mot body qui n’a pas de barre(/) est celui qu’on appelle balise ouvrante.

Pour y faire, voici maintenant la structure ci-dessous :

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p style="text-align: center">Bonjour School informatique, ça va?</p>
</body>
</html>

Enfin, pour être assez claire sur la structure ci-dessus. La balise ouvrante P, nous avions inséré le CSS avec une propriété de centrer le texte. Et vous pouvez aussi ajouter comme vous le voulez.

Encore, cette méthode n’est pas toujours aimable aux programmeurs comme vous qui nous lisez.

3ème méthode : Créer un fichier CSS pour insérer le CSS dans une page Html

Effectivement, soit totalement vigilant sur cette notre dernière méthode, car c’est la seule méthode utilisée par les programmeurs Web afin d’insérer le CSS sur une page HTML.

Pour ce faire, il faut créer un fichier à part, en l’attribuant l’extension .CSS, en plus, sur votre structure de HTML, vous devez insérer cette balise <link rel= »stylesheet » type= »text/css » href= »style.css »> pour mettre en relation avec les deux fichiers (Html et Css) sur la balise toujours head comme ci-dessous.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title></title>
</head>
<body>
	<p style="text-align: center">Bonjour School informatique, ça va?</p>
</body>
</html>

A cet effet, href= » » comme vous avez vu sur la structure ci-dessus, c’est l’attribut qui vous permet tout simplement d’y saisir le nom du fichier CSS que vous aviez créé, tout en tenant compte de l’emplacement.

VOIR AUSSI  Développement d'applications multiplateformes avec Flutter : Guide complet

Conclusion pour insérer le CSS sur une page html

Pour insérer le CSS sur une page Html, que ça ne soit plus encore pour vous un tracas, voilà maintenant l’astuce qui vous aidera plus.

Et nous voici arriver à la fin de notre astuce, en cas d’une suggestion ou question via notre astuce. La zone de commentaire est totalement dédiée pour vous enfin de nous décrire votre préoccupation d’une manière courtoise.

Si cette astuce vous a totalement plu, veuillez aussi la partager.

Merci et à bientôt.

Christophe KALOSALE

Je suis un blogueur et Passionné de l'informatique et des nouvelles technologies. En pensant que " l'écrivain publique était utile avant l'ère de l'informatique ; il est devenu, aujourd'hui, numérique et indispensable". C'est ainsi que par cet adage, je me donne l'audace à les fournir avec amour à tous les geeks informatiques. Ainsi le blog est leurs dédié.

2 commentaires

Laisser un commentaire

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

Bouton retour en haut de la page