A Quick Look at CSS Selectors: Type Selectors

We will put together all we've learned so far to build something cool. Well, not particularly cool, but a good step in the direction of building some more amazing things.

Take a look at the markup below:

Press + to interact
<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 ...

Get hands-on with 1400+ tech skills courses.