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:

    body {
    p {

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 and it should look like this: 

If you understood what you pasted you should know at least partly why the page looks like it does but if not read on...

Cascading part 2

The reasons for the colours might not be clear.

  1. the rule in the embedded style sheet for the body 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 because there is no in-line rule to override it

Rule sets, rules, attributes and values

This bit of the code is known as a CSS rule set (do not paste this in just look at it):

p {

The rule set is the whole thing.  The rules are put inside the curly brackets (braces) and 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

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