Get DevWP - WordPress Development Theme

CSS Syntax

In this tutorial, I explain CSS Syntax in detail. A CSS rule-set has various parts to it.

  • Selector
  • Declaration
  • Property
  • Value

selector { property: value; }

CSS Selector

Selectors are the item targeted by your CSS. For example, you can target an h1 tag which will be the selector.

h1 { color: red; }

Let’s breakdown the above code example.

  • h1 is the selector
  • you then have your opening curly bracket
  • followed by the Declaration which consists of color which is the property followed by a colon and then red which is the value
  • followed by a semi-colon and then the closing curly bracket.

Grouping Selectors

You can group selectors that share a similar style. This is beneficial because it keeps your CSS concise and easier to manage. Take a look at the example below.

h1, h2, h3, h4, h5, h6 { color: red; }

Let’s breakdown the code example.

We target the various heading tags from h1-h6. we separate them with a comma and they share a similar declaration, property and value.

Multiple Decalrations

You can have multiple declarations applied to a selector. Checkout the example below.

h1 { color: red; font-family: arial, helvetica, "sans serif"; text-align: center; }

Let’s breakdown the above code example.

The thing that changes in the example above is we have multiple declarations. We use the color property with the value of red and the semi-colon which is what’s used to separate each declaration.

We then have the font-family with the value of arial, helvetica, “sans serif” followed by another semi-colon and we finish the rule-set with text-align with the value of center and the final semi-colon. Note, the final semi-colon is optional.

CSS Comments

Commenting your code is extremely important. It helps you and other developers work with your code. You can comment your CSS like so. Comments are ignored by browsers.

/* This is a Comment in CSS */
h1 { color: red; font-family: arial, helvetica, "sans serif"; text-align: center; }

View Our Themes