HTML Basic Styling - Mock Test

Question 1 of 20

A developer uses the following inline style to set a paragraph's background color:

<p style='background-color: #FF0000;'>This is red background</p>

What will happen if the background color is set to 'red' in the stylesheet and to '#FF0000' inline?

Choose 1 answer

A. The background will be 'red' as specified in the stylesheet.

B. The background will be '#FF0000' due to inline style priority.

C. The background will be red and the inline style will be ignored.

D. An error will occur because of conflicting styles.

Question 2 of 20

Which of the following methods can be used to add styles to an HTML document?

Choose 3 answers

A. Inline styles using the 'style' attribute

B. External stylesheets using the <link> tag

C. Embedded styles using the <style> tag

D. Adding styles directly into the <body> tag

Question 3 of 20

What will happen if a developer includes both an external stylesheet and an internal stylesheet, and both define different styles for the same element?

Choose 1 answer

A. The internal stylesheet will take precedence over the external stylesheet.

B. The external stylesheet will take precedence over the internal stylesheet.

C. The browser will throw an error due to the conflicting styles.

D. Neither style will be applied.

Question 4 of 20

True or False: External stylesheets are applied faster than inline styles due to lower network load.

Choose 1 answer

True

False

Question 5 of 20

A developer uses the following code to style a paragraph:

<p style='color: rgba(255,0,0,0.5);'>This is semi-transparent text</p>

What does the '0.5' value represent?

Choose 1 answer

A. The level of red in the text.

B. The opacity of the text color.

C. The brightness of the text color.

D. The contrast of the text color.

Question 6 of 20

A developer links to an external CSS file with the following code:

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

Where should this <link> tag be placed in an HTML document for the best performance?

Choose 1 answer

A. Inside the <head> tag

B. At the bottom of the <body> tag

C. Immediately after the <title> tag

D. Inside the <footer> tag

Question 7 of 20

What will happen if a developer uses the following code to style an element?

<div style='color: red; color: blue;'>Sample Text</div>

Choose 1 answer

A. The text will be red.

B. The text will be blue.

C. The text will be both red and blue.

D. An error will occur due to multiple conflicting color definitions.

Question 8 of 20

Which of the following is NOT a valid CSS color value?

Choose 1 answer

A. rgb(255,0,255)

B. #FF00FF

C. hsl(300, 100%, 50%)

D. color(100,50,100)

Question 9 of 20

True or False: The <style> tag must be placed inside the <head> tag for an HTML page to function properly.

Choose 1 answer

True

False

Question 10 of 20

A developer includes the following code:

<style>
p { color: red; }
</style>
<p>First paragraph</p>
<p style='color: blue;'>Second paragraph</p>

What will be the color of the second paragraph?

Choose 1 answer

A. Red

B. Blue

C. Both colors will be applied.

D. An error will occur.

Question 11 of 20

Which of the following ways to specify a color in CSS is valid?

Choose 3 answers

A. color: #FF5733;

B. color: rgb(255, 87, 51);

C. color: hsl(9, 100%, 60%);

D. color: color(255, 87, 51);

Question 12 of 20

A developer writes the following CSS:

p { color: red !important; }
p { color: blue; }

What will be the text color of paragraphs on the page?

Choose 1 answer

A. Red

B. Blue

C. Both red and blue

D. An error will occur.

Question 13 of 20

Which of the following CSS rules would result in fully transparent text?

Choose 4 answers

A. color: rgba(255, 0, 0, 0);

B. color: transparent;

C. color: #000000; opacity: 0;

D. color: hsl(0, 100%, 50%); opacity: 0;

Question 14 of 20

What happens if you set 'opacity: 0.5;' on a div element?

Choose 1 answer

A. Only the text inside the div will be semi-transparent.

B. Both the text and background of the div will be semi-transparent.

C. The div's background will be semi-transparent, but the text will remain opaque.

D. An error will occur.

Question 15 of 20

A developer uses the following CSS to style a div:

div {
 background-color: #00FF00;
 color: #000000;
}

What will happen if the user adds this div inside another div that has its background-color set to 'inherit'?

Choose 1 answer

A. The background color of the inner div will remain #00FF00.

B. The background color of the inner div will inherit the parent's background color.

C. Both divs will take the color of the body element.

D. An error will occur.

Question 16 of 20

What is the correct way to change text color to white and the background color to black using inline CSS?

Choose 1 answer

A. <p style='color: black; background-color: white;'>

B. <p style='color: #FFFFFF; background-color: #000000;'>

C. <p style='color: rgb(0,0,0); background-color: rgb(255,255,255);'>

D. <p style='color: 000; background-color: FFF;'>

Question 17 of 20

Which CSS property is used to specify the space between the content and the border of an element?

Choose 1 answer

A. margin

B. padding

C. border-spacing

D. space

Question 18 of 20

What happens when the CSS property 'background-color: transparent;' is applied?

Choose 1 answer

A. The background color will be fully transparent.

B. The text will be fully transparent.

C. The background color will default to white.

D. An error will occur.

Question 19 of 20

What will happen if a developer sets 'color: red;' on a <div> element?

Choose 1 answer

A. The entire content of the div will be red.

B. Only the text inside the div will be red.

C. The div's background will become red.

D. The div's border will become red.

Question 20 of 20

A developer uses the following CSS to style a heading:

h1 {
 color: #ff0000;
 font-size: 2em;
 text-align: center;
 background-color: #ffffff;
}

If the developer wants to override the background color for only the first <h1> element, which of the following is the best way to do this using inline CSS?

Choose 1 answer

A. <h1 style='color: blue;'>

B. <h1 style='background-color: #0000ff;'>

C. <h1 style='font-size: 3em;'>

D. <h1 style='text-align: left;'>

Basic Styling

Practice Test

Question 1 of 20

Choose 1 answer

Question 2 of 20

Choose 3 answers

Question 3 of 20

Choose 1 answer

Question 4 of 20

Choose 1 answer

Question 5 of 20

Choose 1 answer

Question 6 of 20

Choose 1 answer

Question 7 of 20

Choose 1 answer

Question 8 of 20

Choose 1 answer

Question 9 of 20

Choose 1 answer

Question 10 of 20

Choose 1 answer

Question 11 of 20

Choose 3 answers

Question 12 of 20

Choose 1 answer

Question 13 of 20

Choose 4 answers

Question 14 of 20

Choose 1 answer

Question 15 of 20

Choose 1 answer

Question 16 of 20

Choose 1 answer

Question 17 of 20

Choose 1 answer

Question 18 of 20

Choose 1 answer

Question 19 of 20

Choose 1 answer

Question 20 of 20

Choose 1 answer

Quick Link

Query

Follow Us