Comment créer du CSS?

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.

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 avec une seule modification du fichier CSS. Voici comment créer du CSS pour un site Web de base.

Partie 1 sur 4: écrire des css en ligne

1

Assurez-vous d'avoir une compréhension de base des balises HTML. Vous devez savoir comment fonctionnent les balises et les attributs srcet href.
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.
- Certaines bonnes propriétés CSS de base à connaître sont coloret font-family.
3

En savoir plus sur les valeurs de chaque propriété respective. Toutes les propriétés ont besoin d'une valeur. Pour la colorpropriété, par exemple, vous pouvez mettre la redvaleur.
4

En savoir plus sur l' styleattribut HTML. Il est utilisé dans un élément comme hrefou 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.
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.

Voici comment créer du CSS pour un site Web de base.

Partie 2 sur 4: écrire des css de base

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.
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.
3

Créez une <style>balise dans votre en-tête HTML. Cela vous permettra d'écrire du CSS sans avoir besoin d'un fichier séparé.
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. { }
5
Entre les accolades, saisissez vos règles CSS comme vous le feriez avec l' styleattribut. 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.

Il devrait vous permettre de créer des fichiers HTML et CSS.

Partie 3 sur 4: css plus avancé

1

Créez un fichier CSS, pas un fichier HTML et enregistrez-le en utilisant l' .cssextension. Ouvrez également votre fichier HTML.
2
Créez une <link>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: rel, type, et href.
- relsignifie "relation" et indique au navigateur quelle est la relation avec le document HTML. Ici, il devrait avoir une valeur de "stylesheet".
- typeindique à quel type de média est lié. Ici, il doit avoir une valeur de"text/css"
- hrefhere est utilisé de la même manière que dans un <a>é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.
3

Sélectionnez des éléments de différents types auxquels vous souhaitez ajouter le même style. Ajoutez un classattribut à ces éléments et définissez-les sur un nom de classe de votre choix. Cela donnera à vos éléments le même style.
4

Attribuez le style que recevra une classe. Tapez le nom de la classe dans votre fichier CSS avec un point (.) le précédant (c'est-à-dire .class).
5
Sélectionnez les éléments uniques auxquels vous souhaitez ajouter un style spécial et ajoutez un idattribut. 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.

Créez un fichier CSS, pas un fichier HTML et enregistrez-le à l'aide du fichier.

Partie 4 sur 4: en savoir plus

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.
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.
3

Entrez en contact avec des concepteurs de sites Web et des développeurs. Leur expérience et leur savoir-faire peuvent vous enseigner des connaissances et des compétences précieuses.
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.

Conseils

Il existe de nombreuses propriétés différentes que vous pouvez manipuler avec CSS. Trouvez un site Web avec un style que vous aimez et affichez le fichier source. S'il y a un nom de fichier CSS lié en haut à l'intérieur des balises HEAD, vous pouvez cliquer dessus pour voir les différentes propriétés et valeurs attribuées aux éléments.

Mises en garde

Copier directement le codage HTML et CSS peut vous aider à apprendre, mais vous devez utiliser vos propres idées de conception. Prendre le design de quelqu'un d'autre est du vol et du plagiat.

Lisez aussi: Comment modifier temporairement l'affichage de votre navigateur pour afficher un faux badge vérifié Twitter?