CSS syntax
Defining a style in CSS that sets the appearance of an element on a web page is just a rule that tells the browser what to format and how it will be formatted, such as changing the color of the title text, highlighting the image a red frame, a fixed width for a menu of 200 pixels, etc.
CSS rules
CSS is a rule or set of rules that describe the formatting (change of appearance) of individual elements on a web page. The rule consists of two parts: the selector and the next declaration block. The image below shows the structure (syntax) of the rule:
- The first is always the selector, it tells the browser which element or elements of the web page will be styled.
Note: in the image as selector is a type selector, in many examples of the tutorial we will use this selector.
- Next is the declaration block, which begins with the opening curly brace
{
and ends with the closing}
, between the curly braces are specified formatting commands (declarations), which are used by the browser to stylize the selected selector element. You can specify as many declarations as you want in a block. The declaration block itself is also called style. - Each declaration consists of two parts: the property and its value. The declaration must always end with a semicolon (
;
). You can omit the
only at the end of the last declaration before the closing curly brace.;
- A property is a formatting command that defines a specific style effect for an element. The property itself is a word or several words written through a hyphen. Each property has its own predefined set of values. After the property name, a colon is specified, which separates the property name from the valid value.
General formatting rules
The browser ignores most of the whitespace in the CSS code, so they can be used to your advantage, by giving your code a readable look. Whitespace symbols include: tab characters, line wrapping, and normal spaces, which can be used in any number. Whitespace characters can be placed between the selector and the declaration block, in the declaration block itself - between the curly bracket and the property, between the properties, the property and the value.
The example shows CSS code that uses whitespace characters:
p { color: blue; text-align: justify; }
Whitespace characters are mostly used when a rule specifies many properties to make it easier to read and imagine what exactly this style does. The code of the previous example can be written in one line without using whitespace, but this code will be less convenient for reading and understanding:
p{color:blue;text-align:justify;}
This is the way to write rules when you use just one or two properties so that you do not break the code into multiple rows and thus not increase the size of the code.
With this theme look: