CSS Selectors


Premium Content - Free Preview

In CSS, there are many ways to specify the items you want to apply a style to.

HTML Elements

You can specify a specific HTML element, such as p, h1, or table.

p { color: green; }

The above rule sets all paragraphs to a green color.

h1 { font-size: 4em; }

This sets all <h1> elements to 4em (a large size!).

Classes

Often you want to customize the look of specific paragraphs without changing every paragraph. For example, in the online store, you may want to emphasize certain paragraphs more than other ones. Using p as a selector would select All paragraphs, but we need a way to only select the elements we want.

You can do this with the class attributes. Mark the HTML element you want to customize with a class:

<p class="emphasis">You will be able to buy great things here.</p>

This is similar to inserting an inline style in Where is CSS, but this time we'll move the actual CSS outside the HTML.

Next, create a CSS rule for the class emphasis. CSS class selectors are marked with a period, as in .className:

.emphasis {
  color: darkgreen;
  font-style: italic;     
}

This will make your previous paragraph look like this:


End of Free Content Preview. Please Sign in or Sign up to buy premium content.

Contact Us
Sign in or email us at [email protected]