CHS Web Design Track

HTML5 and CSS3 7th Edition

Tutorial 4 Graphic Design with CSS Review

MULTIPLE CHOICE

The _____ element is used to contain an image file and can also be used to mark any page content that should stand apart from the main content of an article.
1. border
2. article
3. image
4. figure
Identify a true statement about the figcaption element.
1. It is the content that will appear within a figure box.
2. It is the description text that accompanies a figure.
3. It is placed either directly before or directly after a figure box content.
4. It is used to mark any page content to make it stand apart from the main content of an article.

Which of the following styles is used to specify the type of tiling to be applied to a background image, or even turn off tiling
1. background-repeat: type;
2. background-image: url(url);
3. background-attachment: type;
4. background-clip: type;
Identify the default type for the background-repeat style.
1. no-repeat
2. repeat
3. repeat-x
4. repeat-y
In the given image, which of the following types of background property does figure 2 denote
1. no-repeat
2. repeat
3. repeat-x
4. repeat-y
In the given image, which of the following types of background property does figure 4 denote
1. no-repeat
2. repeat
3. repeat-x
4. repeat-y
In the given image, which of the following types of background property does figure 6 denote
1. space
2. repeat
3. repeat-x
4. round
Identify the default type of the background-attachment property.
1. space
2. scroll
3. local
4. fixed
Which of the following background-attachment properties is similar to scroll, but is used for elements, such as scroll boxes, to allow the element background to scroll along with the content within a box?
1. space
2. round
3. local
4. fixed
Identify the property that can be used to change the definition of an element’s background.
1. background-repeat: type;
2. background-image: url(url);
3. background-attachment: type;
4. background-clip: type;
Identify the option that specifies whether an image scrolls with the content or is fixed in the following background property: background:color url(url) position / size repeat attachment origin clip;
1. position
2. origin
3. clip
4. attachment
Identify the option that defines how positions are measured on the background in the following background property:background: color url(url) position / size repeat attachment origin clip;
1. size
2. origin
3. clip
4. attachment
Which of the following properties is used to define the thickness of a specific border?
1. border-width: left;
2. border-side-width: width;
3. border-width: width;
4. border-width-style: thick;
To round off any of the four corners of a border, the _____ property should be applied.
1. border-width
2. border-radius
3. border-style
4. border-image
Identify the style that can be used to create elongated or elliptical corners.
1. border-radius: horizontal/vertical;
2. border-corner: style;
3. border-corner: type;
4. border-corner-radius: radius;
Identify the property that is used to apply a border image.
1. border-image: horizontal/vertical;
2. border-image: style;
3. border-image-radius: radius;
4. border-image: url(url) slice repeat;
If the slices of a graphic image do not fill the sides with an integer number of tiles, identify the repeat option that can be used with the border-image property to rescale the slices until they do.
1. round
2. space
3. stretch
4. repeat
Identify the repeat option in the border-image property that distributes extra space around the tiles when the slices don’t fill the sides with an integer number of tiles.
1. round
2. space
3. stretch
4. repeat
Identify the use of the inset keyword used in the box-shadow property.
1. It is used to mention the shadow color.
2. It is used to measure the distances of the shadow from the text in horizontal and vertical directions.
3. It is used to define the amount by which the shadow is stretched.
4. It is used to create an interior shadow.
To change the shadow size, the _____ parameter must be added to the box-shadow property, specifying the size of the shadow relative to the size of the object.
1. round
2. space
3. stretch
4. spread
The _____ size parameter of the radial-gradient function makes a gradient extend to the nearest background corner.
1. corner-side
2. closest-corner
3. side-corner
4. farthest-corner
Which of the following is the default shape value for the radial-gradient function?
1. Round
2. Square
3. Ellipse
4. Circle
Which of the following is the default size keyword in the radial-gradient function?
1. farthest-corner
2. farthest-side
3. closest-corner
4. closest-side
Identify a CSS3 2D transformation function that resizes an object by a factor of x horizontally.
1. rotate(angleX)
2. skewX(angleX)
3. scaleX(x)
4. translateX(offX)
Identify the syntax of the transform property.
1. transform: effect(params);
2. transform: horizontal vertical;
3. transform: radius;
4. transform: size shape at position;
Identify a CSS3 2D transformation function that resizes an object by a factor of x horizontally.
1. rotate(angleY)
2. skewY(angleY)
3. scaleY(y)
4. translateY(offY)
Which of the following is true of transformations in three dimensions?
1. Positive values along the axes are to the right, down, and away from a reader.
2. Positive values along the axes are to the left, up, and away from a reader.
3. Negative values along the axes are to the right, down, and toward a reader.
4. Negative values along the axes are to the left, up, and away from a reader.
Identify the CSS3 3D transformation function that shifts an object offX pixels horizontally, offY pixels vertically, and offZ pixels along the z-axis.
1. translate3d(offX, offY, offZ)
2. perspective(p)
3. rotate3d(offX, offY, offZ, angle)
4. scale3d(offX, offY, offZ)
Identify a true statement about the perspective property.
1. A larger perspective value causes railroad tracks to converge over an apparently shorter distance.
2. The perspective property can be used when there are several transformed objects within a container that all need to appear within the same 3D space within a common perspective.
3. A smaller perspective value causes the railroad tracks to appear to go farther before converging.
4. The perspective property uses a negative value that measures the strength of the perspective effect with higher values resulting in more extreme distortion.
A final way to alter an object is through a Cascading Style Sheets (CSS) _____.
1. filter
2. box model
3. border property
4. visual design style
Which of the following angles used in the filter function hue-rotate (angle) displays the complimentary colors?
1. 0deg
2. 180deg
3. 90deg
4. 360deg
Which of the following values decreases the brightness in the filter function brightness?
1. Values less than 0
2. Values from 2 to 5
3. Values from 0 to 1
4. Values greater than 5
Which of the following Cascading Style Sheets (CSS) 3 filters applies transparency to an image?
1. blur
2. invert
3. grayscale
4. opacity
Filter functions can be combined in a _____ to create new effects.
1. comma-separated list
2. semicolon-separated list
3. colon-separated list
4. space-separated list
In a client-side image map, _____ are defined regions within an image that can be linked to different URLs.
1. borders
2. figure boxes
3. hotspots
4. drop shadows
Each hotspot within the map element is defined using the _____ element.
1. header
2. article
3. space
4. area
Which of the following shape values represents the remaining area of an inline image not covered by any hotspots?
1. default
2. circle
3. rect
4. poly
Identify the coordinate attribute for the rectangular hotspots of an image.
1. coords=“x1,y1,x2,y2,…”
2. coords=“0,0,width,height”
3. coords=“left,top,right,bottom”
4. coords=“x,y,radius
Which of the following coordinate values is used to define polygonal hotspots for an image?
1. coords=“x1,y1,x2,y2,…”
2. coords=“0,0,width,height”
3. coords=“left,top,right,bottom”
4. coords=“x,y,radius
Which of the following defines the default hotspot for an image?
1. coords=“x1,y1,x2,y2,…”
2. coords=“0,0,width,height”
3. coords=“left,top,right,bottom”
4. coords=“x,y,radius

