CSS Syntax

A CSS rule-set consists of a selector and a declaration block.

selector {
  property: value;
}

• Selector: Defines the element you want to style (e.g., h1, table).
• Property: A type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1.

Example

You can define a table border as follows:

table {
  border: 1px solid #C00;
}

Selectors

The Type Selectors

Matches the name of an element type. To give a color to all level 1 headings:

h1 {
  color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type:

* {
  color: #000000;
}

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element.

ul em {
  color: #000000;
}

This rule applies to <em> elements only when they lie inside the <ul> tag.

The Class Selectors

You can define style rules based on the class attribute of the elements.

.black {
  color: #000000;
}

This renders distinct elements with class="black" in black.

The ID Selectors

You can define style rules based on the id attribute of the elements. Use # followed by the ID name.

#black {
  color: #000000;
}

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

h1, h2, h3 {
  color: #36C;
  font-weight: normal;
}