Avec l'utilisation des balises <style> on intervient directement dans le document (X)HTML. C'est une balise (X)HTML et non plus un attribut qui permet en la plaçant dans l'en-tête du document, c'est-à-dire entre les balises <head> </head>, d'insérer du code CSS dans le fichier (X)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.
Où est-il conseillé de placer le code CSS ? Bien que les 4 possibilités évoquées soient possibles, il est vivement déconseillé de placer le code CSS à l'intérieur du HTML dans le body. Quitte à l'inclure dans le fichier internet, il est plus intéressant de le placer dans les balises head.
Dans l'onglet Modèles, faites défiler jusqu'à CSS et feuilles de style. Pour ajouter une feuille de style, cliquez sur + Ajouter une feuille de style. Cliquez sur le X à côté d'une feuille de style jointe pour la supprimer. Cliquez sur Enregistrer.
Cliquez avec le bouton droit sur le texte sur lequel vous voulez baser un nouveau style. Dans la mini-barre d'outils qui apparaît, cliquez sur Styles, puis sur Créer un style. Dans la boîte de dialogue Créer un style à partir de la mise en forme, attribuez un nom à votre style, puis cliquez sur OK.
Feuille de style interne
Il est possible d'écrire du code CSS dans l'entete d'un document HTML, dans la balise >head>. Il suffit pour cela de l'encadrer par une balise >style> ayant pour attribut type="text/css".
L'attribut href sert à indiquer le lien hypertexte vers le fichier CSS. Cet attribut accepte un chemin absolu ou relatif vers la feuille de style. L'attribut type permet d'indiquer le type MIME du fichier externe. La valeur à y indiquer est identique à celle de la balise <style>, c'est-à-dire 'text/css'.
Trouver le CSS selector sur le navigateur
Cliquez sur l'écran avec le bouton droit. Cliquez sur Inspecter dans le menu qui apparaît. Cliquez sur l'icône de la flèche en haut à gauche de l'écran Outils de Développement. Placez votre souris sur l'élément dont vous voulez obtenir le CSS selector.
CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. Par exemple, « Je veux que le titre principal de ma page s'affiche en rouge en gros caractères. » La règle commence par un sélecteur, l'élément HTML mis en forme.
Par la suite, nous nous mettrons le HTML et le CSS dans des fichiers séparés. Séparer les fichiers est une bonne chose car cela vous permet facilement d'utiliser la même feuille de style sur plusieurs fichiers HTML: il vous suffit d'écrire votre feuille de style une fois.
Pour débuter en CSS il va vous falloir créer votre première feuille de style. Vous pouvez créer autant de feuilles de style que vous souhaitez dans votre projet, mais commençons avec une seule. Cette feuille de style pourra être nommée comme ceci : style.
L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href , crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien.
Cliquez avec le bouton droite de la souris dans le code puis choisissez Tout sélectioner dans le menu déroulant. Cliquez avec le bouton droite de la souris dans le code puis choisissez Copier dans le menu déroulant.
La règle @import
À partir du moment où vous créez un fichier . css pour appliquer du style à votre page web (écrite dans un fichier . html), il vous faut lier ces deux fichiers. Ainsi, les propriétés CSS que vous ajoutez vont pouvoir s'appliquer aux balises HTML auxquelles vous souhaitez qu'elles s'appliquent.
Pour sélectionner les polices de la règle CSS, dans l'éditeur CSS, utilisez le sélecteur Famille de polices. Vous pouvez sélectionner des polices main et de secours pour chaque règle CSS. Utilisez la liste déroulante Famille de polices pour sélectionner une police.
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.
On insère dans la balise (X)HTML souhaitée, via l'attribut style, les déclarations que l'on veut voir appliquer à cette balise. Cet attribut style ne prend donc comme valeur que des déclarations (c'est-à-dire le couple : propriété: valeur).
Choisissez Format > Copier le style (le menu Format se trouve en haut de l'écran). Sélectionnez le texte auquel vous voulez appliquer le style, ou placez le point d'insertion dans le texte, puis choisissez Format > Coller le style.