HTML Tutorials


Type Selector

When writing CSS, you don't have to specify a class. In fact, you can modify all of the HTML tags of a specific type by using a type selector. Type selectors will change every instance of a paragraph <p> to have a red text color if you specify p { color: blue } in your CSS.

Some type selectors have "pseudo-classes." A pseudo-class is tied to a type selector, and unlike regular classes they are usually defined for you. The syntax of a pseudo class is type-selector:pseudo-class { /* Some properties & values here */ }. An example of using a pseudo class is illustrated below with the link tag (<a>).



Code

<!DOCTYPE html>
<html>
  <head>
    <title>Type Selectors!</title>
    <style>
      p { color: red }
      a:hover { text-decoration: underline }
      a:visted { color: purple }
    </style>
  </head>

  <body>
    <p>Roses are red.</p>
    <p>Violets are... wait they're also red?!?</p>
    <a href="http://www.dominosugar.com/">Sugar is sweet, </a>
    <a href="http://mcwic.github.io/htmltutorial/">And this link isn't blue!</a>
</html>

Result

Roses are red.

Violets are... wait they're also red?!?

Sugar is sweet, And this link isn't blue!