Sam is trying to decide the best way to design the background of his web page. He would like to add background images and background styles to his design. He needs to understand how browsers load a background image and learn about background style properties.

Sam wants the browser to load a background image and repeat the image in both the vertical and horizontal directions until the background is filled. This process is known as _____.
1. painting
2. tiling
3. papering
4. drawing
Sam wants to change the position of an image on his web page. He wants to place the background image 30 pixels to the right of an element’s left edge and 30 pixels down from the top edge. Identify the correct style that Sam should use.
1. background-position: 30px;
2. background-position: 30px vertical;
3. background-position: 30px 30px;
4. background-position: t_edge, 30px;
Sam needs to know how to tell the browsers to scale the image in order to cover all of the background while still retaining the proportions of the image, even if that means cropping the image. The keyword Sam should use in the background-size: property is _____.
1. contain
2. content
3. cover
4. auto

Scott works for an online retailer and has to format the border around each element on their web page. He has to set the border design and the border color for each element. He needs to understand how the appearance and color of the border can be defined.

Scott wants to use the color gray for the top and left borders and black for the right and bottom borders for an element. Which of the following should he use to define this?
1. border-color: gray black gray black;
2. border-color: gray, black, gray, black;
3. border-color: gray black black gray;
4. border-color: gray, black, black, gray;
Scott wishes to modify the combination of the borders used on an element. He wants to use a double line for the top/bottom borders and a single solid line for the left/right borders. Which of the following border styles should he use?
1. border-style: double solid;
2. border-style: double double solid solid;
3. border-style: solid double;
4. border-style: double solid solid double;

