CSS Syntax

❮ Prev Next: CSS Selectors ❯

As you learned in a previous tutorial, Cascading Style Sheet (CSS) is a language whose primary purpose is to allow a browser engine to style page elements with specific features, such as size, color, positioning, or decoration, CSS Syntax explains this purpose.

CSS Syntax consists of basic components and blocks:

CSS Syntax Example

CSS Syntax Code:

p { text-align: center; }

CSS Syntax Elements:

CSS Selector
CSS Declaration
CSS Declaration Blocks
CSS Property
CSS Value
CSS Unit

CSS Selector

The selector is the HTML tag you want to style.

CSS Declaration #

Declaration consists of two components: first property and second value:

CSS Property and Value #

CSS Property is the property that identifies the CSS declaration as a human readable name, it is an identifier for the CSS declaration with a human readable name. Specifies which CSS feature should characterize the HTML element.
CSS Value is the value that specifies how the elements of the HTML document should be handled by the browser, according to its name in each CSS property. There is a set of valid values, the browser manages HTML elements and displays them on the screen according to the values selected from those values.
Colon ':' is placed between property and value to display property and value separately.

CSS Declaration Blocks

The declaration block contains one or more declarations,
Declarations are grouped into blocks, starting with opening brass ie left curly bracket '{' and ending with 'closing brass' ie right curly bracket '}'.
Within the declaration block, the declarations are separated from the semicolon (;). It is not necessary to put a semicolon at the end of the last declaration, but if applied, it is considered better.

Example of CSS Declaration Blocks

The color of the text in this paragraph is red and the text alignment is right.

Example Code of CSS Declaration Blocks

p {
color: red;
text-align: right;
}

Example Explanation

In this example p is a CSS selector, through which the HTML tag <p> is selected.
color is the CSS property and red is the value of the CSS property.
text-align is the CSS property and right is the value of the CSS property.

Note

Inline CSS is applied within the HTML page itself using the HTML style attribute, which is very useful in terms of priority.

❮ Prev Next: CSS Selectors ❯