The Style Element

To continue our review, let’s revisit the style element, located in the <head> of an HTML document.

Remember?
The style element allows for simple style definitions to be established in a single HTML page without having to link to external documents.

We will get into using the method later on, but you should consider the facts of styling this way:

  • Benefit: All styling for a page be done within that same page.
  • Problem: You will have to manually add or copy any styling you want to each individual page of the site.

Important On the following pages you will be given styling options to explore. Just remember that any code you use or copy has to be added inside the page’s <head> element.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>My Way-Cool Awesome Site</title>
    <style>
      /* “Decorative” styling of page contents... */
    </style>
  </head>

  <body>
    <!-- Page contents that will get styled... -->
  </body>
</html>

Adding Style to Page Contents

Selecting Elements (“Apply to all elements on my page.”)

Selecting elements effects large portions of the page, good for backgrounds, image styling, and text, but not for specific instances.

HTML
<style>
  body {
    /* Will affect the ENTIRE body of the page. */
  }
  h1 {
    /* Will affect EVERY heading 1 on the page. */
  }
  img {
    /* Will affect ALL images on the page. */
  }
</style>

Selecting Classes (“Apply to any element I say to.”)

Creating and selecting classes is good for styling distinct portions of the page, to better differentiate them from each other.

HTML
<style>
  .a-class {
    /* Will affect ANY element with this class. */
  }
  .content-block {
    /* Will affect ANY element with this class. */
  }
  .page-title {
    /* Will affect ANY element with this class. */
  }
</style>

Example

We can combine these selections to style elements, both overall and individually.

For example, we can say we want all tables in our site to have black borders, but the first table will have orange text, and the second table will have green text:

  • element selector: div       (“Do _____ to ALL divs on the page.”)
  • class selector: .box-one  (“Do _____ to ANY element with class ‘box-one.’”)
  • class selector: .box-two  (“Do _____ to ANY element with class ‘box-two.’”)