How good of a CSS expert are you? Here would be a few interesting questions for you… all of these should be answered with CSS 2.1 in mind.
You need to paint a div, which can be defined in XHTML in three different ways:
<div class="blue"> Blue </div> <div class="yellow"> Yellow </div> <div class="blue yellow"> Green </div>
The blue one is painted blue, the yellow one is painted yellow and the blue-and-yellow one is painted green. What would be the shortest way of doing this?
div.blue { background : #0FF }
div.yellow { background : #FF0 }
div.blue.yellow { background : #0F0
Whitespace was added for clarity, you can remove all of it to further compress the stylesheet. Also note the missing end brace, which is not mandatory.
You see the following rules in a CSS file:
body { font-size: 10px }
p {
line-height: 2em;
font-size: 2em
}
What are, in pixels, the line height and font size of a paragraph element that appears directly in the body of the document?
In XHTML 1.0 Strict DTD, the button element has a “type” attribute that is “submit” by default (although don’t rely on Internet Explorer for that). Keeping that in mind, is there any difference between these two buttons as far as CSS is concerned?
<button>Send!</button> <button type="submit">Send!</button>
button[type="submit"], whereas the first wouldn’t match. This is why it is advised to provide a default CSS rule for the default value of the attribute.The first-letter CSS pseudo-element lets you apply specific properties to the first letter of an element. The question is, assuming no other stylesheet rule attempts to change the color of the text, under which circumstances does the following rule affect the letter “W” in the document below it?
div:first-letter { color : red }
<div><em>Welcome</em>, whispered the ghost.</div>
em { display:inline-block }) its first letter cannot be affected by the first-letter pseudo-element of a parent. In that case, none of the letters in the example would be red.Consider this set of nested div blocks, and five CSS rules (present as such in the author’s stylesheet) that all apply to the contents of the innermost block.
.blue .blue { color : blue }
* * * { color : black }
div div div { color : yellow }
.or.red * * { color : red }
div.green * * { color : green }
<div class="green or red">
<div class="blue">
<div class="blue">
What color?
</div>
</div>
</div>
What is the color of the text?
(click to see answer)
A designer constructs two nested div blocks using the following template:
<div id="outer"> <div id="inner"> </div> </div>
And he gives them the following stylesheet rules:
#outer { width : 200px ; height : 100px ; margin : 0px ; background : blue }
#inner { width : 20px ; height : 20px ; margin : 10% ; background : red }
What would be the relative position of the top-left corner of the red square to the top-left corner of the blue rectangle? What would happen if the outer block received a black border?
Hi. I'm Victor Nicollet,
Recent Comments