Méthode n°1 : écrire le CSS au sein du fichier HTML, dans un élément style. La première façon d'écrire du code CSS va être à l'intérieur même de notre page HTML, au sein d'un élément style . En plaçant le CSS de cette façon, le code CSS ne s'appliquera qu'aux éléments de la page HTML dans laquelle il a été écrit.
Une feuille de style (CSS)
La feuille de style générale est accessible dans votre manager sous forme de formulaires à personnaliser (dans Configuration > Apparence > Personnaliser ).
Pour cela, il suffit de réunir le code CSS à l'intérieur de la balise « head ». S'il s'agit d'un morceau de code CSS spécifique, le plus simple est de l'intégrer directement dans la balise HTML d'un élément avec l'attribut style.
Liez le fichier CSS au fichier HTML
Pour lier les fichiers .css et .html , vous allez rajouter une ligne dans le fichier .html pour indiquer au navigateur d'aller chercher la feuille de style (stylesheet en anglais) afin d'afficher la page web avec les propriétés de style qu'on lui a appliquées.
Pour écrire en html, on utilise des balises, elles délimitent et définissent les éléments. Par exemple, la balise <p> servira à définir et délimiter un élément paragraphe. La plupart des balises marchent par paire, la première ouvre <p> pour marquer le début, la seconde ferme </p> pour marquer la fin.
La syntaxe des commentaires avec /* */ est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément <style> , on peut utiliser les commentaires HTML <!
La balise style est placée en HTML dans l'en-tête et avant d'éventuels scripts, et intègre des styles CSS globaux. Elle est à cet effet compatible avec différents attributs HTML.
CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web (HTML ou XML).
On peut déclarer dans une page HTML quelle CSS utiliser pour réaliser la mise en forme en mobilisant l'élément <link rel="stylesheet" href="nom-du-fichier-css"> dans la partie head .
Créer un nouveau fichier CSS
Cliquez sur l'l'icône en forme de dossier folder dans l'angle supérieur gauche de l'écran pour développer le menu latéral. Cliquez ensuite sur Fichier > Nouveau fichier.
Afficher le css d'un élément
Pour ouvrir les exemples, cliquez avec le bouton droit sur le lien ou appuyez longuement sur Ctrl (pour Windows, Linux) ou Commande (pour macOS), puis cliquez sur le lien. Cliquez avec le bouton droit sur le Inspect Me! texte, puis sélectionnez Inspecter.
A faire : Dans votre éditeur de texte Notepad++, cliquer sur "fichier" / "nouveau", pour créez un nouveau fichier vide. Pour activer la coloration du code dans Notepad++ et pour simplifier l'enregistrement, allez dans le menu Langage > C > CSS. Enregistrez le fichier en lui donnant le nom : style.
La balise HTML commence toujours par « < » et se termine par « > ». Par exemple, le code « H3 » signifie « titre de niveau 3 » en langage HTML. Si vous souhaitez nommer un sous-titre « Apprendre la rédaction web », vous devrez taper <H3>Apprendre la rédaction web</H3>.
Ajouter le CSS au début de la page HTML
La balise style est donc intégrée à l'élément head et s'applique à la totalité du fichier. Les instructions de conception sont contenues dans le document mais sont distinctes du code HTML.
L'HTML permet l'affichage des informations de la page sur le navigateur, le CSS met en page son contenu et le JavaScript intègre les animations et spécifie les interactions entre les éléments.
Mettre un soulignement ou un barré à un texte grâce aux feuilles de style Css. Vous pouvez en feuille de style Css spécifier qu'une portion de texte soit soulignée ou barrée. Pour cela, vous devez utiliser la feuille de style Css text-decoration qui permet de souligner, barrer et faire un trait au-dessus du texte.
Commentaires en CSS
Utiliser /* et */ pour encadrer votre commentaire. Tout ce qui est entre /* et */ sera considéré comme un commentaire, même sur plusieurs lignes. Ne mettez pas de commentaires dans l'attribut HTML style .
Center un texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css center le texte, mais aussi une image ou tout élément de type display : inline* . Pour cela vous devez utiliser la feuille de style Css text-align qui permet spécifier un alignement au centre du texte.
Pour insérer un commentaire HTML, il faut utiliser la balise < ! -- -- > et placer le texte entre les deux double-tirets. Exemples : < ! -- je commente ici pour rappel -- > ; < !
Atom – un excellent éditeur HTML gratuit et open source avec des fonctionnalités avancées. Visual Studio Code – fournit des fonctionnalités extensibles avec une gamme d'extensions. CoffeeCup – une solution rentable pour un éditeur HTML premium avec des outils robustes.
Pour insérer une zone de texte dans une ligne, on va utiliser la balise <input />. On retrouvera cette balise plusieurs fois dans la suite de ce chapitre.
On clique sur File, puis sur Save as ce qui veut dire Enregistrer sous. Il faut bien que le fichier soit enregistré dans le même dossier que notre fichier HTML. Ensuite, et c'est très important, il faut nommer le fichier Style. css puis cliquer sur Ok.