CSS: Internal Styling

Unlike the inline styling which affects only one element at a time, an internal style sheet can be used to define a common style for all HTML elements on a webpage. This style sheet is placed in the <head> section of an HTML document, using the <style> element:

HTML file:	Displayed by browser:
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>	This is a heading This is a paragraph.

HTML file:

Displayed by browser:

<!DOCTYPE html>
  <html>
    <head>
<style>
body {background-color:lightgrey}
h1     {color:blue}
p       {color:green}
</style>
    </head>
    <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
    </body>
  </html>

This is a heading

This is a paragraph.

What this particular CSS styling tells the browsers:

Flood the background of the entire document (body) to light grey
Color all <h1> text to blue
Color to green, all text inside any <p> element