CSS Test

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>

item 0
item 1
item 2
item 3
item 4

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;}

Answers
a) all of them are correct	b) 1,2,3,4,6
c) 2,3,4,6	d) 1,2,6
e) there is no correct answer	f) 3,5

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>

Coffee: Black hot drink
Water: Transparent drink
Milk: White cold drink
Tea: Hot drink

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;}

Answers
a) all of them are correct	b) 1,3,4
c) 2,3,4,6	d) 2,4,5,6
e) there is no correct answer	f) 1,3,5

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;}

Answers
a) 1,4,5,6	b) 1,2,5
c) all of them are correct	d) 2,4,6
e) 2,3,6	f) 1,3,6

Answers
a) True	b) False

Answers
a) all of them can be inherited	b) 1,2,3
c) 2,4,6	d) 1,4,5
e) there is no correct answer	f) 2,3,6

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%;}

Answers
a) 1,2,5	b) 1,3,5
c) 3,4,6	d) 2,5,6
e) there is no correct answer	f) all the answers are correct

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;}

Answers
a) 1,3,6	b) 1,3,5
c) 2,4,6	d) 2,5
e) there is no correct answer	f) all the answers are correct

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

Answers
a) 1,2	b) 5
c) 3,4	d) 2
e) There is no correct answer	f) 6

Answers
a) Multiple Information Module Enumeration	b) Multiple Internet Marked Elements
c) Mobile Internet Module Exeptions	d) Multipurpose Internet Mail Extensions
e) Main Inserted Module Extension	f) Multiple Inserted Modular Elements

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;}

Answers
a) 1,3,4,5	b) 2,3,5,6
c) 1,2,3,6	d) 3,4,5,6
e) there is no correct answer	f) all the answers are correct

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>

Monkey
Horse
Dog
Cat
Pig

Bug
Fly
Mosquito
Grasshopper
Butterfly

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;}

Answers
a) 3,5,6	b) 1,2,4,5
c) 1,2,3,4	d) 3,4,5,6
e) there is no correct answer	f) all the answers are correct

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>

Bug
Fly
Mosquito
Grasshopper
Butterfly

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;}

Answers
a) 3,5,6,7,8	b) 1,2,4,5,6
c) 1,2,3,4,8	d) 3,4,5,6,7
e) there is no correct answer	f) all the answers are correct

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>

Monkey
Horse
Dog
Cat
Pig

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;}

Answers
a) 3,5,6,7,8	b) 1,2,4,5,6
c) 1,2,3,4,8	d) 3,4,5,6,7
e) there is no correct answer	f) all the answers are correct

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;}

Answers
a) 1,2,4,6,7,8	b) 1,3,4,7
c) 3,5,6,8	d) 1,2,4,7,8
e) there is no correct answer	f) 2,4,6,7

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;}

Answers
a) 1,4,6	b) 1,3,5
c) 2,5,6	d) 3,4,6
e) there is no correct answer	f) all the answers are correct

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;}

Answers
a) 1,4,5,6,7	b) 1,4,6
c) 2,3,6,8	d) 1,3,4
e) there is no correct answer	f) 2,4,5,6

Answers
a) True	b) False

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;}

Answers
a) 1,2,4,6	b) 1,3,4,5
c) 3,5,6	d) 1,2,4
e) there is no correct answer	f) all the answers are correct

<style type="text/css">
  @import url("style.css");
</style>

<style type="text/css">
  @import "style.css";
</style>

<style type="text/css">
  !import "style.css";
</style>

<link rel="stylesheet" @import "style.css">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" src="style.css">

Answers
a) 1,2,6	b) 3,4,5
c) 1,2,5	d) 4,5,6
e) There is no correct answer	f) 5,6

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;}

Answers
a) 1,3,4	b) 2,3,5,6
c) 2,5,6	d) 3,4,5
e) there is no correct answer	f) 2,6

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
Gosho
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;}

Answers
a) 1,3,6	b) 1,3,5,6
c) 2,4,5	d) 2,3,5
e) there is no correct answer	f) all the answers are correct

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;}

Answers
a) 1,2,3,4,5	b) 4,5,6
c) 1,2,3,6	d) 3,4,5
e) there is no correct answer	f) 2,4,5,6

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>

item 0
item 1
item 2
item 3
item 4

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%);}

Answers
a) all of them are correct	b) 1,6
c) 2,4	d) 3
e) there is no correct answer	f) 5

Answers
a) True	b) False

Answers
a) True	b) False

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>

Coffee: Black hot drink
Water: Transparent drink
Milk: White cold drink
Tea: Hot drink

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;}

Answers
a) 1,3,4,6	b) 1,2,3,4
c) 1,4,6	d) 2,3,5
e) none of them are correct	f) 4,5,6

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>

Bug
Fly
Mosquito
Grasshopper
Butterfly

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;}

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>

Coffee: Black hot drink
Water: Transparent drink
Milk: White cold drink
Tea: Hot drink

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;}

1) border	2) text-align
3) color	4) height
5) float	6) font-size

1) :visited	2) :active
3) :focus	4) :link
5) :empty	6) :hover

Answers
a) 1,2,4	b) 2,4,5
c) 2,4	d) 1,3,5,6
e) there is no correct answer	f) all the answers are correct

Answers
a) all the answers are correct	b) 1,4
c) 1,2,4,6	d) 1,2,3,4,6
e) there is no correct answer	f) 2,5,6

Answers
a) 1,2,3,5	b) 1,3,4,6
c) 3,4,5,6	d) 2,3,5
e) there is no correct answer	f) 2,5,6