03. Basic Selectors

Selectors give you the power to pick and choose which elements to style. There are nearly 30 different selectors to use - that's a lot of power! Remember that CSS selectors are case sensitive, so they must match the names and values exactly.

Let's start with some of the most basic selectors.

Type (or Element) selectors

Type selectors specify HTML tags that you can grab right from an HTML document. Simply choose the name of the HTML tag to change its style.

h1 {
  color: red;
}

This selects all text within <h1> tags and sets the font color to red.

To apply multiple type selectors in one go, we can group the elements together with a comma.

h2, p {
  color: blue;
}

This would take all text within <h2> and <p> tags and set its color to blue. This is also known as grouping.

Class selectors

Within the HTML tag, we can specify a class selector with the class HTML attribute.

<span class="intro">This is my introduction.</span>

The value is whatever you'd like to name that class. Inside your CSS style sheet, select the class by preceding its name with a period (.). To target all class attribute with value of "intro":

.intro {
  text-decoration: underline; 
}

We can be more specific and combine tag and class selectors, giving more specificity. To target only <p> elements with class "intro":

p.intro {
  color: red;
}

This will take elements such as:

<p class="intro">I'm selected!</p>

ID selectors

You may also specify an id instead of a class. The only difference is that multiple elements can share the same class, but only one element can have a specified ID. This means that you will only be specifying a single element with an ID selector.

<p id="subheading">I'm selected!</p>

To select an element based on its ID, precede its name with a hash (#). For example, to target an element with the ID "outro":

#outro {
  font-weight: bold;
}

Universal Selectors

Universal selectors are used to target every element. This is denoted by the asterik (*). To select all elements on the document,

* {
  color: red;
}

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Ad