CSS Important Question Answer for Interview

CSS Important Question Answer

What is grouping and what is it used for?

• Grouping allows you to apply the same style to multiple elements with a single declaration. This is done by grouping the selectors into a list, separated by commas.

e.g.)  h1, h2  { font-family: Helvetica; font-size: 20; }

• Grouping helps memory usage and enhances readability.

What is an ID selector and how is it used?

• IDs are used to identify and apply styling to a single specific HTML element. IDs are defined within the HTML page by inserting an ID selector in the HTML element:
  • eg)

• ID selectors are defined within the CSS page by calling a ‘#’ followed by the name of the ID:
  • eg)

• ID selectors are unique and can only be applied to a single element.

What is a Class selector and how does it differ from an ID selector?

• Class selectors are used to apply style to multiple HTML identified with the same class.

• Within the HTML doc:

• e.g.)

• Class selectors are called within the CSS document by a ‘.’, followed by the class name:

• Within the CSS doc:
  • e.g.)

• The main difference is that the same class selector can be applied to multiple HTML elements, whereas ID selectors are unique..

What are child selectors?

• Child selectors are another way to group and style a set of elements that descend from a parent element.
• A child selector is matched by calling two or more elements, separated by a ‘>’ sign to indicate inheritance.

e.g.)

• In this example, the same styling would be applied to all paragraphs within the body.

What are the different CSS properties used to change dimensions and what values can they accept?

• height: Sets a specific height
  • auto
  • length
  • %
  • inherit
• width: Sets a specific width
  • auto
  • length
  • %
  • inherit
• max-height: Sets a maximum height
  • auto
  • length
  • %
  • inherit
• max-width: Sets a maximum width
  • auto
  • length
  • %
  • inherit
• min-height: Sets a minimum height
  • auto
  • length
  • %
  • inherit
• min-width: Sets a minimum width
  • auto
  • length
  • %
  • inherit