NEW
Font size
WorksheetsCSS Box Model
Total questions: 20
Worksheet time: 12mins
HTML elements are:
rectangular boxes
circles
imaginary
quadrants
All of the following are a part of the box model EXCEPT
radius area
padding area
margin area
content area
Which CSS property below is a part of the box model?
align
width
line-height
color
What is the area between the content and the border?
padding
margin
height
width
What is the outermost area of the CSS Box Model?
margin
padding
border
width/height
Which answer adds 10px of padding to the top and left, and 5px of padding to the bottom and right?
padding: 10px, 5px, 5px, 10px;
padding: 10px, 10px, 5px, 5px;
padding: 10px 5px 5px 10px;
padding: 10px 10px 5px 5px;
Which of the following will add 3px to the margin for all four sides?
margin: 3px;
margin: 3px 3px 3px 3px;
margin: 3px 3px;
all of them
Which of the following is NOT a border property?
type
style
width
color
Which of the following would create the border in this image?
border: solid 3px red;
border: solid 3px red; border-right: dashed 3px red;
border: solid 3px red; border-right: dashed 3px;
border: solid 3px red; border-left-style: dashed;
Which of the following will add 20px of padding ONLY to the bottom of an element?
bottom-padding: 20px;
padding: 20px 0;
padding: 0 20px 0 0;
padding-bottom: 20px;
Which below refers to the font fallback system?
*{font: 4em Arial;}
body{font-family: Arial;}
h1{font-family: Arial, Century Gothic, Polly, Sans Serif;}
*{font-style: normal;}
What order is padding defined?
top, right, bottom, left
top, left, bottom, right
right, left, top, bottom
top, bottom, right, left
What are the two types of values you can use to define a border-radius?
px, %
px, em
pica, inches
%, pica
The border-radius property does what to the element?
It rounds the corners on elements
It sharpens the corners on elements
Nothing, it only affects the margins
It adds small graphics on the corners of elements
True/False
To set the minimum width of a box I use
max-width
True
False
How much space do BLOCK elements take up?
Entire width of screen
As little width as possible
Entire width AND height of screen
dashed
dotted
solid
What order in shorthand declarations are borders established?
width, style, color
color, width, style
style, color, width
style, width, color
What is the correct HTML for referring to an external style sheet?
<link rel="stylesheet" href="mystyle.css">
<stylesheet>mystyle.css</stylesheet>
<style src="mystyle.css">
