Section titre
Ceci est un paragraphe sur mon site. Je veux styliser ce texte.
Ceci est un autre paragraphe sur mon site. Je veux aussi styliser ce texte.
Héy! Félicitations pour votre décision d'utiliser CSS dans vos projets.
Créer de superbes sites Web est tellement plus facile lorsque vous ne connaissez que les bases du CSS. C’est pourquoi j’ai créé ce guide pour vous.
Ce guide vous guide étape par étape tout au long de l'apprentissage et de l'utilisation de CSS.
Nous allons d'abord nous familiariser avec le CSS, à quoi il sert et pourquoi. Une fois que vous connaissez les bases, vous pouvez commencer à courir avec. Après cette partie introductive, nous reviendrons au cœur de la pièce: le tutoriel.
Aussi, juste pour vous donner un aperçu, voici les sections du didacticiel afin que vous puissiez sauter si vous en avez besoin:
En outre, voici des liens de renvoi vers les sections de cette page:
Commençons!
CSS, qui est l'acronyme de «Feuilles de style en cascade», est une version du langage HTML qui vous permet de modifier les polices, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, la couleur et d'autres fonctionnalités de votre page Web.
Cette extension de HTML, bien qu'elle ne soit pas difficile à utiliser, peut prendre un certain temps à apprendre. Que vous soyez un professionnel ou un propriétaire de site Web, le fait d'avoir un peu de HTML et de CSS vous permet de pousser plus loin la conception de votre site Web. Vous pouvez créer des e-mails incroyables, des newsletters d'entreprise et modifier le site Web WordPress de votre entreprise de nombreuses nouvelles manières.
Un exemple très simple de balise HTML est:
texte que vous souhaitez souligner
Bien que ce soit une bonne approche, le problème est que maintenant, si vous souhaitez modifier le texte que vous avez initialement souligné dans votre texte, vous devez parcourir chaque zone dans laquelle vous avez écrit le code et le modifier. Il s’agit essentiellement d’une solution simple qui est également très long.
Un autre problème que vous rencontrerez est de modifier le texte en ajoutant de la couleur, une police différente, etc. Semblable au concept ci-dessus, si vous souhaitez modifier le texte de certaines manières, votre code HTML deviendra un peu plus compliqué.
Voici un exemple:
C'est du texte
La ligne de code ci-dessus est maintenant non seulement en gras, mais le style de police est également maintenant Verdana au lieu d'Arial ou Helvetica ou Sans-Serif. Plus vous utilisez de styles de manière ponctuelle dans votre code, plus votre HTML devient désordonné.
Si vous optez pour ce système, sachez qu'il n'est vraiment idéal que pour les petits projets de page Web ou lorsque vous devez travailler sur une seule page. Pour plusieurs pages, vous devez normalement copier le code ci-dessus dans chaque page Web. Comme vous pouvez l'imaginer, cela prend également du temps et cela peut également rendre chaque page assez encombrée.
De plus, il est probable que toutes les pages n'auront pas le même style. En conséquence, vous devrez modifier le code à plusieurs reprises sur chaque page pour obtenir le look que vous visez. La stratégie la plus simple fonctionne un peu comme le fait JavaScript. Comme avec JavaScript, vous pouvez créer un fichier séparé qui renvoie à la page Web sur laquelle vous souhaitez apporter des modifications.
Dans la section suivante ci-dessous, nous allons apprendre à utiliser une feuille de style:
Une feuille de style externe liée est le meilleur moyen de contrôler facilement les styles sur l'ensemble de votre site Web. La première étape du processus est en fait assez simple. Ouvrez simplement un document texte sur votre ordinateur; si vous utilisez Windows, cliquez avec le bouton droit de la souris et cliquez sur "nouveau document texte". Une fois que vous avez configuré le document texte, modifiez la forme du fichier de .txt à .css.
Ce que nous venons de faire ici, c'est de changer le type de fichier en modifiant l'extension. L'extension est ce qui informe l'ordinateur des fichiers avec lesquels vous travaillez et puisque l'ordinateur sait maintenant que vous travaillez avec un fichier .css, il l'ouvrira différemment par rapport à un document .txt.
En ce qui concerne les fichiers .css, l'extension n'est pas vraiment le changement majeur qui a lieu. Ce qui est vraiment important, c'est le texte du fichier. C'est ici que vous ajouterez un "code" CSS qui contrôle les styles de votre page Web.
La feuille de style contient tous les styles que vous souhaitez utiliser pour tous les éléments de votre site, et tout ce que vous avez à faire est d'assigner des styles à ces éléments html à l'aide de classes – les styles seront appliqués.
Par exemple, supposons que vous souhaitiez donner un style au texte dans les paragraphes ci-dessous (le texte à l'intérieur des balises p):
Section titre
Ceci est un paragraphe sur mon site. Je veux styliser ce texte.
Ceci est un autre paragraphe sur mon site. Je veux aussi styliser ce texte.
Ajoutons du code CSS dans votre feuille de style pour ce faire. Nous allons créer une nouvelle classe appelée myParagraph:
.myParagraph {
taille de la police: 18px;
poids de la police: 500;
marge inférieure: 20px;
}
Vous pouvez maintenant appliquer ce style au html d'une manière très propre et simple:
Section titre
Ceci est un paragraphe sur mon site. Je veux styliser ce texte.
Ceci est un autre paragraphe sur mon site. Je veux aussi styliser ce texte.
Mais hmmmm… Il y a encore des redondances là-bas. Nous devions utiliser class = "monParagraphe" pour chaque paragraphe.
Imaginons que vous souhaitiez que tous les paragraphes de vos articles / publications soient stylés d’une certaine manière par défaut. Voici un moyen d’y parvenir:
Section titre
Ceci est un paragraphe sur mon site. Je veux styliser ce texte.
Ceci est un autre paragraphe sur mon site. Je veux aussi styliser ce texte.
Comme vous pouvez le voir, j'ai ajouté un div qui entoure tout le HTML que nous avons utilisé précédemment. Pour rendre cela un peu plus visuel pour vous, je vais ajouter un peu plus de code pour le faire ressembler un peu plus à un article. J’ai également expliqué pourquoi j’ai utilisé h2 / h3.
Titre de l'article / du message
Un texte d'introduction se trouve ici.
Titre de la section principale
Les balises h2 (titre 2) doivent être utilisées pour les en-têtes de votre article.
Titre de la sous-section
Les balises h3 (titre 3) doivent être utilisées pour les en-têtes des sections qui sont des enfants de la section h2 ci-dessus.
Ceci est un paragraphe sur mon site. Je veux styliser ce texte.
Ceci est un autre paragraphe sur mon site. Je veux aussi styliser ce texte.
Maintenant, souvenez-vous de notre classe myParagraph de plus tôt?
.myParagraph {
taille de la police: 18px;
poids de la police: 500;
marge inférieure: 20px;
}
Nous allons maintenant changer cela en ceci:
.post-content p {
taille de la police: 18px;
poids de la police: 500;
marge inférieure: 20px;
}
Reconnaître le «post-contenu» là-dedans? Oui! C’est la classe que nous avons utilisée dans notre division qui englobe tous les en-têtes et paragraphes de notre code.
Cela indique au navigateur d'appliquer le style dans .post-content p à toutes les balises p qui se trouvent dans ce div avec la classe de post-content.
Une autre méthode pour appliquer CSS consiste à modifier l'apparence de la balise HTML en la redéfinissant globalement, comme ceci:
h1 {famille de polices: Garamond, "Times New Roman", serif; taille de la police: 200%; }
Dans l'exemple ci-dessus, le code définit le style et la taille de la police pour toutes les balises h1 – le tout en une seule fois. Comme vous pouvez le constater, vous n'avez plus besoin de parcourir tout votre document pour modifier ou appliquer une classe CSS puisque tout a maintenant changé automatiquement.
Voici à quoi ressemblerait un changement à l'échelle de la page qui donne à la page des marges plus grandes:
corps {marge gauche: 15%; marge droite: 15%; }
L'avantage de redéfinir les balises est que vous pouvez modifier l'apparence de la page.
Par exemple, voici un changement plus puissant et plus étendu:
div {
arrière-plan: rgb (204,204,255);
rembourrage: 0,5em;
bordure: 1px solide # 000000;
}
Dans l'exemple ci-dessus, au lieu d'utiliser le code complet pour "vert", nous avons simplement ajouté le mot "vert".
Essentiellement, nous avons obtenu la couleur exacte en utilisant le code – il vous suffit de vous assurer de connaître les noms des codes lorsque vous utilisez cette approche. Il existe de nombreux programmes que vous pouvez utiliser pour déterminer les valeurs du code.
Enfin, voici un autre exemple de code CSS qui vous permet de générer des effets de survol de lien sans images:
a: lien {couleur: rgb (0, 0, 153)}
a: visité {color: rgb (153, 0, 153)}
a: hover {color: rgb (0, 96, 255)}
a: active {color: rgb (255, 0, 102)}
Avec le code CSS ci-dessus, les liens de votre page Web changeront de couleur lorsqu'un utilisateur survolera le lien avec sa souris. Voila! Vous avez maintenant des rollovers instantanés sans images embêtantes impliquées. Lorsque vous utilisez le code ci-dessus, la chose clé à retenir est que les déclarations de style doivent être dans le bon ordre – par exemple:
"Lien visité-survol-actif"
Si vous n'utilisez pas le bon ordre, le code peut se rompre dans certains navigateurs.
Ce que nous venons de couvrir vous permet de faire des choses très intéressantes sur votre page Web et est juste suffisant pour vous aider à démarrer. Dans l'ensemble cependant, CSS a de nombreuses fonctionnalités, mais la plupart des gens n'ont pas besoin d'en utiliser la majorité. De plus, vous ne devriez pas vous sentir obligé d'utiliser CSS. C'est juste un outil pour vous donner plus de marge de manœuvre lors de la construction de vos pages Web.
Maintenant que vous avez terminé la présentation et l’introduction à CSS, passons à la première partie du didacticiel CSS (avec des exemples de code).
Passer au didacticiel CSS suivant