The Style Element

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

Remember?
The style element establishes simple style definitions for in a single HTML page without linking to external documents (e.g. main.css).

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 is done within the same page.
  • Problem: To apply the same styles on different pages requires manual addition or copying on all pages 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>

Example 1

We can apply styles to all elements on a page by specifying the element in the style tag.

For example, we can say we want all divisions in our site to have black borders, a font of Tahoma and a size of 12 px.

  • element selector: div       (“Do _____ to ALL divs on the page.”)