Link Search Menu Expand Document

How to Use CSS Selectors

CSS Selectors are used to specifying HTML element(s) for styling. Different selectors can be used differently to style elements in your HTML page. Let’s see how.

CSS Element Selector

CSS element type selector designates elements based on their names. Suppose an HTML element with name p, and then the element type selector will specify all the elements with name p. This is how it works:

/* selecting all p elements */
p {
    text-align: center;
    color: blue;
}

So, now all the HTML elements with name <p> will be styled according to just one command code.

CSS id Selector

Id type selector style the HTML element with common id as of selector. This method of selection for styling is unique for every element as every element has its unit id. Id type Selector uses # (hash) character followed by the value of id attribute of the element for command code. This is how it works:

#Name {
    Color: green;
}

So, the element with id attribute=’Name’ will be styled in the color green in the document. Remember, every element should have its unique id attribute.

CSS Class Selector

The Class type selector specifies and applies style rules based on the class attribute of the HTML element. All the elements under the same class will be styled according to the same set of rules. It is defined by. (Period) character followed by the value of the class attribute. This is how it works:

. Image {
    color: orange;
    Length: 10px;
    Breathe 12px;
    Border-radius: 5px;
}

So all the elements under class=’Image’ will be styled under the above rules. You can make it more specific by specifying element names too. For example:

p . Image {
    color: orange;
    Length: 10px;
    Breathe 12px;
    Border-radius: 5px;
}

So elements of name <p> and class=’image’ will be styled and selected according to the above rules.

CSS Universal Selector

The Universal type selector is represented by (*). It specifies all elements in the HTML document and is usually used for consistent margin and padding throughout the document. This is how it works:

* {
    margin: 0;
    padding: 0;
}

In this way, all the margin and padding throughout the document will be zeroed out.

CSS Group Selector

In the Grouping type selector, it groups the selectors for HTML elements with the same style. It simplifies the HTML document. This is how it works: Suppose we have three elements h1, H2, and h3 with CSS code as:

h1 {
    text-align: center;
    letter-spacing: 3px;
    font-size: 20px;
}
h2 {
    text-align: center;
    letter-spacing: 3px;
    font-size: 30px;
}
h3 {
    text-align: center;
    letter-spacing: 3px;
    font-size: 40px;
}

The style rules for all three elements are the same so they can be grouped as selectors with a comma like this:

h1, h2, h3 {
    text-align: center;
    letter-spacing: 3px;
}
h1 {
    font-size: 20px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 40px;
}

Similarly, you can group elements, id, class, or any CSS Selectors.

Other useful articles:


Back to top

© , Learn CSS 101 — All Rights Reserved - Terms of Use - Privacy Policy