The Syntax of CSS

Everything has a format right? So does CSS. It’s important that you understand how a style is created before before going any further.

A CSS style is made up of a of a selector, a property and a value.

Can you show me an example?

Sure ! Have a look at this:

p <----- The selector (paragraph tag)
{ <----- opening "squiggly" bracket
color: blue; <----- The property and value
} <----- closing "squiggly" bracket

Understanding the Syntax

  • The selector sets the element to be styled. In this example, the selector is the paragraph element ( p )
  • After the selector, you open with a left squiggly bracket before applying the styles
  • Next, you start applying each property and the value you’d like that selector to have
  • A colon separates each property and value and a semi-colon ends the declaration
  • You can style a selector with multiple properties
  • Once you’re done, you end it all with a right squiggly bracket

The example below applies 2 more properties to the paragraph tag.

p
{
color: blue;
font-style: italic;
font-size: 15px;
}
  • is the property I wish to style (a paragraph)
  • I then open with a left squiggly bracket
  • Then I specify each property and value (in this case color, font-style and font-size)
  • Finally I close with a right squiggly bracket

That’s pretty much it for the syntax. You’ll learn a lot more properties as you go along through the tutorials.