General syntax of CSS - Tutorial

Composing a CSS Rule.

A CSS styles sheet is nothing more than a set of rules, each of which defines a characteristic of the formatting. For example, the following rule means that h1 headings are in 24-point size and red font.

More generally, the CSS syntax can be summarized with the diagram below:

A rule is composed of:

• A selector.

  The selector specifies the elements to which you want to assign formatting. This can be like here an HTML tag, but selectors much more sophisticated are available. When you have finished reading this, refer to the list of selectors.

  Everything that relates to a selector is grouped in curly brackets.

• One or more properties.

  font-size and color are what we call properties. The names of the CSS properties usually make it easy to guess which one is going to be their effect. CSS has many properties, which makes it rich and allows us to hope for very extensive formatting possibilities.

  The properties are separated from each other by an essential semicolon ( ; ). It is recommended, although it is not mandatory to go to the line after each property to improve the readability of the style sheet. We didn't do this on the example above.

• The values.

  Each property is followed by one or more values. A colon character ( : ) separates the property name from its value.

  Some values are numbers but CSS recognizes many predefined values, such as in our example, the name of the color. Alignment properties recognize left, center, or right. And there are a lot of other preset values that you'll discover as you learn CSS.

• Units.

  Values, when it comes to numbers, are most of the time followed by a unit. In our example, pt means "point". There is always a unit to specify, and it is required, except in a few rare cases such as the order property that just waits a number. In the case where the value is zero, we can afford not to specify the unit, because in any case, 0cm (0 centimeters) is identical to 0in (0 inches).
  We must not leave a space between value and its unity.

  Some examples:

  margin:2cm; /* A dimension in centimeters */ width:50%; /* A dimension in percentages */ rotate:45deg; /* An angle */

  When you have finished reading this, you can consult the CSS units. You'll see that CSS of course recognizes dimension units, necessary to set the size of the elements or margins, but also of many other units, and even, which may be surprising, units of time and frequency.

It should also be noted that CSS is not case sensitive, but it has become a habit to write CSS in lowercase letters. Property names or values are sometimes compound words: a hyphen is usually used as a word separator. This way of writing computer codes is called the kebab-case. Example font-size.

Take care of the presentation of your CSS with line breaks and, as in any computer language, by managing indentation (margins on the left to highlight the logic). The code below:

Is still more readable than:

The short hand property.

In order to make it easier to write styles, CSS recognizes many short hand properties, i.e. properties that allow you to set multiple values at once, which would normally have required writing multiple properties. The values of a summarized property are separated by spaces.

For example, the margin property is a summary to define the four margins at once. The two entries below are equivalent.
Note: When values match all four sides of an element, CSS always uses the same order to enumerate them: start from the top and rotate in clockwise: up, right, down, left.

Similarly, the border property is a shortcut that allows you to define the type of border, its thickness and its color at once. and for all four sides of an element.

Careful! The short hand properties define all expected values, although some are not specified. The latter are then returned to their original value. For exampleborder:double; will set the border style to double, but also the thickness to medium which is the initial value, and return the color of the border to the same as the text.

Conclusion: if you are using a short hand property, you might as well define all the values for which it is intended.

At rules.

At-rules are more global commands than properties. Their names always start with the @ character. Their roles are very diverse:

• @import inserts another style sheet at that point.
• @charset defines the character set of the style sheet.
• @font-face defines the font download.
• Etc. There are many others. You will find the list on this site.

Comments.

Comments are ignored by programs; They are intended for humans who may have to decipher the style sheet. These can be explanations of tricks used, or simple little reminders. Comments can also be used to temporarily disable one or a few rules, usually for testing.

It is possible to insert comments in the definition of styles by surrounding them with /* and */

Values of type URL.

Some values are urls to an image or other file. CSS then adopts a syntax of the function type. For example, to set the image to display in the background:

It can be an absolute url (which starts with https://) or a relative url. In the latter case, the path is relative to the location of the styles sheet (not the HTML pages that use those styles).