CSS 3 Test Questions

Is @keyframes an method of animations in CSS3?

• This is not a method at all of any CSS and only in Flash.
• Yes
• No

Answer: Yes

Which is correct use of border-radius?

• 5px 5px 5px 5px;
• any of these
• 2px;
• 2px 3px;

Answer: any of these

The two primary stylesheet languages are CSS and:

• SVG
• EHT
• XSL
• VMA

Answer: XSL

True or False: You can create a full navigation bar including background color, buttons, horizontal or vertical alignment using all CSS!

• True
• False

Answer: True

Pseudo-classes are used to represent ___________________.

• Static Events
• Dynamic Events
• Related Events
• Casual Events

Answer: Related Events

With the emergence of CSS3, CSS2 has become:

• defunct
• useless
• none of these
• destandarized

Answer: none of these

After assigning a value to a property you should end the statement with a:

• Dot
• Period
• Semi-colon
• Colon

Answer: Semi-colon

Before using CSS3 declarations it is important to:

• turn on CSS3 styling in the header
• turn off all other existing styles
• be aware of the browser support
• run a CSS3 JavaScript

Answer: be aware of the browser support

In HTML5, how can you visually center this <div class="center">hi</div>?

• .center{position:relative; left:50%;}
• .center{text-align:center;}
• .center{float:center;}
• .center{position:absolute; left:50%;}
• .center{margin:0 auto; width:250px; }

Answer: .center{margin:0 auto; width:250px; }

rgba differs from the opacity declaration in that:

• rgba controls only the element it references, while opacity controls itself and all child elements
• rgba works on all media types, whereas opacity is text-only
• rgba is the deprecated predecessor to opacity
• rgba controls itself and all child elements, while opacity controls only the element it references

Answer: rgba controls only the element it references, while opacity controls itself and all child elements

True or False? Round corners were supported before CSS3

• False
• True

Answer: False

Which one of the following selector checks if the attribute begins with "val"?

• [att^=val]
• [att~=val]
• [att>=val]
• [att*=val]
• [att/=val]

Answer: [att^=val]

What would the following CSS do? text-transform: capitalize;

• This wouldn't do anything
• Capitalize the first letter of every word
• Capitalize all letters

Answer: Capitalize the first letter of every word

How wide is the following div? div { box-sizing:border-box; width: 200px; padding: 20px; border:1px solid #000; }

• 242px
• 240px
• 200px
• 202px

Answer: 242px

Which is a recognized media type?

• handheld
• speech
• screen
• All of these

Answer: All of these

What are two of the four sizes with radial gradients?

• closest-angle, farthest-angle
• farthest-corner, farthest-angle
• closest-side, farthest-corner
• closest-angle, farthest-side

Answer: closest-side, farthest-corner

What does the font-size-adjust property do?

• It specifies the font-size relative to the root element
• It specifies the font-size relative to the parent element
• It specifies an aspect value for an element that will effectively preserve the y-width of the first choice font
• It specifies an aspect value for an element that will effectively preserve the x-height of the first choice font
• It specifies an aspect value for an element that will effectively preserve the x-height and y-width of the first choice font

Answer: It specifies an aspect value for an element that will effectively preserve the x-height of the first choice font

What is the earliest Internet Explorer and Chrome that supports multiple columns?

• 10.0, 4.0
• 11.0, 4.0
• 8.0, 3.0
• 9.0, 4.0

Answer: 10.0, 4.0

We write single ______ before the pseudo-class property.

• colon
• semi colon
• hash
• dot

Answer: colon

What do you need to change in order to visually modify a button on mouseover?

• Tag name
• Button file
• URL
• Hover state

Answer: Hover state

In HTML5, how can you visually center this <div class="center">hi</div>?

• .center{float:center;}
• .center{position:relative; left:50%;}
• .center{text-align:center;}
• .center{position:absolute; left:50%;}
• .center{margin:0 auto; width:250px; }

Answer: .center{margin:0 auto; width:250px; }

If a layout is created in a PSD with blue buttons in the nav, then it would be best for the speed of the page to:

• Cut and paste the button onto the page
• Slice the buttons and use an href
• Create the button using CSS
• Add the button img to the background using CSS

Answer: Create the button using CSS

True or False? The word-wrap and overflow-wrap properties have the same effects.

• True
• False

Answer: False

To use CSS to make the corners of an element round without the use of scripting use:

• Curvy corners
• Border-radius
• CSS box model
• Jquery

Answer: Border-radius

Is it true that the z-index property only applies to positioned elements?

• No
• Yes

Answer: Yes

To give the effect of using tables without actually using tables in the HTML use:

• display:column
• display:row
• display:table
• display:block

Answer: display:table

How would you make the background color of all the divs on a page blue?

• div { color: blue; }
• div# { background-color: blue; }
• div { style: "background-color: blue" }
• div { background-color: blue; }

Answer: div { background-color: blue; }

What does this code do? @import url("mystyle.css");

• import style rules from other style sheets
• links this stylesheet to the html page
• makes this shylesheet most important
• overrides all other stylesheet

Answer: import style rules from other style sheets

To change the state of a selector you must change its:

• Model
• Element
• Syntax
• Property

Answer: Property

Is the following valid? "box-shadow: -5px -5px -5px #ccc;"

• Yes
• No

Answer: Yes

In some instances CSS3 has replaced the need for:

• Flash movies
• Layout images
• Animated GIFs
• All of the these

Answer: All of the these