Tutorials Tonight's Logo
Follow Us

CSS SYNTAX


In this CSS tutorial, we will discuss the basic syntax of CSS and how to write CSS code.

CSS Syntax

The CSS syntax consists of some set of rules that defines how to writes CSS code correctly so that the browser engine may correctly identify specific CSS features of the page.

CSS ruleset have 3 parts:

  1. Selector - selectors select elements from the HTML file and tells which element is to be styled.
  2. CSS property - property defines the CSS feature that you want to use, like color, padding, border, etc.
  3. CSS value - each CSS property has a set of values in which you can choose one or set some numerical value with units, like 10px, center, auto, etc.

Note: CSS property and CSS value are separated by a colon (:).

CSS Syntax format | CSS tutorial

A single set of property and value is called a declaration. If there are multiple sets of CSS declaration then you need to separate them by a semicolon (;)

The last semicolon of a ruleset is optional.

selector {
    property1: value1;
    property2: value2;
    property3: value3;
}

In the example below there are 3 declarations and 1 ruleset.

h1 {
  color: cyan;
  padding: 15px;
  background: silver;
}
▶ Run the code

Grouping selectors in CSS

In case you want to apply the same style for multiple selectors then it is not necessary to define CSS rulesets individually for each selector.

To write the same CSS ruleset for multiple selectors simply write CSS once and separate the selectors by a comma as shown in the example below.

h1, h2, h3 {
  color: #964915;
  margin: 10px;
  padding: 5px;
  background: silver;
}
▶ Run the code

Note: If you are unable to understand the code above then don't bother we will look at each of the above property in the coming chapters.


CSS Property with multiple values

Some of the CSS properties have multiple sets of values that are mentioned at a time. Example: border, shadow, font property etc.

You can give values to these properties separated by spaces.

p {
  border: 2px solid teal;
  box-shadow: 3px 3px 5px 5px silver;
}
▶ Run the code

Points to remember:

  1. CSS is written in form of rulesets.
  2. Each ruleset has 3 different parts selector, CSS property and CSS value.
  3. Multiple selectors can be separated using a comma.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.