CSS Test Questions

What css selector selects the document’s root element

• :root
• :root-file
• :root-level
• :main-root

Answer::root

What is the correct CSS syntax?

• color:{#FFF;}
• color:#FF;
• color: #FFF;

Answer: color: #FFF;

What selector is used to select all elements?

• *
• div
• head
• body
• p

Answer: *

Which attribute creates space between content and its container?

• stuffing
• clear
• padding
• margin
• float

Answer: padding

Which of the following is correct to transform text into uppercase?

• h1 {text:uppercase;}
• h1 {text-transform:upper;}
• h1 {text-style:uppercase;}
• h1 {text-transform:uppercase;}

Answer: h1 {text-transform:uppercase;}

What is the correct shorthand syntax for a border?

• border: 1px solid #777;
• border: 1px rounded #777;
• border: 1px 1px solid #777;
• border: 1px solid #77;

Answer: border: 1px solid #777;

Which of the following is the correct example of using a class selector?

• h2 type1 {color: #000000;}
• h2 #type1 {color: #000000;}
• h2.type1 {color: #000000;}
• #h2 type1 {color: #000000;}

Answer: h2.type1 {color: #000000;}

Which of the following characters is used to begin a css declaration block?

• {
• .
• (
• None of these
• #

Answer: {

Normally, elements after a 'floated' element will flow around it. Which property can be used to avoid this?

• the negative-float property
• the clear property
• the no-float property

Answer: the clear property

Which of the following elements is a selector strong { color: red; }

• the curly braces '{' & '}'
• color
• strong
• red

Answer: strong

Which of the following is the correct syntax for importing one style sheet into another?

• style import="other.css";
• import href="other.css";
• link import="other.css";
• @import url("other.css");

Answer: @import url("other.css");

Which of the following is the correct syntax for using z-index?

• img {z index -1;}
• img {z-index:-1;}
• img: {z index:-1;}
• img z-index:-1}

Answer: img {z-index:-1;}

Which of these is an existing grid system?

• None of these
• Angular
• Jquery
• Bootstrap

Answer: Bootstrap

Which property is used to specify table borders in CSS?

• border
• dimension
• edge

Answer: border

Which statement is used in CSS to remove table borders?

• border-collapse: collapse;
• tableborder: false;
• table: remove-border;
• border: remove;

Answer: border-collapse: collapse;

What is the syntax for a customized cursor?

• Selector {cursor:value}
• Selector {value:cursor}
• Selector{value:property}
• Selector-cursor{style:value}
• Selector-style {property:value}

Answer: Selector {cursor:value}

Which of the following styles is valid?

• border: none;
• border= none;
• border: “none”;
• None of the above
• border= “none”;

Answer: border: none;

What is the correct CSS syntax for making all the <p> elements bold?

• p { font: bold; }
• <p style="text-size: strong">
• p { font-weight: 400; }
• p { font-weight: bold; }
• p { font-weight: strong; }

Answer: p { font-weight: bold; }

What is true about image sprites?

• It is a collection of images put into a single image.
• Using image sprites will reduce the number of server requests.
• Both of these

Answer: Both of these

Which measurement can't be used to size text in CSS?

• huge
• em
• pt
• %
• px

Answer: huge

Which property controls the additional space between the selected element(s) border and its content?

• none of these
• spacer
• padding
• margin

Answer: padding

On which position value does the z-index property work?

• position: fixed;
• all of the answers
• position: relative;
• position: absolute;

Answer: all of the answers

If an image is floated to the right, the following text flows around it...

• to the center
• to the right
• to the left
• to the top
• to the bottom

Answer: to the left

How do you make a list that lists its items with squares?

• list-style-type: square
• type: square
• list-type: square

Answer: list-style-type: square

To specify the style for a list, use the _________ property.

• ol-style
• listStyle
• Both ol-style and ul-style depending on the list type.
• ul-style
• list-style

Answer: list-style

Which property is used to specify table borders in CSS?

• edge
• dimension
• border

Answer: border

The Hex color #0000FF is equal to:

• yellow
• blue
• green+44pts
• red

Answer: blue

Which declaration removes bullets from a navigation list?

• list-bullets:none
• list-style-none
• list-style-type:no bullets
• list-style-type:none

Answer: list-style-type:none

Which style will cause all links to "http://www.smarterer.com" to be blue?

• a[link="http://www.smarterer.com"] { color: #0000ff; }
• a[href="smarterer.com"] { color: #ff0000; }
• a[href="http://www.smarterer.com"] { color: blue; }
• a[link="http://www.smarterer.com"] { color: blue; }

Answer: a[href="http://www.smarterer.com"] { color: blue; }

How much space does an element take up within the document (on modern browsers) if it has "display: none" styling applied?

• It will not take up any space.
• It will take up the minimum possible space.
• It will take up the maximum possible space.

Answer: It will not take up any space.

What is the correct way to set the color of hover links?

• <style type='text/css'> hover:a {color:#000000} </style>
• <style type="text/css"> a:hov {color:#000000} </style>
• <style type="text/css"> a->hover {color:#000000} </style>
• <style type="text/css"> a:hover {color:#000000} </style>

Answer: <style type="text/css"> a:hover {color:#000000} </style>

How can you add a comment to a stylesheet?

• Enclose comment between opening and closing comment markers as follows: <!-- and -->
• Enclose comment between opening and closing comment markers as follows: /* and */
• Enclose comment between opening and closing comment markers as follows: # and #
• Enclose comment between opening and closing comment markers as follows: <? and ?>

Answer: Enclose comment between opening and closing comment markers as follows: /* and */

How do you set the text color in a css rule?

• color:
• text-color:
• font-color:

Answer: color

Which of the following will apply a hex color of #445566 to each active link?

• a:active {text-color:#445566;}
• a:active {color:#445566;}
• a {active-color: #445566;}
• a {color:#445566;}

Answer: a:active {color:#445566;}