CSS: Syntax

The syntax for CSS styling looks like this:

element { property:value; property:value }

The element is an HTML element. The property is a CSS property. The value is a CSS value. The combination of property and value is a CSS style. Multiple styles are separated with semicolon and enclosed by curly brackets (marked in red in the example above.).

HTML file:	Displayed by browser:
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgray} 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:lightgray}
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.

The CSS <style> is stored at the top of the document, in the <head> element of the HTML document. This is what is called internal CSS styling, as opposed to inline styling, where styles are written on each line with the element affected. Internal styles apply to the entire HTML webpage. This not only saves repetitive typing, but also gives a consistent appearance or theme to your webpage.