Browsed by
Tag: css2

Selector syntax

Selector syntax

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, “>”, and “+”. Whitespace may appear between a combinator and the simple selectors around it. The elements of the document tree that match a selector are called…

Read More Read More

Grouping

Grouping

When several selectors share the same declarations, they may be grouped into a comma-separated list. Example(s): In this example, we condense three rules with identical declarations into one. Thus, H1 { font-family: sans-serif }H2 { font-family: sans-serif }H3 { font-family: sans-serif } is equivalent to: H1, H2, H3 { font-family: sans-serif } CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties.

Boxtest

Boxtest

Boxtest Here is a sample div with class “boxtest”. It has 20px border, 30px padding, and 300px width. div.boxtest { border:20px solid; padding:30px; background: #ffc; width:300px;} The total width including borders and padding should be 400px. 20+30+300+30+20 = 400 User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px. 300-20-30-30-20 = 200 The red and blue bars…

Read More Read More