Putting CSS inside HTML tags can get confusing once you have many styles. It also changes just the one element (although that may be OK). Another approach is to put the styles at the top of the Web page. They go inside the HEAD tags.
Below is the structure of how this works:
<head>
<style type="text/css">
p {
color:red;
background-color:green;
}
</style>
</head>
This makes all paragraphs use red text. The structure is obviously different but also very similar. The "p" is there to say "apply these styles to all paragraph elements on the page". The curly brackets enclose all the style attribute/value pairs which should be applied to the P elements. The attributes and values themselves are laid out just like in-line styles and could be laid out in one line if you want. This indented layout is easier to follow though.
The big advantage of 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 (HEAD) styles apply to the whole page.
