CSS Syntax

CSS is a powerful tool that you can use to spice up a webpage in HTML format. By linking a CSS stylesheet to your HTML you will be able to change font size, font color, size and shape of sections of your website, even adding the ability to change your background from a boring white to a dazzling display of colors. So let’s look at how this is possible!

The Syntax in a Nutshell

The syntax for CSS is relatively simple. All CSS will look something like this:

selector {
property: value;
property: value;
}

  • An opening curly brace always follows after the selector and surround the property: value relationships. Once you are finished defining the CSS for a selector, you close with an ending curly brace.
  • Always separate your property and your value with a colon.
  • Semicolons always separate property: value relationships.
  • A selector anything in your HTML document that can be styled, including element, attribute, class, and ID. For example if you wanted to style the font under an "< h1> tag, you would start with “h1 {“.
  • A property is the attribute of the element you want changed. Font size or background color, for instance.
  • A value is the new value you are using. Values will be dependent on what property you are trying to define, for example a background color could be red, but font size would not be red.

Syntax in action

HTML:
< h1>CSS Syntax< /h1>
< p> CSS is so fun!< /p>

CSS:
CSS syntax image
Will result in:
Results of CSS image

Other Resources