Skip to content

Basic selectors

We can [select] elements on the page (introduction.md # syntax) in many ways. However, the following four selectors are most commonly used:

  • HTML tag name
  • grade
  • object identifier
  • attribute value ([attr = value])

Tag selector

CSS allows you to select an HTML tag directly as a * selector *. The page element is selected after the HTML tag name.

For example, for the paragraph below:

<p>Sample text in paragraph.</p>

If we want to add a CSS rule using a selector, the name of the tag should be given after the tag name in the CSS code, and then the properties with values in the curly brackets. The following rule turns all the <p> tags red.

p {
    color: red;
}

Class selector

Each HTML tag can have a class attribute that takes the class name as its value. This class can have any name (chosen by us), e.g.:

<p class="some-paragraph">Sample text in paragraph.</p>

One tag can have many classes. In this case, they are separated by spaces, e.g.:

<p class="p1 p2">Paragraph with classes p1 and p2.</p>

Styling with class names is one of the most common ways to style HTML documents. We use this method when we want to give a given style to several elements, e.g.

<p class="text-elem">First paragraph.</p>
<p>Second paragraph.</p>
<span class="text-elem">First span.</span>
<span>Second span.</span>

In the situation as above, if we want to make the text red in the first paragraph and inside the first <span> tag, we can give them a class with the same name, and then assign the appropriate CSS rule, i.e.:

.text-elem {
    color: red;
}

In the CSS file, if we want to use a selector, after the class name, we first write dot and then immediately give the class name.

ID selector

Elements in an HTML document can also be selected by its identifier. Each element of an HTML document can have one, using the id attribute with unique value within the page.

<p id="first-paragraph">Sample text in paragraph.</p>

To select a tag after the identifier, use the `# 'sign and then immediately enter the name of the identifier, e.g.:

#first-paragraph {
  size: 2rem;
  color: blue;
}

Attribute selector

Elements that contain an attribute with a specific value can also be styled. Consider an input tag of the following form:

<input type="text">

If you want to style the above <input> with the type attribute with the valuetext, you should indicate the element and then inside the [ ] characters the attribute with its value, e.g .:

input[type="text"] {
  margin: 2px;
}

Combining selectors

CSS rules let you define a style for multiple selectors at once. For this purpose, selectors should be separated with commas, e.g .:

p, .button, #password-field, span {
    color: red;
}

Order and priority

In some cases there might be multiple CSS sources provided. Each of them might define different set of rules for some HTML element. In such case styles are applied in following order:

  1. Inline styles, i.e. rules in style attribute.
  2. Styles defined within HTML file, i.e. rules defined in <style> tag.
  3. Styles defined in external stylesheets (i.e. files pointed in <link> tag and rel="stylesheet" attribute.
  4. Browser defaults.

CSS rules are usually defined in external stylesheets. However, such external file might define multiple rules which can point to the same element. In such case following priority is applied:

  1. element's identifier
  2. element's class
  3. tag name

For example, following element:

<p id="p1" class="blue-font">Hi</p>

defined in HTML file which is using following external CSS file:

#p1 {
  color: red
}

.red-font {
  color: blue
}

p {
  color: yellow;
}

will use a red font.