CSS | HTML | RESULT |
---|---|---|
* { color:#555; } | Normal text | Normal text |
b { color:red; } | <b>Bold text</b> | Bold text |
.classname { color:blue; } | <div class='classname'>A div element using the class 'classname'.</div> | A div element using the class 'classname'. |
#idname { background:cyan; } | <div id='idname'>A div element using the ID 'idname'.</div> | A div element using the ID 'idname'. |
span em { color:green; } | <span>A span with <em>emphasised text</em> and another <span>span inside also containing <em>emphasised text</em></span></span>. | A span with emphasised text and another span inside also containing emphasised text. |
div > em { background:lime; } | <div>A div element with <em>emphasised text</em> and a <span>span also containing <em>emphasised text</em></span>.</div> | A div element with emphasised text and a span also containing emphasised text. |
i + b { color:orange; } | <i>Italic text</i> then plain <b>then bold text</b> then plain <b>then bold text again</b>. | Italic text then plain then bold text then plain then bold text again. |
u ~ s { color:blue; } | <u>Underlined</u> then plain <s>then strikeout</s> <u>then underlined</u> then plain <s>then strikeout text again</s>. | Underlined then plain |
a[href='info.htm'] { color:red; } a:hover { font-weight:bold; } |
<a href='http://google.com'>Google</a> <a href='info.htm'>Info</a> | Google Info |
p:first-letter { font-size:300%; } | <p>This is a paragraph.</p> | This is a paragraph. |