CSS Test - Selectors, Styles, Classes
CSS Test - Selectors, Styles, Classes
1. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>item 0</li> <li>item 1</li> <li id="middle" >item 2</li> <li>item 3</li> <li>item 4</li> </ul> </body> </html>
1) li:nth-child(3) {background:red;} | 2) li:nth-child(3) {background-color:red;} |
3) li:nth-last-child(3) {background-color:rgb(255,0,0,1);} | 4) .middle {background-color:#FF0000;} |
5) li:nth-child(2) {background-color:red;} | 6) #middle {background-color:#FF0000;} |
2. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Water</dt> <dd id="water">Transparent drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> <dt>Tea</dt> <dd>Hot drink</dd> </dl> </body> </html>
1) dd:nth-child(2) {color:#0000FF;font-weight:bold;} | 2) dd:nth-last-of-type(3) {color:rgb(0,0,255); font-weight:bold;} |
3) dd[id=water] {color:#0000FF;font-weight:bold;} | 4) dd:nth-child(4) {color:blue; font-weight:bold;} |
5) #water {color:blue;font-weight:strong;} | 6) dd[id] {color:rgba(0,0,255,1);font-weight:bold;} |
3. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <table border="1"> <tbody> <tr> <td>Pancho</td> <td>Bulgaria</td> </tr> <tr> <td>Math</td> <td>USA</td> </tr> <tr id="lastRow"> <td>Evgeny</td> <td>Russia</td> </tr> </tbody> </table> </body> </html>
Pancho | Bulgaria |
Math | USA |
Evgeny | Russia |
1) #lastRow td:nth-child(1) {background-color:rgba(0,255,0,1);}
#lastRow td:nth-child(2) {background-color:rgba(0,255,0,1);} |
2) tr:nth-last-child(3){background-color:green;} |
3) tr[id] {background-color:rgb(0,255,0);} | 4).lastRow {background-color:rgb(0,255,0);} |
5) tr[id=lastRow]{background:#000FF0;} | 6) tr:last-child { background-color:#00FF00;} |
4. CSS cannot be applied over XML document.
5. Which of the following properties can be inherited?
1) border | 2) text-align |
3) color | 4) height |
5) float | 6) font-size |
6. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <ol start="0"> <li id="first"><a href="#">Site 4</a></li> <li id="second"><a href="#">Site 3</a></li> <li><a href="#">Site 2</a></li> <li><a href="#">Site 1</a></li> <li><a href="#">Site 0</a></li> </ol> </body> </html>
1) li#first > li {font-size:150%;} | 2) li#first + li {font-size:150%;} |
3) #second + li {font-size:150%;} | 4) #first * {font-size:150%;} |
5) li:nth-last-child(4) {font-size:150%;} | 6) li:nth-child(2) {font-size:150%;} |
7. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><a href="#">Site 4</a></li> <li><a href="#">Site 3</a></li> <li><a href="#">Site 2</a></li> <li id="special"><a href="#">Site 1</a></li> <li><a href="#">Site 0</a></li> </ul> </body> </html>
1) li:nth-child(4){text-decoration:none;} | 2) li:nth-last-child(4){text-decoration:normal;} |
3) #special{text-decoration:none;} | 4) .special{text-decoration:none;} |
5) li#special{text-decoration:normal;} | 6) li:nth-last-child(2){text-decoration:none;} |
8. Which is the correct way for inserting a comment in a CSS file?
1) //This is a comment | 2) /*This is a comment*/ |
3) \*This is a comment*\ | 4) \\This is a comment |
5) <!--This is a comment--> | 6) 'This is a comment |
9. What does MIME abbreviation stand for?
10. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p> <span id="firstTwoWords"><span id="firstLetter">L</span>orem ipsum</span> dolor sit amet. </p> </body> </html>
Lorem ipsum dolor sit amet.
1) p:first-letter {font-size: 200%;}
span {text-transform: uppercase;} |
2) p span span {font-size: 200%;}
p > span {text-transform: uppercase;} |
3) p:first-letter {font-size: 200%;}
#firstTwoWords {text-transform: uppercase;} |
4) .firstLetter {font-size: 200%;}
.firstTwoWords {text-transform: uppercase;} |
5) #firstLetter:first-letter {font-size: 200%;}
#firstTwoWords {text-transform: uppercase;} |
6) #firstLetter {font-size: 200%;}
#firstTwoWords {text-transform: uppercase;} |
11. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="lists"> <ul> <li>Monkey</li> <li>Horse</li> <li>Dog</li> <li>Cat</li> <li>Pig</li> </ul> <ol> <li>Bug</li> <li class="fly">Fly</li> <li>Mosquito</li> <li>Grasshopper</li> <li>Butterfly</li> </ol> </div> </body> </html>
1) *.fly {background-color:red;} | 2) ol li:nth-child(2) {background-color:#FF0000;} |
3) ul + ol > .fly {background-color:red;} | 4) .lists > ol > .fly {background:red;} |
5) ol .fly {background:rgba(255,0,0,1)} | 6) li[class] {background-color:red;} |
12. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="div insects"> <ol class="insects"> <li>Bug</li> <li class="insects fly">Fly</li> <li>Mosquito</li> <li>Grasshopper</li> <li>Butterfly</li> </ol> </div> </body> </html>
1) .insects fly {background-color:blue;} | 2) .fly {background:0000FF;} |
3) .insects.fly {background-color:blue;} | 4) *.fly {background:blue;} |
5) .div .insects .fly {background-color:blue;} | 6) .fly.insects {background-color:blue;} |
7) div .insects .fly {background-color:#0000FF;} | 8) .insects + .fly {background-color:blue;} |
13. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="div mamals"> <ul class="mamals"> <li>Monkey</li> <li>Horse</a></li> <li>Dog</a></li> <li class="mamals cat">Cat</li> <li>Pig</li> </ul> </div> </body> </html>
1) div * .cat {color:red;} | 2) .mamals * .cat {color:red;} |
3) div * *[class] {color:red;} | 4) div ul li:nth-child(4) {color:red;} |
5) .mamals .cat {color:red;} | 6) .mamals > .mamals > .mamals {color:red;} |
7) li.cat.mamals {color:red;} | 8) .div .cat.mamals {color:red;} |
14. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <table border="1"> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Pesho</td> <td>Bulgaria</td> </tr> <tr class="russia"> <td class="country russia name">Oleg</td> <td class="country russia">Russia</td> </tr> <tr> <td>Nicolas</td> <td>France</td> </tr> </tbody> </table> </body> </html>
Name | Country |
---|---|
Pesho | Bulgaria |
Oleg | Russia |
Nicolas | France |
1) tr[class~=russia] {background-color:#00FF00;} | 2) tr[class=russia] {background-color:#00FF00;} |
3) td[class=country] {background:#00FF00;} | 4) td[class~="russia"] {background-color:#00FF00;} |
5) *[border] + [class] {background-color:#00FF00;} | 6) *[border=1] *[class*=russia] {background:#00FF00;} |
7) table[border~="1"] [class] {background:#00FF00;} | 8) tbody > tr:first-child + * {background:#00FF00;} |
15. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p id="first_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Typi non habent claritatem insitam.</p> <p>Claritas est etiam processus dynamicus.</p> <p>Mirum est notare quam littera gothica.</p> <p>Eodem modo typi</p> </div> </body> </html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Typi non habent claritatem insitam.
Claritas est etiam processus dynamicus.
Mirum est notare quam littera gothica.
Eodem modo typi.
1) * > p:first-child {text-decoration:underline;} | 2) div + p:first-child {text-decoration:underline;} |
3) p:nth-of-child(1) {text-decoration:underline;} | 4) p[id*=first] {text-decoration:underline;} |
5) p[id~=first] {text-decoration:underline;} | 6) *[id] {text-decoration:underline;} |
16. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p id="paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </body> </html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
1) p {color:blue !important;}
p {color:black;} |
2) p {color:blue;}
#paragraph {color:black;} |
3) p {color:black;}
p:nth-of-child(1) {color:#0000FF;} |
4) p {color:black;}
#paragraph {color:blue;} |
5) p {color:black;}
p:first-child {color:#blue;} |
6) p {color:blue; !important;}
p:first-of-type(1) {color:black;} |
7) p {color:blue @important;}
p {color:black;} |
8) div p {color:blue important;}
p {color:black;} |
17. Important author styles have highest priority.
18. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <table border="1"> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Pesho</td> <td>Bulgaria</td> </tr> <tr id="russia" class="SecondRow"> <td>Oleg</td> <td>Russia</td> </tr> <tr> <td>Nicolas</td> <td>France</td> </tr> </tbody> </table> </body> </html>
Name | Country |
---|---|
Pesho | Bulgaria |
Oleg | Russia |
Nicolas | France |
1) #russia {background-color:#00FF00;}
.SecondRow {background-color:white;} |
2) tbody .SecondRow {background-color:#00FF00;}
.SecondRow {background-color:white;} |
3) tbody .SecondRow {background-color:#00FF00;}
* > .SecondRow {background-color:white;} |
4) tbody:nth-of-type(1) .SecondRow {background-color:#00FF00;}
tbody > .SecondRow {background-color:white;} |
5) #russia {background-color:#00FF00;}
table tbody:nth-child(2) .SecondRow {background:white;} |
6) #russia {background-color:#00FF00;}
body table > tbody:nth-child(2) > .SecondRow {background:white;} |
19. Which is the correct way for importing of an external CSS file (in this case style.css)?
1)
<style type="text/css"> @import url("style.css"); </style> |
2)
<style type="text/css"> @import "style.css"; </style> |
3)
<style type="text/css"> !import "style.css"; </style> |
4)
<link rel="stylesheet" @import "style.css"> |
5)
<link rel="stylesheet" href="style.css"> |
6)
<link rel="stylesheet" src="style.css"> |
20. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><a href="#">Pesho.com</a></li> <li><a href="#">Gosho.com</a></li> <li><a href="#">Pencho.com</a></li> <li id="stancho"><a href="#" class="stancho">Stancho.com</a></li> <li><a href="#">Pancho.com</a></li> </ul> </body> </html>
1) li {text-decoration:none;}
#stancho {text-decoration:underline;} |
2) .stancho {text-decoration:underline;}
a {text-decoration:none;} |
3) a[class^="sta"] {text-decoration:underline;}
a {text-decoration:none;} |
4) ul {text-decoration:none;}
.stancho {text-decoration:underline;} |
5) a[class$="cho"] {text-decoration:underline;}
a {text-decoration:none;} |
6) .stancho {text-decoration:underline;}
ul li a {text-decoration:none;} |
21. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style_f.css"> </head> <body> <ul> <li><p>Pesho</p></li> <li><p>Pencho</p></li> <li id="gosho"><span>Gosho</span></li> <li><p>Stancho</p></li> <li><p>Pancho</p></li> </ul> </body> </html>
Pesho
Pencho
Stancho
Pancho
1) li > span:not(p) {background-color:red;} | 2) li > p:not(span) {background-color:red;} |
3) li *:not(p) {background:red;} | 4) li:first-child + #gosho {background:red;} |
5) li:first-child ~ #gosho {background:red;}
span {background:white;} |
6) li *:not(p) {background:red;}
span {background-color:white;} |
22. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p id="paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </body> </html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
1) p[id$="para"] {color:red;}
p {color:black;} |
2) p[id^="raph"] {color:red;}
p {color:black;} |
3) p:first-child {color:#FF0000;}
p {color:black;} |
4) p:only-child {color:#FF0000;}
p {color:black;} |
5) div p {color:red;}
p {color:black;} |
6) div ~ p {color:red;}
p {color:black;} |
23. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>item 0</li> <li>item 1</li> <li id="middle" >item 2</li> <li>item 3</li> <li>item 4</li> </ul> </body> </html>
1) #middle {background:hsla(240,100%,50%,1);} | 2) #middle {background:hsl(120,100%,50%);} |
3) #middle {background:hsl(240,50%,100%);} | 4) #middle {background:hsla(120,100%,50%,1);} |
5) .middle {background:hsl(360,50%,100%,0.5);} | 6) #middle {background:hsl(240,100%,50%);} |
24. CSS specificity is used to determine the precedence of the CSS style declarations with the same origin.
25. CSS can be use to generate content.
26. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Water</dt> <dd id="water">Transparent drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> <dt>Tea</dt> <dd>Hot drink</dd> </dl> </body> </html>
1) dt:first-child ~ #water {font-style:italic;} | 2) dt:first-child + #water {font-style:italic;} |
3) dl ~ #water {font-style:italic;} | 4) dt ~ #water {font-style:italic;} |
5) dd + #water {font-style:italic;} | 6) dd ~ #water {font-style:italic;} |
27. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="div insects"> <ol class="insects"> <li>Bug</li> <li class="insects fly">Fly</li> <li>Mosquito</li> <li>Grasshopper</li> <li>Butterfly</li> </ol> </div> </body> </html>
1) .insects fly {background-color:blue;} | 2) .fly {background:0000FF;} |
3) .insects.fly {background-color:blue;} | 4) *.fly {background:blue;} |
5) .div .insects .fly {background-color:blue;} | 6) .fly.insects {background-color:blue;} |
7) div .insects .fly {background-color:#0000FF;} | 8) .insects + .fly {background-color:blue;} |
28. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Typi non habent claritatem insitam.</p> <p>Claritas est etiam processus dynamicus.</p> <p>Mirum est notare quam littera gothica.</p> <p>Eodem modo typi</p> </body> </html>
Lorem ipsum dolor sit amet.
Typi non habent claritatem insitam.
Claritas est etiam processus dynamicus.
Mirum est notare quam littera gothica.
Eodem modo typi
1) p:first-line(2n) {color:blue;}
body div p {color:black;} |
2) p:nth-child(2n) {color:blue;}
p {color:black;} |
3) p:nth-child(n2) {color:blue;}
p {color:black;} |
4) p:nth-of-type(even) {color:blue;}
div p {color:black;} |
5) p:nth-child(2n) {color:blue;}
p:nth-child(n) {color:black;} |
6) p:nth-of-child(even) {color:blue;}
p {color:black;} |
29. Which of the selectors can select only hyperlinks?
1) :visited | 2) :active |
3) :focus | 4) :link |
5) :empty | 6) :hover |
30. What CSS code can be used in the file style.css, in order the shown result to be obtained?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Water</dt> <dd id="water" class="drink">Transparent drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> <dt>Tea</dt> <dd>Hot drink</dd> </dl> </body> </html>
1) :root #water {font-weight:bold;} | 2) :root dd[id*=ate] {font-weight:bold;} |
3) :root #water.drink {font-weight:bold;} | 4) :root dt.drink {font-weight:bold;} |
5) html:root #water {font-weight:bold;} | 6) body:root #water {font-weight:bold;} |