Interactive Quiz 3. Using CSS Version 3 (CSS3)

What is the purpose of the element\[attribute^=value\] selector?

To select every instance of a specified element whose specified attribute begins with the specified value

Which statement is true about the element1\~element2 selector?

It selects each occurrence of element2 that is preceded by element1.

Which CSS3 border property should you use if you want to create a border that uses an image instead of just a line?

The border-image property

In the past, Web designers were forced to format their pages using only fonts that were installed (or likely to be installed) on users' computers. With CSS3, you can now specify any font you want, even custom fonts, using:

the @font-face rule

How can you include two or more different images in the background of your Webpage?

Specify two or more images in a single declaration using the background-image property.

What function does the -webkit- prefix perform?

The -webkit- prefix ensures that the CSS3 code that it precedes will render properly in Chrome, Safari, and iOS browsers.

Why should you use fluid images in your mobile Website?

The width and height of fluid images is specified in percentages rather than pixels, and therefore the images will never exceed the width of the mobile device screen.

What is the purpose of the element: last-of-type selector?

To select every instance of a specified element that is the last of its parent

The CSS3 box-shadow property has the following values, which can be listed in one declaration:

h-shadow: the horizontal shadow position, also referred to as x-offset

v-shadow: the vertical shadow position, also referred to as y-offset

blur: the distance of the shadow's blur

spread: the shadow size

color: the shadow color

inset: creates an inward shadow instead of an outward shadow

Which two of the above values are required?

h-shadow and v-shadow

What is the term for a set of tools, templates, or boilerplates that provide the basic foundation for responsive design in a Webpage, and then let you fill it with your own content?

Responsive design frameworks

The background-position property is a CSS1 property that defines the position of a background image, such as the left-top or center-bottom. Which CSS3 background property can be used to define the location to which the background-position property should be relative?

The background-origin property

What distinguishes responsive site design from mobile site design?

Responsive design aims to make Webpage elements adjust on-the-fly to accommodate any device.

What is an advantage of using a grid-based layout when developing a mobile Website?

It helps you determine which elements on your page can shrink or expand as the grid shrinks or expands.

How do you include a media query in your HTML code?

Write a Boolean operation to set a condition that returns a value of true or false.

In a CSS style sheet, which of the following determines the image behind the contents of a page?

The background-image property

What term describes a responsive design technique that adapts page elements to a device's screen size by assigning percentage-based dimensions to the elements?

Fluid

Which CSS3 font property should you use if you want to specify how the font should be spaced?

font-stretch

CSS3 provides several new text effect properties designed to expand the formatting capabilities of Webpage text. Which statement about the text effect properties is true?

CSS3 text effect properties can be used to produce effects that previously required the use of images.

If you want to create a click-to-call feature in your mobile site for smartphone users, which protocol should you use to create a phone link?

The tel protocol

Why can new features be added to the CSS3 specification more quickly than in previous versions to enhance its support of borders, backgrounds, colors, text effects, and so forth?

Because CSS3 provides a modularized standard

Which CSS3 selector selects every instance of a specified element whose specified attribute contains the specified substring value?

element\[attribute\*=value\]

Which protocol should you use to create a link in your mobile site that will allow smartphone users to send a text message?

The sms protocol

Which CSS3 border property should you use if you want to add a configurable shadow to a box?

The box-shadow property

Which CSS3 property is used to resize a background image?

The background-size property

What does the following code do?

It formats every

element that is preceded by an

element as teal text.

What is the term for a Web design approach that creates sites that adapt to many different viewing environments, such as different devices, browsers, and screen sizes?

Responsive Web Design

Which CSS3 property is used to specify transparency for an element?

The opacity property

What CSS3 property should you use if you want to apply a shadow effect behind characters in a Web document?

The text-shadow property

What function does the CSS3 background-clip property perform?

It determines whether the background extends into the border or not.

Why would you use the CSS3 border-radius property in your Web document?

To create rounded corners

How does CSS3 allow you to specify any font, even custom fonts, to use in Web documents?

In CSS3, font libraries can be automatically downloaded from a Web server to the client computer

What happens when you specify the value contain to the background-size property?

The background image is scaled to the largest size possible that allows both width and height to fit within the specified content area.

Which of the following is a CSS technique you can add to your style sheets to enable your page layout blocks to automatically adjust based on the device used to view your page? This task contains the radio buttons and checkboxes for options. Press the enter key to select the option.

Adding media queries to the style sheet reference in the tag

What happens when you specify the value cover to the background-size property?

The background image is scaled to the largest size possible that completely overlays the background area of the parent container while maintaining aspect ratio of the image

What properties are you required to use with the @font-face rule?

The font-family and src properties

Which CSS3 selector selects every instance of a specified element that is the first of its parent?

element: first-of-type