[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl1] This 'p' element should have a normal line-height, because negative values are not permitted for 'line-height'. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl1] This 'p' element should have a background that completely fills its content-area. This background is a small green grid image that has been repeatedly "tiled" throughout the background area of the element.
[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through."
[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green-grid background to "shine through."
[parent] This 'div' element is the parent of another 'div' that is used to test inheritance. The parent has a background pattern of a crosshair image.
[inh1] This 'div' element should have the same crosshair-tiled background as its parent, as it has a style attribute set to inherit the
This is the end of the parent element.background-image value. If the background is red, the 'inherit' test has been failed. If the crosshair pattern does not re-start itself in the top left corner of this child 'div', then the test has also been failed; by inheriting the image, this 'div' has a pattern independent of its parent.[index page] [section] [Previous] [Next] [Specification]
[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, although the distance between actual character glyphs cannot be predicted. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, and a separation of 15 pixels between the silver-backed areas. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl3] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl4] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl3] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[shrink] This text should have a font-size two-thirds that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[grow] This text should have a font-size half again as large as that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
This is the end of the 'cl3' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.[cl4] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[shrink] This text should have a font-size two-thirds that of the parent element, and the separation between baselines should also be two-thirds the parent; in other words, 20 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 10px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[grow] This text should have a font-size half again as large as that of the parent element, and the separation between baselines should also be half again that of the parent; in other words, 45 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 22.5px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
This is the end of the 'cl4' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.[cl5] This 'p' element contains an inline element that is twice the size of the 'p' element's text, but it does not have an increased line-height. Thus, the inline element's content area will overlap other lines in the parent element. The inline element is [huge]. Note that the baselines of both the 'p' and the 'span' are aligned, since that's the default behavior. The overlap can go both upward and downward; that is, preceding and succeeding lines can be overlapped. The height of the line in which the 'span' appears may also be taller than normal due to the inline box of the 'span'.
[cl6] This 'p' element contains an inline element that is twice the size of the 'p' element's text, and which will inherit the scaling factor for its line-height. Thus, the inline element's content area will not overlap other lines in the parent element. The inline element is [huge]. Note that the line in which the inline element appears is increased in height to account for its presence. This does not increase the content area of the line of text, as the silver background demonstrates.
[cl5] This 'p' element contains an inline image that is twice the height of the 'p' element's text. Thus, the images will increase the height of the line in which it appears, and will not overlap content in lines above or below it. The inline element is 
. Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.
. Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.[index page] [section] [Previous] [Next] [Specification]
Note: Before beginning, ensure that this link has been visited, and this link has not.
CSS2 Test Suite: 12.1 :before and :after
[index page] [section] [Previous] [Next] [Specification]The style declarations contained within this page:
BODY:after {
content: "The End";
display: block; margin-top: 2em;
text-align: center; color: maroon;
}
P.note:before {content: "Note";}
P.note {color: purple;}
.fox1:before {content: "The quick brown fox ";}
.fox2:after {content: " jumped over the lazy dog.";}
.fox3:after {content: " the lazy dog.";}
A plain, unstyled paragraph. Note that, at the bottom of this page, there should be a block-level box containing the words "The End" centered, and colored maroon.
[note] This paragraph should have generated content inserted at its beginning, and the entire element (including the generated content) should be purple.
[fox1] jumped over the lazy dog.
[fox2] The quick brown fox
[fox1 fox3] jumped over
[index page] [section] [Previous] [Next] [Specification]
[index page] [section] [Previous] [Next] [Specification]
heading level5
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratParagraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
heading level5
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratParagraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
CSS3 selectors - :empty, :not(s), :target
Only double :: notation used in this test
CSS selectors - ::first-line, ::first-letter
Both single : and double :: notation used in this test
heading level5 - single : notation
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratParagraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
7. Centre aligning a block element
This tip seems almost precisely correct. The only improvement I might suggest is to use individual properties for 'auto' instead of the 'margin' shorthand. I have a vague recollection of a few browsers having problems (ignoring?) the margin: 0 auto; shorthand, whereas they worked fine with the margin-left:auto; margin-right:auto; longhand equivalent. If someone knows of the specific browser(s) that have this problem, please link to this post and point them out. Thanks.
via tantek.com
This tip seems almost precisely correct. The only improvement I might suggest is to use individual properties for 'auto' instead of the 'margin' shorthand. I have a vague recollection of a few browsers having problems (ignoring?) the7. Centre aligning a block element
margin: 0 auto; shorthand, whereas they worked fine with the margin-left:auto; margin-right:auto; longhand equivalent. If someone knows of the specific browser(s) that have this problem, please link to this post and point them out. Thanks. Paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Code used
#t1 :first-letter {color: green; font-size: 300%; font-weight:bold; background:transparent}
#t1 :first-line {background: lime; color:#fff;}
#t2 ::first-letter {color: #ccc; font-size: 300%; font-weight:bold; background:#c00}
#t2 ::first-line {background: lime; color:#fff;}
Notes
- Opera (up to version 8.5) doesn't apply the
:first-line pseudo-elementwhen the mime-type of the document isapplication/xhtml+xml; hence, a test-case served ashtml 4.01 text/html. - IE 5 Win doesn't apply the rules; IE 5.5 and IE 6 Win appear to understand the single and double column (:) notation. It is not clear if this by design or another twisted logic by this browser. I guess it simply ignores the first column when the double column notation is used. IE 5.x and 6: there are lots of inheritance problems with both selectors, particularly when used in combination with other selectors, see pseudo-CSS for some of them.
- Opera 7.54, 8, 8.5 are buggy with the
:first-line pseudo-element. There are some strange inheritance effects. Opera 9 performs better, but appears the fictional box as a block-level element. All versions of Opera have problems with combined selectors (inE ::first-line, element is ignored or treated as universal selector. - Most browsers tested, except Safari and Gecko are wrong in painting the background for the
:first-line pseudo-element: they expand the height of the anonymous box representing the first-line to include the height of the line-box created by the first-letter box.
back to introduction
CSS selectors - :first-child, :last-child, :only-child
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
CSS selectors - :first-of-type, :last-of-type, :only-of-type
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
heading level5
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratparagraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
heading level5
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratparagraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
heading level5
CSS selectors - combinators: , > , + , ~
heading level5
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratParagraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratParagraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
