CSS Class Selectors.

 SELECTORS

CSS is not limited to selecting elements by their type. As you know, HTML elements can also have attributes. When working with HTML and CSS a class attribute is one of the most common ways to select an element.

For example, consider the following HTML:

<p class='brand'>Sole Shoe Company</p>

The paragraph element in the example above has a class attribute within the opening tag of the<p> element. The class attribute is set to 'brand'. To select this element using CSS, we can create a ruleset with a class selector of .brand.

.brand {
 
}

To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name. In the example above, the class is brand, so the CSS selector for it is .brand.

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