TRUE FALSE

Tiling is when a browser loads a background image and then repeats the image in both the vertical and horizontal directions until the entire background is filled.
Even if the background images are hidden, the tiling process continues behind the page body.
A background image is attached to its element so that as the element content is scrolled through, the background image remains still.
If a single value is specified in the background-position property, the browser applies that value to both the horizontal and vertical position.
A background image can be placed using the keywords left, center, and right for the vertical position and top, center, and bottom for the horizontal position.
The background-position property is only useful for non-tiled images because a tiled image fills the background and it usually doesn't matter where the tiling starts.
By default, an element’s background is defined to extend only through the padding space and not to include the border space.
If a background extends through the border space by default, all coordinates for the image position are measured from the bottom-left corner.
The size of a background image is smaller than the size stored in the image file
Backgrounds are added in the reverse order in which they’re listed in a style rule.
The radii of individual corners are equal to the radii of hypothetical circles placed at the corners of a box with the arcs of the circles defining the rounded circles.
Multiple shadows can be added to text by including each shadow definition in a comma-separated list.
Box shadows can only be placed outside an element.
By default, a box shadow has the same size and dimensions as its page object offset in the horizontal and vertical direction.
The default direction for a linear color gradient is horizontal, starting from the left of an object and moving to the bottom.
When parameters of the radial-gradient function are omitted, they take their default values.
The only requirement for a repeating gradient is that a stopping position is required for the first color in the list that is less than the size of the object background.
In the opacity property, if the value is 0, it means an object is completely opaque.
A smaller perspective value causes a pair of railroad tracks to converge over an apparently shorter distance, while a larger perspective value causes the tracks to appear to go farther before converging.
Client-side image maps are easier to create but rely on a connection to the server in order to run.
There is no limit to the number of hotspots one can add to an image map.

SHORT ANSWER

_________ is similar to the process of filling up a floor or other surface with tiles.
_________ are translucent graphics displayed behind the content of a web page with a message that the content material is copyrighted or in draft form or some other message directed to the reader.
In the background-clip property, the _________ type is used to extend the background only through the element content.
In the background-clip property, the _________ type is used to extend the background only through the padding space.
A _________ is a border that is based on a graphic image.
In the background-clip property, the _________ type is used to extend the background only through the border space.
A visual impact can be given to the text on a page by using Cascading Style Sheets (CSS) to add a shadow using the _________ property.
Apart from drop shadows, another way to modify the background color is through a _________ in which one color gradually blends into another color or fades away if transparent colors are used.
A _________ is a color gradient in which the background color transitions from a starting color to an ending color along a straight line.
A _________ represents the point at which a specified color ends and the transition to the next color begins.
A _________ is a color gradient that starts from a central point and proceeds outward in a series of concentric circles or ellipses.
Whole objects that are semi-transparent can be created using the _________ property.
A _________ is a change that involves three spatial axes: an x-axis that runs horizontally across the page, a y-axis that runs vertically, and a z-axis that comes straight out of the page toward and away from the viewer.
_________ is a measure of how rapidly objects appear to recede from a viewer in a 3D space.
Perspective can be thought in terms of railroad tracks that appear to converge at a point, known as the _________.
Cascading Style Sheets (CSS) _________ adjust how a browser renders an image, a background, or a border by modifying an object’s color, brightness, contrast, or general appearance.
Hypertext Markup Language (HTML) allows division of an image into different zones, or _________, which can then be linked to different URLs through information provided in an image map.
A _________ image map is an image map that is defined within a web page and handled entirely by a web browser.
A _________ image map relies on a program running the web server to create and administer the map.
To apply an image map to an image, the _________ attribute is added to the img element.

Check Your Answers