Top 50 des questions et réponses d'entretien CSS (2024)

Voici les questions et réponses d'entretien CSS (CSS3) pour les débutants ainsi que les candidats expérimentés pour obtenir l'emploi de leurs rêves.

Téléchargement gratuit du PDF : Questions d'entretien CSS

1. Qu'est-ce que CSS ?

La forme complète de CSS est Feuilles de style en cascade. C'est un langage de style assez simple pour HTML éléments. Il est populaire dans la conception Web et son application est également courante dans XHTML.


2. Quelle est l'origine du CSS ?

Le langage de balisage généralisé standard a marqué le début des feuilles de style dans les années 1980.


3. Quelles sont les différentes variantes de CSS ?

Les variantes pour CSS sont :

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4

4. Quelles sont les limites du CSS ?

Les limites sont :

  •  L'ascension par les sélecteurs n'est pas possible
  • Limites du contrôle vertical
  • Aucune expression
  • Pas de déclaration de colonne
  • Pseudo-classe non contrôlée par un comportement dynamique
  • Règles, styles, ciblage de texte spécifique impossible

5. Quels sont les avantages du CSS ?

Les avantages sont:

  • Bande passante
  • Cohérence à l'échelle du site
  • Reformatage des pages
  • Accessibilité
  • Contenu séparé de la présentation

6. Que sont les frameworks CSS ?

Il s'agit d'une bibliothèque pré-planifiée, qui permet un style de page Web plus facile et plus conforme aux normes, en utilisant le langage CSS.

Questions d'entretien chez CSS
Questions d'entretien CSS3

7. Comment les éléments de bloc peuvent-ils être centrés avec CSS1 ?

Les éléments de niveau bloc peuvent être centrés par :

Les propriétés margin-left et margin-right peuvent être définies sur une valeur explicite :

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

Dans ce cas, les marges gauche et droite auront chacune une largeur de cinq ems puisqu'elles séparent les dix ems restants de (40em-30em). Il n'était pas nécessaire de définir une largeur explicite pour l'élément BODY ; cela a été fait ici pour plus de simplicité.


8. Qui maintient les spécifications CSS ?

Le World Wide Web Consortium maintient les spécifications CSS.

Questions d'entretien CSS3
Questions d'entretien CSS3

9. De combien de manières un CSS peut-il être intégré en tant que page Web ?

CSS peut être intégré de trois manières :

  • Inline : l'attribut Style peut être utilisé pour appliquer des éléments HTML CSS.
  • Intégré : l'élément Head peut avoir un élément Style dans lequel le code peut être placé.
  • Lié/Importé : le CSS peut être placé dans un fichier externe et lié via un élément de lien.

10. Quels sont les avantages et les inconvénients des feuilles de style externes ?

Avantages :

  • Un fichier peut être utilisé pour contrôler plusieurs documents ayant des styles différents.
  • Plusieurs éléments HTML peuvent avoir de nombreux documents, qui peuvent avoir des classes.
  • Pour regrouper les styles dans des situations composites, des méthodes telles que le sélecteur et le regroupement sont utilisées.

Demerits:

  • Un téléchargement supplémentaire est nécessaire pour importer des documents contenant des informations de style.
  • Pour rendre le document, la feuille de style externe doit être chargée.
  • Pas pratique pour les petites définitions de style.

11. Discuter des avantages et des inconvénients des feuilles de style intégrées ?

Avantages des feuilles de style intégrées :

  • Plusieurs types de balises peuvent être créés dans un seul document.
  • Les styles, dans des situations complexes, peuvent être appliqués à l'aide des méthodes de sélection et de regroupement.
  • Le téléchargement supplémentaire est inutile.

Inconvénients des feuilles de style intégrées :

  • Plusieurs documents ne peuvent pas être contrôlés.

12. Que signifie sélecteur CSS ?

Une chaîne équivalente d'éléments HTML par lesquels des déclarations ou un ensemble de celles-ci sont déclarées et est un lien qui peut être référencé pour lier HTML et feuille de style est un sélecteur CSS.


13. Enrôlez-vous les types de médias autorisés par CSS ?

La conception et la personnalisation des documents sont rendues par les médias. En appliquant un contrôle multimédia sur les feuilles de style externes, elles peuvent être récupérées et utilisées en les chargeant depuis le réseau.


