Lesson 35: Using Styles

Overview

In this HTML lesson, we demonstrate various methods for using styles in HTML. The subject of styles is beyond the scope of this HTML lesson, and this lesson is not meant to teach CSS styling. Rather it is meant to show how styles can be used so that style code can be recognized when it is seen. To this end, we demonstrate the three basic methods for incorporating styles in HTML: inline with a style attribute, embedded with a style element, and externally with a link element or import.

The Unstyled File

This is our unstyled HTML document. It consists of several paragraphs from the beginning of the novel Pride and Prejudice by Jane Austen. By default, the text is black, and all of our styling will consist of changing the color of the text in these paragraphs to tan.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

Output

Inline Styles

Our first styling example uses the global attribute style to set the style on the first paragraph to have a tan text color. This is how inline styles work. We set the style attribute on an element to change its style. As we see below, this changes the color of the first paragraph.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p style="color: tan;">It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

Output

Multiple Inline Styles

In this example, we show how to change the style on all of the paragraphs so that they all have tan colored text. This becomes tedious as the number of paragraphs grows and can be handled more easily, as we will see, with embedded styles.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p style="color: tan;">It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p style="color: tan;">However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p style="color: tan;"><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p style="color: tan;">Mr. Bennet replied that he had not.</p>
    <p style="color: tan;"><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p style="color: tan;">Mr. Bennet made no answer.</p>
    <p style="color: tan;"><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p style="color: tan;"><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p style="color: tan;">This was invitation enough.</p>
  </body>
</html>

Output

Embedded Style Sheets

In this example, we use an embedded style sheet to set the style on all of the paragraphs with a single command. To do this, we put code for a selector inside a style element, which is in the head element. This selector changes the color of the text for all paragraphs to tan, as we see below.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <style>
      p {
        color: tan;
      }
    </style>
  </head>
  <body>
    <p>It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

Output

ID Selectors

While embedded style sheets allow us to change a set of elements, they can also be used to change a single element. To do this, we need to set the global id attribute of the element and create an id selector for it as we show below. With this selector, we can change the style of a single element, as we see below.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <style>
      #idFirst {
        color: tan;
      }
    </style>
  </head>
  <body>
    <p id="idFirst">It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

Output

External Style Sheets

Along with embedded style sheets, we can put our style sheet code in a separate file so that it can be shared by multiple HTML documents. Here, we have put the prior style code for selecting the first paragraph in a separate file that we saved as "PrideAndPrejudice.css" in the same folder. To use this file and its styles, we include a reference in a link element inside the head element. Note that the .css extension is used to designate a file as a cascading style sheet.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <link rel="stylesheet" type="text/css" href="PrideAndPrejudice.css" />
  </head>
  <body>
    <p id="idFirst">It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

PrideAndPrejudice.css

#idFirst {
  color: tan;
}

Output

Using Import for External Style Sheets

With an external style sheet file, we can apply it by using the link element as shown above or using an import inside of the style element, as we do here. Either one works just as well for the style sheet file, as this code demonstrates.

Example7.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <style>
      @import url("PrideAndPrejudice.css");
    </style>
  </head>
  <body>
    <p id="idFirst">It is a truth universally acknowledged, that a single man in possession
      of a good fortune, must be in want of a wife.</p>
    <p>However little known the feelings or views of such a man may be on his
      first entering a neighbourhood, this truth is so well fixed in the minds of
      the surrounding families, that he is considered the rightful property of
      some one or other of their daughters.</p>
    <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you
      heard that Netherfield Park is let at last?</q></p>
    <p>Mr. Bennet replied that he had not.</p>
    <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and
      she told me all about it.</q></p>
    <p>Mr. Bennet made no answer.</p>
    <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p>
    <p><q>You want to tell me, and I have no objection to hearing it.</q></p>
    <p>This was invitation enough.</p>
  </body>
</html>

PrideAndPrejudice.css

#idFirst {
  color: tan;
}