(click anywhere to close)
OPEN MENU

[CSS3] Syntax

category: Website | course: CSS3 | difficulty:

Every bit of CSS starts with a selector, which is then followed by one or multiple declarations.

The role of the selector is to select a certain group of elements (for example, all <p> tags), while the declarations declare what style is assigned to those elements. Opening and closing braces are used to show when a certain group of declarations starts and ends.

CSS3SelectorsDeclarations

Selectors can be built from many small items with a certain functionality, which will all be discussed in the next chapter.

Declarations

Every declaration consists of two elements: property and value. The property and value are connected with a colon, and a semicolon is placed at the end to signal the end of the declaration.

The property determines what exactly of the element is being styled. For example, font-size alters the size of all text within the element.

The value determines how the property is being styled/altered. For example, you could set the font-size to 16px (16 pixels).

CSS3PropertiesValues

A Note on Inline Styles

Because inline styles only work on the element they are set on, they don’t require selectors. You only need to provide the declarations.

Comments

Just as with HTML, or any computer language really, CSS offers you the possibility to add comments within your code. These comments have no influence at all on the page - they are simply there to remind yourself about what certain parts do, or certain bugs you still need to fix.

/* This is a comment
It can span multiple lines */

That’s It!

This is all the syntax there is. The rest of this course, with the exception of the next chapter, is about all the different existing properties and the values they can take. All declarations can be applied to all elements, but some are specific to certain elements and don’t affect others. Nevertheless, CSS will never throw errors if you do something wrong – it will just do the best it can with what you give it. Most of the times CSS provides an elegant solution to a problem, but sometimes you’ll need to exploit some of the oddities or of the language – we like to call those things CSS hacks. Therefore, there are usually multiple ways to do something, and sometimes they require extra HTML elements and/or some advanced CSS magic. Don’t be afraid to experiment!

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What is the definition for a single CSS styling rule, of the form property:value;?
A
Declaration
B
Selector
C
Comment
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)