Comment mettre un titre en rouge dans un fichier html en codage car je suis vraiment nul s’il vous plait

Sagot :

Réponse :

Bonjour,

Créer un fichier index.html, y mettre dedans:

fichier joint index.txt

Puis dans le même répertoire, créer un fichier style.css, et y mettre:

fichier joint style.txt

Ici, on met toutes les balises h1 (les plus gros titres), en coleur de texte rouge.

View image LILIANBND
View image LILIANBND

Bonjour

Si cet exercice te pose problème, réexpliquons les bases

Rôles du HTML et du CSS

Le HTML constitue le contenu de la page, ce qui sera visible par l'utilisateur.

Mais pas que, le HTML apporte aussi tout un tas d'informations du genre la langue du site, les scripts javascript qu'il faudra exécuter, certains éléments de mise en page basique, et bien d'autres.

Le CSS ca va être l'habillage du site, la manière dont la contenu sera disposé et sous quelle forme. Il s'articule en deux membres:

  • Le sélecteur CSS, il peut être générique du genre p, h1, body, etc. ou plus précis comme #id_ma_balise, .ma_class, p.class_2
  • Les attributs CSS, ce sont les propriétés qu'on va imposer à l'élément sélectionné. Par exemple sa couleur (color:), ses marges (margins:),...

Utiliser le CSS

Pour utiliser du CSS il y a 3 méthodes:

  • Créer un fichier séparé (style.css), c'est la méthode la plus rependue et elle consiste à avoir un fichier distinct dans lequel on mettra tout notre code CSS, pour pas venir encombrer le HTML.
  • Utiliser une balise <style> dans le HTML, c'est la technique qu'on apprend parfois aux débutants pour ne pas s'embrouiller l'esprit avec la création d'un second fichier.
    Le principe c'est d'ouvrir une balise <style></style> et on y met dedans tout le CSS qu'on souhaite appliquer à la page.
  • Ajouter du style en attribut d'une balise HTML, le moins recommandé, ca rend le code assez fouillis et "chiant" à relire. Par exemple:
    ▌<h1 style=" color: red;"> Mon titre </h1>

Les trois méthodes marchent exactement pareil et utilisent toutes du code CSS, c'est simplement l'endroit où on le met qui change.

Mettre le titre en rouge

En parant du principe que ton titre se trouve dans une balise titre (<h1>,<h2>,<h3>,<h4>, <h5> ou <h6>).

HTML

▌ <h2> Emma a une question </h2>
▌ <p> Comment mettre un titre en rouge dans un fichier html en codage
▌ car je suis vraiment nul s’il vous plait </p>

CSS

▌ h2 {
▌    color: red;
▌ }

Code final - Option 1

▌ <h2> Emma a une question </h2>
▌ <p> Comment mettre un titre en rouge dans un fichier html en codage
▌ car je suis vraiment nul s’il vous plait </p>

▌ <style>
▌ h2 {
▌    color: red;
▌ }
▌ </style>

Code final - Option 2 (déconseillée)

▌ <h2 style="color: red"> Emma a une question </h2>
▌ <p> Comment mettre un titre en rouge dans un fichier html en codage
▌ car je suis vraiment nul s’il vous plait </p>

Code final - Option 3 (la meilleure)

Mettre le code HTML dans ton fichier index.html et mettre le code CSS dans ton fichier style.css.
Pour lier le fichier CSS tu dois ajouter cette ligne de code dans ton HTML (dans la partie <head></head>):
▌ <link rel="stylesheet" href="style.css">

Explication

Le HTML contient simplement un titre dans les balise <h2> et un paragraphe dans les balise <p>

Dans le CSS on commence par poser un sélecteur CSS, ici on choisi de sélectionner tous les balises titres <h2>.
Puis on leur attribue une propriété; color: red, pour mettre en rouge.

Voilà,

J'ai essayé de beaucoup développer les explications, j'espère que tout cela t'a aidé, sinon tu peux me demander en commentaire.

Bonne journée :)