Search⌘ K
Home
Courses
The Complete Advanced Guide to CSS

A Quick Look at CSS Selectors: Type Selectors

Explore foundational CSS selectors including type, class, and ID selectors to style HTML elements effectively. Learn how to group selectors for applying shared styles. Practice these selector basics to build solid CSS skills essential for responsive, maintainable web design.

We'll cover the following...

Take a look at the markup below:

HTML
<html>
  <head></head>
  <body>
    <h1> I am a header </h1>
    <p class="info">Some vital info</p>
    <p id="warning">Dont do this!</p>
    <p class="info">Some other vital info - really?</p>
    <p class="primary">Basic texts</p>
  </body>
</html>

What’s going on up there?

If you’ve written a lot of html, everything above should make some sense.

Some explanation wouldn’t hurt.

Here we go:

Line 4 basically adds an h1 header to the page.
Line 5 adds a paragraph with a class of info
Line 6 adds a paragraph too. This time, with an id of warning
Line 7 is pretty straightforward too. Can you figure that out? It says, "Add a paragraph with a class of info"
Line 8 also adds a paragraph to the page but with a class of primary

Now we are on the same page. At the end of this lesson ...