Top 4 Most Common CSS Selectors

CSS Selectors

Once you’ve built an HTML file with some divs, classes, ids, etc you’ll want to modify them in your stylesheet with CSS Selectors! Head over to your CSS stylesheetand let’s get to styling! To start, you have to indicate to your CSS stylesheet what element you want to style. There are different ways to indicate or select a specific element by its id, class or element type. 

Let’s take a look at how it’s done!

HTML File:

Here we have an HTML file with some h1, h2, h3 elements, as well as id’s, classes and p tags. We also have an excessive amount of love for my Maltese(his name is Chris) but I digress.

When rendered on my browser without any styling, it looks like this:

Let’s spice it up a bit with some styling!

Class

To start styling, we will head over to the CSS stylesheet you have linked to your HTML file. Then, we will indicate or select the class you are about to modify.

class is selected with a ‘.’ before the class name.

Le Example:

Class Selector

With .paragraph, I’ve indicated to my CSS stylesheet that I am styling any class with the name “paragraph”. I then added a font-size of 16px, font-family of Arial and aligned the text to the center. When rendered, all class=”paragraph” will have this styling.

Check it out:

Class Selector Example

Id

Next, to style an individual id, you’ll use ‘#’ before the name of the id.

Le Example:

IdSelectors

I’ve indicated that I’m styling id=”Animals”, id=”Dogs”, id=”Maltese” with #Animals, #Dogs and #Maltese. I added a different color to each id to make the individual styling easier to see!

Check it out:

IdSelectorRender

Element

To style an entire element you won’t need any indicators:

  • paragraphs
  • divs
  • headings
  • etc

You can simply type the element into your CSS stylesheet to style it!

Le Example:

element selectors

You’ll notice I didn’t have to include any symbols in front of h1-h3, neat, huh?! I’ve aligned each heading to the center of the page, and have given each one a different font-family!

For more help with headings, check out my tutorial on Styling Headings 1-6!

When rendered, my page will look like this:

Two Elements

Lastly, if you know that more than one of your elements, id’s and/or classes will have the same styling, you can style two or more at once! You heard me right! Lazy/efficient people rejoice! When styling two or more elements, you simply need to separate them with a ‘,’ .

Le Example:

Two Selectors Use a Comma

I styled both #Animals and #Dogs with a font-weight of 900. This font-weight makes the text super bold!

Check it out:

Two Selectors Render

And there you have it! The Top 4 Most Common CSS Selectors!

There are many other selectors for your CSS Stylesheet, but these are definitely the most common! Stay tuned for a more advanced CSS Selector tutorial!

Bonus: CSS Selector Cheat Sheet!

CSS Selectors
Screenshot Me!

Subscribe to Tech Talk Code for monthly post updates!

Leave a Comment!