EXAM OF DESIGN(HTML5,CSS3)

1. What does CSS stand for?

(a) Cascading Script Style (b) Cascading Style Sheets

(c) Computer Style Sheets (d) Creative Styling Solutions

2. Which HTML attribute is used to apply CSS styles directly to an HTML

element?

(a) style (b) CSS (c) class (d) id

3. Which CSS property is used to control the size and layout of boxes in

CSS?

(a) color (b) font-family (c) width (d) background-color

4. What is the correct CSS syntax to select an element with a specific

class?

(a) .class (b) #class (c) .class-name (d) class:

5. Which CSS property is used to control the spacing between lines of text?

(a) margin (b) padding (c) line-height (d) font-size

6. What is the correct CSS syntax to select an element with a specific ID?

(a) .id (b) #id (c) #id-name (d) id:

7. Which CSS property is used to change the color of text?

(a) color (b) background-color (c) font-color (d) text-color

8. How can you include an external CSS file in an HTML document?

(a) style tag (b) tag (c) tag (d) tag

9. What is the CSS property used to add a background image to an element?

(a) background-image (b) image-url (c) background-url (d) image-background

11. Which CSS property is used to control the size of text?

a) font-family

b) font-weight

c) font-size

d) text-size

12. How do you apply a CSS style to all elements?

a) #h1 {}

b) .h1 {}

c) h1 {}

d){}

13. Which CSS property is used to control the spacing between

letters?

a) margin

b) padding

c) line-spacing

d) letter-spacing

14. What is the correct CSS syntax to select all elements

inside a specific element?

a) parent-element all {}
b) parent-element > {}

c) parent-element ~ {}

d) parent-element * {}

15. Which CSS property is used to create rounded corners on an

element?

a) border-radius

b) corner-radius

c) rounded-corners

d) border-style

16. How do you apply multiple CSS classes to an element?

a) .class1, .class2 {}

b) #class1 .class2 {}

c) class1 class2 {}

d) class1 > class2 {}

17. What is the CSS property used to add shadows to elements?

a) shadow

b) box-shadow

c) text-shadow

d) element-shadow

18. How do you select all elements of a specific type in CSS?

a) .element-type {}

b) #element-type {}
c) * {}

d) element-type {}

19. Which CSS property is used to control the vertical

alignment of text within an element?

a) text-align

b) vertical-align

c) line-height

d) align-content

20. What is the CSS property used to control the display order

of overlapping elements?

a) z-index

b) position

c) order

d) display

21. How do you apply a CSS style to a specific element based

on its state, such as when it is hovered over or clicked?

a) :state

b) ::state

c) .state

d) :state{}

22. Which CSS property is used to control the transparency of

an element?
a) opacity

b) transparent

c) visibility

d) background-opacity

23. How do you apply a CSS style to the first child element of

a parent element?

a) first-child {}

b) first-element {}

c) :first-child {}

d) :first-element {}

24. What is the CSS property used to control the positioning

of an element?

a) position

b) top

c) left

d) all of the above

25. How do you select an element with a specific attribute

value in CSS?

a) attribute[value]

b) attribute = value

c) attribute:value

d) attribute ~ value

26. What is the CSS property used to create an underline

effect on text?
a) text-decoration

b) underline

c) text-underline

d) line-decoration

27. How do you select the last element of a specific type in

CSS?

a) .element-type:last {}

b) #element-type:last {}

c) :last-child {}

d) :last-element {}

28. Which CSS property is used to control the positioning of

background images within an element?

a) background-position

b) image-position

c) background-align

d) image-align

29. How do you apply a CSS style to an element when it is

being clicked or activated?

a) :active

b) :hover

c) :click

d) :activate
30. What is the CSS property used to control the spacing

between words?

a) word-spacing

b) letter-spacing

c) line-spacing

d) text-spacing

31. Set the color of all <p> elements to red.

<style>
{
red;
}
</style>

32. Set the text color to red, for the element with
id="para1".

<style>
{
red;
}
</style>
<body>
<h1>This is a heading</h1>
<p id="para1">This is a paragraph</p>
</body>
33. Set the text color to red, for elements with
class="colortext".

<style>
{
red;
}
</style>
<body>
<h1>This is a heading</h1>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>

34.] Set the text color to red, for all <p> and <h1> elements.
Group the selectors to minimize code.

<style>
{
red;
}
</style>

<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

35.] Set the text color to red, for all <p> and <h1> elements.
Group the selectors to minimize code.

<style>
{
red;
}
</style>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

36.] Add an external style sheet with the URL: "mystyle.css".

<head>

</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

37.] Set the page's background color to red.

<style>
{
red;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

38.] Set the page's background color to red, by using an

inline style.

<body ="background-color: red">

<h1>This is a heading</h1>
 <p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

39.] Insert the missing parts to make the CSS code correct.

<style>
p

color
red;

</style>

40.] Set the background color of the <h1> element to

"lightblue".

<style>
h1 {
: lightblue;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

41.] Set "paper.gif" as the background image of the page.

<style>
body {
:
;
}
</style>
<body>
 <h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

42.] Make the background image repeat only vertically.

<style>
body {
background-image: url("img_tree.png");
:
;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

43.] Specify that the background image should be shown once,

in the top right corner.

<style>
body {
background-image: url("img_tree.png");
:
;

:
;
}
</style>

<body>
<h1>This is a heading</h1>
 <p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

44.] Use the correct background property to make the

background image NOT scroll with the rest of the page.

<style>
body {
background-image: url("img_tree.png");
:
;
}
</style>

45.] Use the border shorthand property to set a "4px",

"dotted", "red" border for the <p> elements.

<style>
p {
:
;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
46.] Use the correct border property to set the border color
to "red".

<style>
p {
border-style: dotted;
border-width: 4px;
: red;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

47.] Use the correct border property to set the LEFT border to
"dotted".

<style>
p {
: dotted;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
48.] Use the correct border property to add ROUNDED borders to
the <p> elements.

<style>
p {
border: 2px solid red;
: 5px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

49.] Add a 20 pixels left margin to the <h1> element.

<style>
h1 {
: 20px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
50.]
Use the shorthand margin property to add 20 pixels of top and
bottom margins, and 40 pixels of left and right margins, on
the <h1> element.

<style>
h1 {
margin:
;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

51.] For the <h1> element, use the shorthand margin property
to add these margins:
left: 10px
right: 15px
top: 20px
bottom: 25px
<style>
h1 {
margin:
px
px
px
px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
52.] Use the margin property to center align the <h1> element.

<style>
h1 {
margin:
;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

53.] Set the top padding of the <h1> element to 30 pixels.

<style>
h1 {
: 30px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

54.] Set the padding of all sides of the <h1> element to 30

pixels.

<style>
h1 {
: 30px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

55.] Use the shorthand padding property to add 10 pixels left

and right padding, and 40 pixels top and bottom padding, on
the <h1> element.

<style>
h1 {
padding:
px
px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

56.] Set the height of the <h1> element to "100px".

<style>
h1 {

: 100px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

57.] Set the width of the <h1> element to "50%".

<style>
h1 {
: 50%;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

58.] Set the width of the <div> element to "200px".

<style>
{
:
;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>

59.] Add a 2px solid red border to the <div> element.

<style>
{
width: 200px;

: 2px solid red;

}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>
60.] Add 25 pixels space between the <div> element's border
and its content.
<style>
div {
width: 200px;
border: 2px solid red;
: 25px;
}
</style>
<body>
<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>
</body>