CSS Selector Guide: The Basics

Posted on August 28, 2018 | Updated on November 14, 2022

This post is the first in a series of articles on CSS, or cascading stylesheets. CSS is exactly what it sounds like: You create a style and it cascades into pages on your site. It allows you to control more than a single page at one time, making all of them meet a specific set of design elements. There are many benefits to using a CSS selector to detail your web page’s markup language.

You essentially create a map the HTML pulls from, without having to write lengthy code from scratch or go look up what coding you used previously. Think of CSS as a list of present factors, such as color, font style and even layout. Not only does it make it easier to maintain your sites, but it ensures your site remains consistent throughout.

The basics of CSS are fairly simple to learn. You’ll need to memorize some specific markups or CSS selector choices to use it effectively and save time in your designs. The actual language of the CSS is a bit more advanced, so for this article, we’ll focus on the basic selectors that are best to memorize first. Once you understand the basics, it’s time to learn more advanced methods.

1. CSS Basics

You must first master several base selectors to use CSS effectively. Let’s assume you’ve grabbed CSS code from a theme or you’ve had someone write it for you, because learning how to write CSS from scratch is a bit more complicated than informing your HTML page to use CSS. Probably the best way to learn is by diving into some simple language and CSS selector choices. We’ll look at some of the more common types of selectors below.

CSS has its own syntax. In a nutshell, there is a selector that points to the HTML element you want to tell the page how to style. So, your selector might be for the h1 header, and your declaration is for the font size of the header (font-size:14px;). You’ll need to use a semicolon to separate multiple declarations. So, a declaration block might look like this:

h1 {color:red; font-size:14px;}

Note that the declaration or set of declarations always starts and ends with a curly bracket. If you miss any of these elements, the coding won’t work properly.

2. Element Selector

An element selector makes all the elements on a page consistent. For example, if you want to left-align everything within a paragraph element, you can use this language:

p {

text-align: left;

}

Anything in a paragraph on the page will now be left-aligned because you’ve chosen the paragraph as your selector, then you’ve defined what you want it to do.

3. ID Selector

Using ID selectors allows you to get into some specific commands you’ve written into your CSS stylesheet. It’s a real time-saver for most designers, so it’s something you should learn early on. With an ID selector, you are going to select one specific element on the page, instead of the entire page. So, you might choose to make the first paragraph of every page centered instead of left-aligned. In your stylesheet, you will first define what paragraph one is, assuming it’s not pre-defined for you. Now, you will write something like this to select that ID:

#para1 {

text-align: center;

}

Now, the first paragraph will be centered, and the rest of the page left-aligned. The ID selector helps you create a specific style that can carry over to every post on your site, for example.

4. Class Selector

Class allows you to define how specific elements act, such as if you center-align text and you want it to be blue or in italics. You’ll handle these a bit differently, in that you’re going to use the name of the class, but you’re going to add a period to the front of it. So, if you want to define a paragraph of centered text, you might write: .center, for example.

Let’s say you want all the centered text to be blue, and you’ve defined the blue in your stylesheet already. You can then just write something like this:

.center {

text-align: center;

color: blue;

}

Now, any centered text on that page will be blue, instead of your default color.

5. Adding Comments

Taking notes on why you’ve made the changes you’ve made can be particularly helpful if you work with a team of designers. You can add notes to your CSS coding, and they will remain hidden to all but those reading the code. To add a note, you need to put it inside /* and */.

Example: /* Blue to match the color scheme of brand. Do not change without permission. */

Within an overall coding structure, it might look like this:

p {

text-align: center;

/* Text changed to blue to match color of logo. Do not change without permission. */

color: blue;

}

The note doesn’t change the commands the webpage reads and shows to the user. It just shows anyone going in to change the text from blue to another color that it is blue for a reason, and to make sure you are supposed to change it before doing so. Add any type of note you’d like, but keep to one line if at all possible.

CSS Takes Many Lessons to Learn

Keep in mind, this article is the first in a series of lessons on CSS. The bare basics will get you started and allow you to create seamless designs that are faster and easier to put together. Once you learn the more involved parts of CSS coding, however, you will have a lot more flexibility to change stylesheets and create websites that are completely customized in every aspect.

Related Posts

About The Author

Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.

You can find more of Eleanor's work at www.eleanorhecks.com.

Leave a Comment