The Style Element

To continue the review, let’s revisit the style element, located in the <head> of an HTML document.
The style element establishes simple style definitions for in a single HTML page without linking to external documents.</p>

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 when you are using an embedded styling method, any code you use or copy has to be added inside the page’s <style> element which in turn lives inside of the <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. Note that the format for this is first writing the name of the element and then writing all of the styling rules for that element inside curly brackets {}.

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. Note that at the end of each style rule, we must add a ; to indicate that we are finished writing out the rule.

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.”)