You can also put styles at the top of the Web page. They go inside the head tags as a style element:

Below is the structure of how this works you should see a new HTML element style:

<style type="text/css">
    body {
        background-color:green;
    }
    p {
        color:red;            
    }
</style>

Open inline.html and save it as embedded.html.  Find the existing head tags and inside them (under the title line) put a new blank line.  Paste in the style element from above.

Save and view.  If you understood what you pasted (it will be explained soon) you should know at least partly why the page looks like it does but one thing might be unexpected so read on...

Cascading part 2

The reasons for the colours might not be clear.

  1. the rule in the embedded style sheet for the background colour does not take effect (because the inline one you created earlier overrides it)
  2. the attribute/value color:red in the embedded style sheet does take effect despite the in-line style for color in the body element (because the p rule is more specific than one applied to it's parent element the body)

It can be hard to remember those two principles but try:

  1. in-line styles will override embedded styles applied to the same element
  2. styles applied to contained elements override styles applied to the elements which contain them (like the paragraph inside the body)

Delete the in-lines styles from embedded.html completely (remove style=, the following double quotes and everything inside them.  Do that for the body element and the paragraphs.  Save and view and now you should see only the embedded styles.

Rule sets, rules, attributes and values

This bit of the code is known as a CSS rule set (sometimes just referred to incorrectly as a rule):

p {
    color:red;
    background-color:green;
}

The rule set is the whole thing.  The rules are the two lines inside the curly brackets (braces) which change appearance.  The p is known as a selector (because it selects what will be styled - in this case all paragraphs).  color and background-color are attributes.  red and green are values which are applied to those attributes.  You could express the whole thing in a sentence which is an instruction to the browser:

Find all the paragraphs and set their colour to red and the background colour to green

Why use embedded styles?

The big advantage of these styles in the head is that they apply to all of the page content. In-line styles apply just to one tag so to style all paragraphs you would need to to put style attributes in every individual paragraph. Embedded styles apply to the whole page (but you still need to style each page separately).

Template part 2

Put a style element into your _template.html file so that you can add styles to it if you need to.  No need to have any rule sets in it as you can add those later but you might want one there to remind yourself of the structure (body would be the best choice of selector plus include the two braces and blank lines for adding rules).