14. Différencier les balises logiques des balises physiques ?

  • Alors que les balises physiques sont également appelées balisage de présentation, les balises logiques sont inutiles pour les apparences.
  • Les balises physiques sont des versions plus récentes tandis que les balises logiques sont anciennes et se concentrent sur le contenu.

15. Différencier le concept de feuille de style du HTML ?

Bien que HTML fournisse une méthode de structure simple, il manque de style, contrairement aux feuilles de style. De plus, les feuilles de style ont de meilleures capacités de navigateur et des options de formatage.


16. Décrivez « ensemble de règles » ?

Ensemble de règles : les sélecteurs peuvent être attachés à d'autres sélecteurs pour être identifiés par l'ensemble de règles.

Il comporte deux parties :

  • Sélecteur, par exemple R et
  • déclaration {text-indent : 11pt}

17. Commentaire sur la sensibilité à la casse de CSS ?

Bien qu'il n'y ait pas de sensibilité à la casse du CSS, néanmoins les familles de polices, les URL des images, etc. Seulement quand XML déclarations avec XHTML DOCTYPE sont utilisées sur la page, CSS est sensible à la casse.


18. Définir le bloc de déclaration ?

Un catalogue de directions entre accolades composé d'une propriété, de deux-points et d'une valeur est appelé bloc de déclaration.
ex : [propriété 1 : valeur 3]


19. Enrôlez les attributs des différentes polices ?

Ils sont les suivants:

  • Le style de police
  • Variante de police
  • Police de poids
  • Taille de police/hauteur de ligne
  • Famille de polices
  • Légende
  • Icône

 


20. Pourquoi est-il facile d'insérer un fichier en l'important ?

L'import permet de combiner des folios externes à insérer dans plusieurs folios. Différents fichiers et feuilles peuvent être utilisés pour avoir différentes fonctions. Syntaxe:

Notation @import, utilisée avec tag.


21. À quoi sert le sélecteur de classe ?

Les sélecteurs propres à un style spécifique sont appelés sélecteurs CLASS. La déclaration de style et l'association avec HTML peuvent être faites à travers cela. Syntaxe:

Nom du cours
il peut s'agir de AZ, az ou chiffres.
.top {font: 14em ;}, sélecteur de classe
cette classe est associée à l'élément


22. Différencier le sélecteur de classe du sélecteur d'ID ?

Alors qu'un bloc global est donné au sélecteur de classe, le sélecteur d'ID ne préfère qu'un seul élément différent des autres éléments. En d'autres termes, les identifiants sont uniques alors que les classes ne le sont pas. Il est possible qu'un élément ait à la fois une classe et un ID.


23. Peut-on ajouter plus d'une déclaration en CSS ?

Oui, cela peut être réalisé en utilisant un point-virgule.


24. Qu'est-ce que les pseudo-éléments ?

Les pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs. CSS est utilisé pour appliquer des styles dans le balisage HTML. Dans certains cas, lorsqu'un balisage ou un style supplémentaire n'est pas possible pour le document, une fonctionnalité CSS est disponible sous le nom de pseudo-éléments. Cela permettra un balisage supplémentaire sur le document sans perturber le document lui-même.


25. Comment annuler le soulignement des hyperliens ?

Les instructions de contrôle et les feuilles de style externes sont utilisées pour annuler le soulignement des hyperliens.

Par exemple:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 


26. Que se passe-t-il si une largeur de 100 % est utilisée avec des éléments flottants sur toute la page ?

Lors de la déclaration de float, 1 pixel est ajouté à chaque fois qu'il est utilisé sous la forme de la bordure, et encore plus de float est autorisé par la suite.


27. La valeur de propriété par défaut peut-elle être restaurée via CSS ? Si oui, comment ?

En CSS, vous ne pouvez pas revenir aux anciennes valeurs en raison du manque de valeurs par défaut. La propriété peut être déclarée à nouveau pour obtenir la propriété par défaut.


28. Enrôler les différents types de médias utilisés ?

Différents supports ont des propriétés différentes car ils sont insensibles à la casse.

Ils sont les suivants:

  • Aural - pour les synthétiseurs sonores et la parole
  • Imprimer – donne un aperçu du contenu lors de l'impression
  • Projection- projette le CSS sur les projecteurs.
  • Ordinateur de poche - utilise des appareils portables.
  • Écran - ordinateurs et écrans d'ordinateurs portables.

