CSS Selectors : Review

Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let’s review what you learned:

  • CSS can select HTML elements by type, class, ID, and attribute.
  • All elements can be selected using the universal selector.
  • An element can have different states using the pseudo-class selector.
  • Multiple CSS classes can be applied to one HTML element.
  • Classes can be reusable, while IDs can only be used once.
  • IDs are more specific than classes, and classes are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector.
  • Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary.
  • Nested elements can be selected by separating selectors with a space.
  • Multiple unrelated selectors can receive the same styles by separating the selector names with commas.

Great work this lesson. With this knowledge, you’ll be able to use CSS to change the look and feel of websites to make them look great! 

Comments

Post a Comment

Popular posts from this blog

CSS Selectors : Chaining and specificity

SELECTORS Chaining and Specificity In the last exercise, instead of selecting all  <h5>  elements, you selected only the  <h5>  elements nested inside the  .description  elements. This CSS selector was more specific than writing only  h5 . Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector. For instance, consider the following CSS: p {    color : blue ; } .main p {    color : red ; } Both of these CSS rules define what a   <p>   element should look like. Since   .main p   has a class and a   p   type as its selector, only the   <p>   elements inside the   .main   element will appear   red . This occurs despite there being another more general rule that states   <p>   elements should be   blue . Instructions: 1. To show how specificity increases with additional selectors, let’s ...
Read more