Compare Revisions

Syntax

Revision 308129:

Revision 308129 by teoli on

Revision 348073:

Revision 348073 by peterholthoffman on

Title:
Syntax
Syntax
Slug:
CSS/Syntax
CSS/Syntax
Tags:
"css","NeedsEditorialReview","Stylesheets"
css,NeedsEditorialReview,Stylesheets,
Content:

Revision 308129
Revision 348073
n20      Setting CSS properties to specific values is the core functn20      Setting CSS properties to specific values is the core funct
>ion of the CSS language. A pair of properties and values is calle>ion of the CSS language. A property and value pair is called a <s
>d a <strong>declaration</strong>, and any CSS engine calculates w>trong>declaration</strong>, and any CSS engine calculates which d
>hich declarations apply to every single element of a page in orde>eclarations apply to every single element of a page in order to a
>r to appropriately lay it out, and to style it.>ppropriately lay it out, and to style it.
n29      There are more than <a href="/en/CSS/CSS_Reference" title="n29      There are more than <a href="/en/CSS/CSS_Reference" title="
>en/CSS/CSS_Reference">100 different properties</a> in CSS and a n>en/CSS/CSS_Reference">100 different properties</a> in CSS and a n
>early infinitely amount of different values. Not all pair of prop>early infinitely number of different values. Not all pairs of pro
>erties and values are allowed and each property defined what are >perties and values are allowed and each property defines what are
>the valid values. When a value is not valid for a given property,> the valid values. When a value is not valid for a given property
> the declaration is deemed <em>invalid</em> and is wholly ignored>, the declaration is deemed <em>invalid</em> and is wholly ignore
> by the CSS engine.>d by the CSS engine.
n41      Such blocks are naturally called <strong>declarations blockn41      Such blocks are naturally called <strong>declaration blocks
>s</strong> and declarations inside them are separated by a semi-c></strong> and declarations inside them are separated by a semi-co
>olon, '<code>;</code>' (<code>U+003B SEMICOLON</code>). A declara>lon, '<code>;</code>' (<code>U+003B SEMICOLON</code>). A declarat
>tion block may be empty, that is containing null declaration. Whi>ion block may be empty, that is containing null declaration. Whit
>te spaces around declarations are ignored. The last declaration o>e spaces around declarations are ignored. The last declaration of
>f a block doesn't need to be terminated by a semi-colon, though i> a block doesn't need to be terminated by a semi-colon, though it
>t is often considered <em>good style</em> to do it: it prevents f> is often considered <em>good style</em> to do it as it prevents 
>orgetting to add it when extending the block with another declara>forgetting to add it when extending the block with another declar
>tion.>ation.
n47      The content of a CSS declarations block, that is a list of n47      The content of a CSS declaration block, that is a list of s
>semi-colon-separated declarations, without the initial and closin>emi-colon-separated declarations, without the initial and closing
>g braces, can be put inside an HTML <a href="/en/HTML/Global_attr> braces, can be put inside an HTML <a href="/en/HTML/Global_attri
>ibutes#attr-style" title="https://developer.mozilla.org/en/HTML/G>butes#attr-style" title="https://developer.mozilla.org/en/HTML/Gl
>lobal_attributes#attr-style"><code>style</code></a> attribute.>obal_attributes#attr-style"><code>style</code></a> attribute.
n56      CSS allows this by associating conditions to declarations bn56      CSS allows this by associating conditions with declarations
>locks. Each (valid) declaration block is preceded by a <em>select> blocks. Each (valid) declaration block is preceded by a <em>sele
>or</em> which is a condition selecting some elements of the page.>ctor</em> which is a condition selecting some elements of the pag
> The pair selector-declarations block is called a <strong>ruleset>e. The pair selector-declarations block is called a <strong>rules
></strong>, or often simply a <strong>rule</strong>.>et</strong>, or often simply a <strong>rule</strong>.
n62      As an element of the page may be matched by several selecton62      As an element of the page may be matched by several selecto
>rs, and therefore by several rules eventually containing several >rs, and therefore by several rules eventually containing a given 
>times a given property, with different values, the CSS standard d>property several times, with different values, the CSS standard d
>efines which one has precedence over the other and must be applie>efines which one has precedence over the other and must be applie
>d: this is called the <a href="/en/CSS/Getting_Started/Cascading_>d: this is called the <a href="/en/CSS/Getting_Started/Cascading_
>and_inheritance" title="Cascading and inheritance">cascade</a> al>and_inheritance" title="Cascading and inheritance">cascade</a> al
>gorithm.>gorithm.
n73      Rulesets are the main building blocks of a style sheet, whin73      Rulesets are the main building blocks of a style sheet, whi
>ch often consists only of a big list of them. But there are other>ch often consists of only a big list of them. But there is other 
> information that a Web author want to convey in the style sheet,>information that a Web author wants to convey in the style sheet,
> like the character set, other external style sheets to import, f> like the character set, other external style sheets to import, f
>ont face or list counter descriptions and many more. It will use >ont face or list counter descriptions and many more. It will use 
>other and specific kinds of statements to do that.>other and specific kinds of statements to do that.
n76      A <strong>statement</strong> is a building block that beginn76      A <strong>statement</strong> is a building block that begin
>s with any non-space characters and end at the first closing brac>s with any non-space characters and ends at the first closing bra
>e or semi-colon (outside a string, non escaped and not included i>ce or semi-colon (outside a string, non-escaped and not included 
>nto another {}, () or [] pair).>into another {}, () or [] pair).
n86        <strong>Rulesets</strong> (or <em>rules</em>) that, as sen86        <strong>Rulesets</strong> (or <em>rules</em>) that, as se
>en, associate a collection of CSS declaration to a condition desc>en, associate a collection of CSS declarations to a condition des
>ribed by a selector.>cribed by a selector.
n89        <strong>At-rules</strong> that start with an at sign, '<cn89        <strong>At-rules</strong> that start with an at sign, '<c
>ode>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an>ode>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an
> identifier and then continues up the end of the statement, that > identifier and then continuing up the end of the statement, that
>is up to the next semi-colon (;) outside of a block, or the end o> is up to the next semi-colon (;) outside of a block, or the end 
>f the next block. Each type of <a href="/en/CSS/At-rule" title="A>of the next block. Each type of <a href="/en/CSS/At-rule" title="
>t-rule">at-rules</a>, defined by the identifier, may have its own>At-rule">at-rules</a>, defined by the identifier, may have its ow
> internal syntax, and semantic of course. They are used to convey>n internal syntax, and semantics of course. They are used to conv
> meta-data information (like {{ cssxref("@charset") }} or {{ cssx>ey meta-data information (like {{ cssxref("@charset") }} or {{ cs
>ref("@import") }}), conditional information (like&nbsp;{{ cssxref>sxref("@import") }}), conditional information (like&nbsp;{{ cssxr
>("@media") }} or {{ cssxref("@document") }}) ,or descriptive info>ef("@media") }} or {{ cssxref("@document") }}), or descriptive in
>rmation (like {{ cssxref("@font-face") }}).>formation (like {{ cssxref("@font-face") }}).
t98    <h2>t98    <h2 id="See_also">

Back to History