You can style elements in your web page in three different ways:

  • Inline Styles
  • Internal <style> section
  • External Style Sheet

You can use one, tow or all three of these methods for adding styles.

Inline Styling

You can use inline styling, which sets the styles within the <body> section of the page at the element level. Here is an example:

<h1 style="color: #fff; font-size: 2.4em; text-decoration: underline">This is the Headline</h1>

The above inline styling will target just that individual <h1> tag and no others. If you want to change all of the heading tags at the <h1> level for your entire site, you would have to edit each and every one of these tags.

Inline styling can also take place by JavaScript functions that add styling to certain elements.

Inline styles are good for individual styling of specific elements that will not be repeated anywhere else on the site. Inline syling is not good if you wish to make global changes to the look of your website.

TAKE NOTE:
Inline styles will override any styles set with the <style> tag in the <head> section or and style set in an external style sheet.

Add a <style> section to the top of your HTML document

You can set styles for an individual web page by adding a <style> section within the <head> section of your HTML document. The styes here will be recognized for all styled elements within that individual page. Here is an example of a <style> section for a HTML document:

<head>
    <style type="text/css">
        h1, h2, h3 {
            font-style: Tahoma, Geneva, sans-serif;
            color: #774400;
        }
    </style>
</head>

The above example will style ALL of the <h1>, <h2> and <h3> tags within the individual document. Other pages on the website will not have this styling unless the page has this <style> section duplicated on that page.

Having a <style> section in the <head> section of your page is alright if this is a stand-alone page. It is not good to use this method if you wish to make global changes that effect multiple pages of the site.

Add a <link> element in the <head> section to an external style sheet

By linking to an EXTERNAL style sheet, all of your web pages will have the same styles set for them in one location. To change a color, font, etc, site wide, you only need to edit the one file. You simply add the <link> in the <head> section of every HTML document for your site. Here is an example of the <link> element:

<head>
    <link type="text/css" href="/css/layout.css" rel="stylesheet" />
</head>

In this example the style sheet file of layout.css is located in the css subdirectory.

TAKE NOTE: You can have multiple <link> tags if you have multiple style sheets. The style sheets must each have a unique name. Any styles set in style sheets lower in the list will OVERRIDE styles set in earlier style sheets.