6 critiques

LES BASES DU CSS

### Cours de CSS : Maîtrisez le Style de vos Pages Web #### Description du cours : Ce cours vous guide à ...

travers l'apprentissage du CSS (Cascading Style Sheets), l'outil essentiel pour styliser et mettre en forme vos pages web. Vous découvrirez comment utiliser le CSS pour transformer des pages HTML simples en sites web attrayants et modernes. À travers des leçons théoriques et des exercices pratiques, vous apprendrez à créer des designs réactifs et à appliquer des styles avancés pour améliorer l'expérience utilisateur. #### Contenu du cours : 1. **Introduction au CSS** : - Comprendre le rôle du CSS dans le développement web. - Syntaxe de base et sélecteurs CSS. - Intégration du CSS dans le HTML. 2. **Propriétés de Base du CSS** : - Couleurs, polices et texte. - Marges, bordures et padding. - Mise en page avec les boîtes (box model). 3. **Mise en Page Avancée** : - Techniques de positionnement (static, relative, absolute, fixed). - Utilisation de Flexbox pour des mises en page flexibles. - Introduction à Grid Layout pour des designs complexes. 4. **Design Réactif et Médias Queries** : - Concepts de design réactif (responsive design). - Utilisation des media queries pour adapter le style aux différents appareils. - Pratiques pour tester et optimiser la réactivité. 5. **Styles Avancés et Animations** : - Pseudo-classes et pseudo-éléments. - Utilisation de transitions et transformations CSS. - Création d'animations avec @keyframes. 6. **Frameworks et Préprocesseurs CSS** : - Introduction aux frameworks CSS (Bootstrap, Tailwind CSS). - Avantages des préprocesseurs CSS (Sass, LESS). - Utilisation des outils pour améliorer le workflow CSS. #### Objectifs du cours : - Acquérir une compréhension approfondie des bases du CSS. - Apprendre à styliser des pages web pour qu'elles soient attrayantes et fonctionnelles. - Maîtriser les techniques de mise en page avancée et de design réactif. - Savoir appliquer des styles avancés et des animations pour améliorer l'interactivité. - Utiliser des frameworks et préprocesseurs CSS pour optimiser le développement.

Instructeur

Ligbo Ngangala

Catégorie :

Développeur Site Web

35 Étudiants Inscrit

Description
Curriculum
FAQ
Annonce
Examens

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu’il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l’écran ? Comment décorer ma page web avec une image ou une couleur d’arrière-plan ?

Donc, que sont les CSS, réellement ?

De la même façon que HTML, CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

p {
  color: red;
}
Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n’affectera pas l’affichage de la page HTML dans la navigateur (si vous n’avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l’article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l’élément head (c’est-à-dire entre les balises <head> et </head>) :

[/vc_column_text]

<link href="styles/style.css" rel="stylesheet" type="text/css">

Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :

Si le texte de votre paragraphe s’affiche en rouge, félicitations ! Vous venez d’écrire votre premier CSS fonctionnel !

Anatomie d’une règle CSS

Regardons un peu plus en détails ce que nous avons écrit en CSS :

Cette structure s’appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

Sélecteur: C’est le nom de l’élément HTML situé au début de l’ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l’occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
Déclaration: C’est une règle simple comme color: red; qui détermine les propriétés de l’élément que l’on veut mettre en forme.
Propriétés: Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
Valeur de la propriété: À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée (par exemple, il y a d’autres couleurs que red pour la propriété color).

Les autres éléments importants de la syntaxe sont :

chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades ({}).
pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.

Ainsi, si on veut modifier plusieurs propriétés d’un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

`p { color: red; width: 500px; border: 1px solid black; }`

Sélectionner plusieurs éléments

Il est aussi possible de sélectionner plusieurs types d’éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

p,li,h1 {

color: red;

}

Les différents types de sélecteurs

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n’avons vu que les sélecteurs d’élément qui permettent de sélectionner les éléments HTML d’un type donné dans un document HTML. Mais ce n’est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

Starting Course

After Intro

FAQ 1

Faq Content 1

FAQ 2

Faq Content 2

Productivity Hacks to Get More Done in 2018

— 28 February 2017

Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!

4.0

6 critiques

Please, login to leave a review

Étoiles 5

Étoiles 4

Étoiles 3

Étoiles 2

Étoiles 1