29. Qu'est-ce que CSS Box Model et quels sont ses éléments ?

Cette boîte définit la conception et la disposition des éléments de CSS. Les éléments sont :

Marge: la couche la plus haute, la structure globale est affichée
Frontière: l'option de rembourrage et de contenu entourée d'une bordure s'affiche. La couleur d'arrière-plan affecte la bordure.
Rembourrage: L'espace est affiché. La couleur d'arrière-plan affecte la bordure.
Contenu: Le contenu réel est affiché.


30. Qu'est-ce qu'un sélecteur contextuel ?

Le sélecteur utilisé pour sélectionner des occurrences spéciales d'un élément est appelé sélecteur contextuel. Un espace sépare les sélecteurs individuels. Seul le dernier élément du motif est adressé dans ce genre de sélecteur. Par exemple : TD P TEXT {couleur : bleu}


31. Comparez les valeurs RVB avec les codes de couleur hexadécimaux ?

Une couleur peut être spécifiée de deux manières :

  • Une couleur est représentée par 6 caractères soit un code couleur hexadécimal. C'est une combinaison de chiffres et de lettres et est précédé de #. par exemple : g {couleur : #00cjfi}
  • Une couleur est représentée par un mélange de rouge, de vert et de bleu. La valeur d'une couleur peut également être spécifiée. par exemple : rgb(r,g,b) : Dans ce type, les valeurs peuvent être comprises entre les nombres entiers 0 et 255. rgb(r%,g%,b%) : les pourcentages de rouge, vert et bleu sont affichés.

32. Définir les sprites d'image avec le contexte CSS ?

Lorsqu'un ensemble d'images est regroupé en une seule image, on l'appelle 'Image Sprites'. Comme le chargement de chaque image sur une page Web prend du temps, l'utilisation de sprites d'image réduit le temps nécessaire et donne des informations rapidement.

Codage CSS :

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

Dans ce cas, seule la pièce nécessaire est utilisée. L'utilisateur peut ainsi économiser une marge et un temps substantiels.


33. Comparer le regroupement et l'imbrication en CSS ?

Regroupement : les sélecteurs peuvent être regroupés en ayant les mêmes valeurs de propriété et le code peut être réduit.
Par exemple :

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

On peut voir à partir du code que chaque élément partage la même propriété. La réécriture peut être évitée en écrivant chaque sélecteur séparé par une virgule.

Imbrication : la spécification d'un sélecteur dans un sélecteur s'appelle l'imbrication.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 


34. Comment définir la dimension d'un élément ?

Les propriétés de dimension peuvent être définies par :

  • Hauteur
  • Hauteur maximum
  • Largeur maximale
  • Hauteur min
  • Min-largeur
  • Largeur

35. Définir la propriété flottante de CSS ?

Par la propriété float, l'image peut être déplacée vers la droite ou vers la gauche avec le texte qui l'entoure. Les éléments avant l'application de cette propriété ne changent pas leurs propriétés.


36. Comment fonctionne l'index Z ?

Un chevauchement peut se produire lors de l'utilisation de CSS pour positionner des éléments HTML. L'index Z aide à spécifier l'élément qui se chevauche. C'est un nombre qui peut être positif ou négatif, la valeur par défaut étant zéro.


37. Qu'est-ce que la dégradation gracieuse ?

En cas de défaillance du composant, il continuera à fonctionner correctement en présence d'une dégradation progressive. La dernière application de navigateur est utilisée lors de la conception d'une page Web. Comme il n'est pas disponible pour tout le monde, il existe une fonctionnalité de base, qui permet son utilisation à un public plus large. Si l'image n'est pas disponible pour la visualisation, le texte est affiché avec la balise alt.


38. Qu'est-ce que l'amélioration progressive ?

C'est une alternative à la dégradation gracieuse, qui se concentre sur la matière du web. La fonctionnalité est la même, mais elle offre un avantage supplémentaire aux utilisateurs disposant de la dernière bande passante. Il a été largement utilisé récemment avec les connexions Internet mobiles élargissant leur base.


39. Comment la rétrocompatibilité peut-elle être conçue en CSS ?

Les méthodes de feuille HTML sont collaborées avec CSS et utilisées en conséquence.


