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

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

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

4. CSS cannot be applied over XML document.

Answers

5. Which of the following properties can be inherited?

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

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. Site 4
  2. Site 3
  3. Site 2
  4. Site 1
  5. Site 0
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

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

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

9. What does MIME abbreviation stand for?

Answers

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

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. Bug
  2. Fly
  3. Mosquito
  4. Grasshopper
  5. 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

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. Bug
  2. Fly
  3. Mosquito
  4. Grasshopper
  5. 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

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

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

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

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

17. Important author styles have highest priority.

Answers

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

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">
Answers

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

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

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

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

24. CSS specificity is used to determine the precedence of the CSS style declarations with the same origin.

Answers

25. CSS can be use to generate content.

Answers

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

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. Bug
  2. Fly
  3. Mosquito
  4. Grasshopper
  5. 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

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

29. Which of the selectors can select only hyperlinks?

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

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