Une question que l’on me pose souvent: c’est quoi le CSS? Qu’est-ce que cela veut dire? A quoi ça sert? J’ai décidé aujourd’hui de reprendre 20 questions et d’y répondre à ma façon.

1. C’est quoi le CSS?

Le CSS (Cascading Style Sheet) est un langage informatique servant à décrire la présentation et le style d’un document HTML et XML. Datant des années 90, ce langage sert principalement au développement de sites web.

2. Comment le reconnaître?

Contrairement à l’HTML qui se reconnaît avec ses balises d’ouverture et de fermeture, le CSS lui, se reconnaît simplement avec un point précédant ses classes, une accolade précédant ses propriétés et un double-point précédant ses valeurs. On peut ainsi différencier un <div> d’un .body { color:black; }.

3. Qu’est-ce qu’une classe?

Une classe est un attribut appliqué à un groupe d’élément HTML. Par exemple, un <div class= »container »> est une boîte de type container. Ainsi l’on peut attribuer des propriétés à la classe dans le fichier CSS.

4. Qu’est-ce qu’un ID?

Un ID est un attribut appliqué à un élément précis. Une classe touche un groupe d’élément tandis qu’un ID touche un élément en particulier.

5. A quoi sert une propriété?

Une propriété CSS permet de définir un élément HTML. Par exemple, la largeur (width), la hauteur (height), la couleur (color)…

6. Qu’est-ce qu’une pseudo-classe et à quoi ça sert?

Une pseudo classe sert à définir le style d’une fonction en particulier. Par exemple: a:hover { color:blue; }. a est la balise HTML du lien et hover, l’action qui découle lorsque l’on passe la souris sur ce lien. Les pseudo-éléments, quant à eux, sont utilisés pour ajouter des effets spéciaux aux sélecteurs. On les reconnaît au double-point (::) suivi du pseudo-élément.

7. Quels sont les trois moyens d’appliquer le CSS à une feuille HTML?

8. Qu’est-ce que le grouping et à quoi ça sert?

Le grouping sert à appliquer le même style à plusieurs éléments en même temps.

9. Qu’est-ce qu’un sélecteur Child?

Les sélecteurs Child sont une autre façon de grouper et de styliser un groupe d’élément descendants d’un groupe parent. Par exemple: body > p {…} définira tous les paragraphes dans body.

10. Qu’est-ce que la propriété float?

La propriété float permet d’aligner un élément à droite ou a gauche et autorise le reste du contenu à se coller à lui. Float s’oppose à block.

11. Qu’est-ce qu’un CDN?

Un Content Delivery Network (CDN) est un réseau d’ordinateurs reliés qui coopèrent afin de mettre à disposition du contenu ou des données (généralement du contenu multimédia volumineux) à des utilisateurs. Ainsi, en développement web, le CDN permet de délivrer des feuilles de style préconçues comme Bootstrap, facilitant le travail des développeurs.

12. Qu’est que la propriété Display?

Le display est une propriété CSS qui détermine la façon dont se comporte un élément. Est-il en ligne? Séparé? En tableau? Néanmoins, c’est une propriété qu’il faut user avec précaution.

13. Qu’est-ce que la valeur Block?

La valeur Block est en lien avec la propriété Display et verrouille un élément HTML sur toute la largeur (contrairement au float qui le libère).

14. Qu’est-ce que la valeur Inline?

La valeur Inline se limite à la place prise par l’élément en lui-même et s’aligne sur les autres éléments. Toutefois, elle n’accepte ni largeur, ni hauteur.

15. Qu’est-ce que le z-index?

La propriété z-index détermine la position d’un élément sur un autre. Par exemple, deux divisions sont superposées. La première a la propriété z-index:2, et la seconde a la propriété z-index:1. C’est la première qui apparaît et non la seconde. C’est l’élément qui aura le z-index le plus élevé qui écrasera les autres.

16. Une liste de valeurs CSS à connaître absolument?

Il faut toutes les connaître. Préférablement. Mais d’abord, les plus importants sont selon moi margin, padding, width, height, display, font, background, border, outline, z-index…

17. Quelle différence entre visibilité:hidden et display:none?

Le premier cache simplement un élément tandis que le second le fait disparaître de l’architecture.

18. Qu’est-ce que le flex?

Le flex est un mode de mise en page très intuitif qui permet au développeur d’aller plus rapidement lors de l’intégration d’un site.

19. Qu’est-ce que SASS, Compass, Stylus, LESS?

Ce sont des préprocesseurs permettant d’optimiser l’écriture CSS. Vous pouvez ainsi rédiger des propriétés dans d’autres, inclure des variables et des mixins (valeur générale), créer des fonctions mathématiques et opérationnelles ainsi que joindre des fichiers dans un seul.

20. Si je devais résumer en une phrase?

Le CSS est un langage qui permet de styliser une page HTML à l’aide d’un sélecteur, d’une propriété et d’une valeur.

Voilà, j’espère que ces 20 questions auxquelles j’ai répondu brièvement vous auront plu et auront répondu à la question « C’est quoi le CSS ». Toutefois, je tiens à rappeler que ces réponses sont les miennes et chacun pourrait répondre à sa façon.

>> Voici 5 erreurs courantes chez les créateurs d’entreprises.

Guillaume Duhan

Partagez cet articleShare on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest2Share on LinkedIn1Email this to someonePrint this page

12 septembre 2017