The basic goal that the Cascading Stylesheet (CSS) language is to permit a web browser engine to paint elements of the web page with specific features, choose colors, positioning, or decorations. The CSS syntax reflects this goal and also its basic building blocks are:

The property i beg your pardon is an identifier, the is a human-readable name, that defines which function is considered. The value which explain how the function must be tackled by the engine. Each property has a collection of valid values, defined by a official grammar, as well as a semantic meaning, implemented by the browser engine.

You are watching: Which is the correct css syntax?


CSS declarations


Setting CSS nature to particular values is the core function of the CSS language. A property and also value pair is dubbed a declaration, and any CSS engine calculates i beg your pardon declarations use to every solitary element the a page in stimulate to appropriately lay the out, and to layout it.

Both properties and values are case-insensitive by default in CSS. The pair is separated by a colon, ":" (U+003A COLON), and white spaces before, between, and after properties and values, but not necessarily inside, room ignored.

*

There are more than 100 different properties in CSS and also a virtually infinite variety of different values. Not all bag of properties and values are allowed and each property defines what are the valid values. When a worth is not valid because that a offered property, the statements is reputed invalid and is completely ignored by the CSS engine.


CSS explanation blocks


Declarations room grouped in blocks, that is in a framework delimited by an opening brace, "" (U+007B LEFT CURLY BRACKET), and a close up door one, "" (U+007D right CURLY BRACKET). Blocks sometimes have the right to be nested, therefore opening and also closing braces should be matched.

*

Such blocks are naturally dubbed declaration blocks and declarations inside them are separated by a semi-colon, ";" (U+003B SEMICOLON). A declaration block may be empty, that is comprise null declaration. White spaces around declarations room ignored. The critical declaration of a block doesn"t must be terminated through a semi-colon, despite it is often thought about good style to execute it as it avoids forgetting to include it when expanding the block with another declaration.

A CSS declaration block is visualized in the diagram below.

*


Note: The contents of a CSS statements block, that is a list of semi-colon-separated declarations, there is no the initial and closing braces, deserve to be placed inside an HTML style attribute.


CSS rulesets


If layout sheets could only use a declaration come each facet of a net page, they would be nice useless. The real goal is to apply different declarations to various parts the the document.

CSS enables this by associating problems with declarations blocks. Each (valid) explanation block is preceded by one or more comma-separated selectors, which are conditions selecting some facets of the page. A selector group and also an linked declarations block, together, are referred to as a ruleset, or frequently a rule.

A CSS ruleset (or rule) is visualized in the diagram below.

*

As an aspect of the page may be matched by several selectors, and therefore by number of rules possibly containing a offered property numerous times, with various values, the CSS standard defines which one has actually precedence over the other and must it is in applied: this is called the cascade algorithm.


Note: that is important to keep in mind that even if a ruleset identified by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn"t apply to the validity that the ruleset itself.

This leader to an important consequence: if one single simple selector is invalid, like when using an unknown pseudo-element or pseudo-class, the totality selector is invalid and therefore the entire rule is ignored (as invalid too).


CSS statements


Rulesets are the main structure blocks of a format sheet, i m sorry often consists of only a large list of them. Yet there is other info that a Web writer wants to convey in the format sheet, favor the personality set, other exterior style sheets come import, font face or list respond to descriptions and also many more. It will certainly use various other and details kinds of statements to execute that.

A statement is a structure block that starts with any type of non-space characters and ends in ~ the an initial closing brace or semi-colon (outside a string, non-escaped and also not contained into another , () or <> pair).

*

There are two type of statements:

Any statement i m sorry isn"t a ruleset or one at-rule is invalid and also ignored.

See more: Fraction Calculator: 2 Divided By 3/4, What Is 2 Divided By 3/4


Nested statements


There is one more group of explanation – the nested statements. These room statements that can be supplied in a specific subset of at-rules – the conditional group rules. This statements only use if a particular condition is matched: the
media at-rule contents is used only if the an equipment on i beg your pardon the internet browser runs matches the expressed condition; the
document at-rule content is used only if the existing page matches part conditions, and so on. In CSS1 and CSS2.1, only rulesets could be supplied inside conditional group rules. The was an extremely restrictive and this restriction to be lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a broader range the content: rulesets but additionally some, however not all, at-rules.


See also


Found a problem with this page?


Last modified: Aug 12, 2021, by MDN contributors

Change her languageSelect your desired language English (US)Español日本語한국어Português (doBrasil)Русский中文 (简体)正體中文 (繁體) adjust language
Related Topics
Learn CSS CSS first steps CSS building blocks Styling message CSS layout Reference Modules properties Selectors Pseudo-classes Pseudo-elements At-rules varieties Guides Animations Backgrounds and Borders crate alignment Box model Columns Conditional rule CSSOM watch Flexbox flow layout Fonts grid photos Lists and also counters Logical properties Media queries placing role snap forms text Transforms Transitions Layout cookbook Tools
MDN
ptcouncil.net