Une feuille de style en cascade (CSS) est un système de codage de sites Web qui permet aux concepteurs de manipuler plusieurs fonctionnalités à la fois en attribuant certains éléments à des groupes. Par exemple, en utilisant un code pour l'arrière-plan du site Web, les concepteurs peuvent modifier la couleur ou l'image de l'arrière-plan sur toutes les pages du site Web en modifiant le fichier CSS. Voici comment créer du CSS pour un site Web de base.
Pas
Partie 1 sur 4: Écriture de CSS en ligne
Étape 1. Assurez-vous d'avoir une compréhension de base des balises HTML
Vous devez savoir comment fonctionnent les balises et de la
src
et
href
les attributs.
Étape 2. Apprenez certaines des propriétés CSS de base
Vous constaterez qu'il existe de très nombreuses propriétés. Cependant, il n'est pas nécessaire de tous les apprendre.
-
Quelques bonnes propriétés CSS de base à connaître sont
Couleur
et
famille de polices
- .
Étape 3. Découvrez les valeurs de chaque propriété respective
Toutes les propriétés ont besoin d'une valeur. Pour le
Couleur
propriété, par exemple, vous pouvez mettre le
rouge
valeur.
Étape 4. En savoir plus sur le
style
Attribut HTML.
Il est utilisé dans un élément comme
href
ou
src
. Pour l'utiliser, entre les guillemets après le signe égal, mettez l'attribut CSS, un deux-points, puis la valeur de la propriété. C'est ce qu'on appelle une règle CSS.
Étape 5. Comprenez que le CSS en ligne n'est généralement pas utilisé pour les sites Web par les développeurs Web professionnels
Le CSS en ligne peut ajouter un encombrement inutile à un document HTML. Cependant, c'est un excellent moyen de se familiariser avec le fonctionnement de CSS.
Partie 2 sur 4: Écriture CSS de base
Étape 1. Lancez le programme que vous souhaitez utiliser
Il devrait vous permettre de créer des fichiers HTML et CSS.
Si vous n'avez pas installé de programme spécial, vous pouvez utiliser le Bloc-notes ou un autre éditeur de texte. Enregistrez simplement votre fichier sous forme de fichier texte et de fichier CSS
Étape 2. Ouvrez le fichier HTML de votre site Web
Vous devriez également l'ouvrir avec un éditeur HTML, si vous en avez un installé.
Les éditeurs HTML vous permettent d'éditer HTML et CSS en même temps
Étape 3. Créez une balise dans votre en-tête HTML
Cela vous permettra d'écrire du CSS sans avoir besoin d'un fichier séparé.
Étape 4. Choisissez un élément auquel vous souhaitez ajouter un style et tapez le nom de l'élément suivi d'un ensemble d'accolades ({ })
Pour rendre votre code plus lisible, placez toujours la deuxième accolade sur sa propre ligne.
Étape 5. Entre les accolades, tapez vos règles CSS comme vous le feriez avec le
style
attribut.
Chaque ligne doit se terminer par un point-virgule (;). Pour rendre votre code lisible, chaque règle doit commencer sur sa propre ligne et chaque ligne doit être en retrait.
Il est très important de noter que ce style affectera tous les éléments du type sélectionné sur la page. Un style plus spécifique sera couvert dans la section suivante
Partie 3 sur 4: CSS plus avancé
Étape 1. Créez un fichier CSS, pas un fichier HTML et enregistrez-le en utilisant le
.css
extension.
Ouvrez également votre fichier HTML.
Étape 2. Créez une balise dans votre en-tête HTML
Cela vous permettra de lier un fichier CSS séparé à votre document HTML. Votre balise de lien a besoin de trois attributs:
réel
taper
et
href
-
réel
signifie "relation" et indique au navigateur quelle est la relation avec le document HTML. Ici, il doit avoir une valeur de
"feuille de style"
- .
-
taper
indique à quel type de média est lié. Ici, il doit avoir une valeur de
"texte/css"
-
href
- here est utilisé de la même manière que dans un élément, mais ici, il doit être lié à un fichier CSS. Si le fichier CSS se trouve dans le même dossier que le fichier HTML, seul le nom du fichier doit être écrit entre guillemets.
Étape 3. Sélectionnez des éléments de différents types auxquels vous souhaitez ajouter le même style
Ajouter un
classer
attribuez à ces éléments et définissez-les sur un nom de classe de votre choix. Cela donnera à vos éléments le même style.
Étape 4. Attribuez le style qu'une classe recevra
Tapez le nom de la classe dans votre fichier CSS avec un point (.) le précédant (c'est-à-dire
.classer
).
Étape 5. Sélectionnez les éléments uniques auxquels vous souhaitez ajouter un style spécial et ajoutez un
identifiant
attribut.
Les identifiants sont créés en CSS en utilisant un symbole dièse (#) plutôt qu'un point.
Les identifiants sont plus spécifiques que les classes, donc un identifiant remplacera tout style de classe s'il a un attribut avec une valeur différente de celle de la classe
Partie 4 sur 4: En savoir plus
Étape 1. Visitez les écoles w3
Il s'agit d'un site Web officiel destiné à enseigner les compétences en développement Web. Le w3 contient de nombreuses références répertoriées pour HTML et CSS, ainsi que d'autres langages Web.
Étape 2. Trouvez d'autres sites spécifiquement destinés à l'apprentissage et à l'enseignement du HTML et du CSS
Des sites comme CSS tricks.com visent spécifiquement à enseigner les compétences en CSS et en conception Web. Trouver des sources fiables vous aidera dans votre parcours d'apprentissage.
Étape 3. Entrez en contact avec des concepteurs et des développeurs Web
Leur expérience et leur savoir-faire peuvent vous enseigner des connaissances et des compétences précieuses.
Étape 4. Affichez le code source des sites Web que vous rencontrez
L'affichage du CSS de sites Web bien développés peut vous montrer comment concevoir des parties de sites Web. Le copier comme pratique et jouer avec le code peut vous aider à apprendre à utiliser différents attributs CSS.
