CSS Basics: Using CSS Selectors

The proper use of CSS selectors is something you need to have a good working knowledge of to have full control over styling of your projects. This basic CSS tutorial explains how they work and give some good examples along the way.

CSS Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled. This lesson focuses on Type, Class and ID selectors, but there are more advanced ways to interact with selectors once you master these initial applications.

As with any document, you first need to link your CSS stylesheet to the HTML and it’s a best practice to have this placed in the header so the browser can load the styling progressively. To target a specific HTML element, you now need to use a selector in your CSS code to apply a style. For instance, if you wish to style an H1 header to be colored red your CSS would look something like this.

h1 {
    color: red;
}

Now if you want to style an ID rather than a Type, you will need to first use a # symbol before entering your selector into your code. For instance, if you need to style a specific paragraph to be colored differently than the rest of the paragraphs in your document, then your CSS would look something like this. (The word ‘paragraph’ is simply a placeholder in this example.)

#paragraph {
    color: blue;
}

And if you wish to style a Class you will need to use a . symbol before entering your class selector. So you need to keep in mind that the different kinds of CSS selectors also have their own identifying protocol to help tie them to the corresponding HTML elements. So when you want to style a specific text input class to have borders, for instance, your CSS may look something like this.

.input_text {
    border: 2px solid black;
}

Knowing how you are supposed to properly use selectors is the first step towards having your styling render the same universally. If this quick CSS tutorial helped you out, then you will probably also learn something helpful from this post on how to use CSS Shorthand in your projects. Thanks for stopping by!