40. Comment supprimer l'espace sous l'image ?

Comme les images étant des éléments en ligne sont traitées de la même manière que les textes, il reste donc un espace qui peut être supprimé en :

CSS

img { display: block ; }

 


41. Pourquoi @import est-il uniquement en haut ?

@import est préféré uniquement en haut, pour éviter toute règle prioritaire. Généralement, l'ordre de classement est suivi dans la plupart des langages de programmation tels que Java, Modula, etc. En C, le # est un exemple frappant d'un @import en haut.


42. Lequel parmi les suivants est le plus précédent : les propriétés CSS ou les procédures HTML ?

CSS est plus précédent que les procédures HTML. Les navigateurs, qui ne prennent pas en charge CSS, affichent des attributs HTML.


43. Qu'est-ce que le style Inline ?

Le style Inline dans un CSS est utilisé pour ajouter un style à des éléments HTML individuels.


44. Comment ajouter des commentaires en CSS ?

Les commentaires en CSS peuvent être ajoutés avec /* et */.


45. Définir le sélecteur d'attribut ?

Il est défini par un ensemble d'éléments, la valeur et ses parties.


46. ​​Définir la propriété ?

Un style qui aide à influencer le CSS. Par exemple POLICE. Ils ont des valeurs ou des propriétés correspondantes en leur sein, comme FONT a un style différent comme le gras, l'italique, etc.


47. Qu'est-ce qu'une feuille de style alternative ?

Les feuilles de style alternatives permettent à l'utilisateur de sélectionner le style d'affichage de la page à l'aide du menu Affichage>Style de page. Grâce à la feuille de style alternative, l'utilisateur peut voir une version multiple de la page selon ses besoins et ses préférences.


48. Les guillemets sont-ils obligatoires dans les URL ?

Les guillemets sont facultatifs dans les URL et peuvent être simples ou doubles.


49. Qu'est-ce qu'une règle ?

La règle, qui s'applique à l'ensemble de la feuille et non en partie, est appelée règle-à. Il est précédé de @ suivi de AZ, az ou 0-9.


50. Comment le CSS peut-il être mis en cascade pour se mélanger avec la feuille personnelle de l'utilisateur ?

Les propriétés peuvent être un ensemble dans les endroits recommandés et le document modifié pour que CSS se mélange avec la feuille personnelle de l'utilisateur.

Ces questions d'entretien vous aideront également dans votre soutenance (orale). Dans tous les secteurs, l'utilisation de sites Web et d'applications Web augmente de jour en jour, et le CSS est un élément essentiel pour créer des sites Web attrayants. Il y a donc une énorme demande pour les concepteurs UI/UX et Web ayant une bonne connaissance de CSS avec HTML.

Partager

10 Commentaires

  1. informations incomplètes si vous allez donner une réponse, précisez-les. Ce genre de questions posées par l'intervieweur !!.

  2. Avatar Kavana Shiva Kumar dit:

    Merci informations très utiles

  3. Toutes les questions théoriques auraient été préférables si vous pouviez également fournir quelques questions pratiques basées sur des exemples.

  4. Avatar Technophile dit:

    La réponse ci-dessous est incomplète
    "22. Différencier le sélecteur de classe du sélecteur d'ID ?
    Alors qu'un bloc global est donné au sélecteur de classe, le sélecteur d'ID ne préfère qu'un seul élément différent des autres éléments.

    J'apprécie le grand effort.

    Merci

  5. Super article! Passez une bonne journée ! :)

  6. Veuillez définir le flotteur, l'image en mouvement d'arrière-plan et regarder l'élément tAg du clip en CSS.
    Merci
    Par ashish

  7. Merci d'avoir cisaillé, c'est génial.Veuillez écrire plus sur ces sujets..

    1. Bonjour monsieur, mon serveur live ne fonctionne pas bien. Je clique sur le bouton "Exécuter" pour travailler sur mon projet et cela fonctionne. Le principal problème est que si je change quelque chose dans les balises ou les mots, je ne peux pas exécuter mon projet. Seulement si J'arrête ce serveur en direct et je l'exécute, cela fonctionne à nouveau. Je ne sais pas comment gérer cela. Si vous avez le temps, répondez à ma question, merci.

  8. Avatar Abhijeet Sapkale dit:

    Merci beaucoup pour votre excellent question

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *