2020 CIW Advanced HTML & CSS Review1

Consider the following CSS code that is used to position an image relative to text on an HTML page. How would you reference this code in HTML? \n \n .floatright{ \n float: right; \n }

Orion is creating a webpage using HTML and CSS. He wants the page layout to transition to any device and any size that users make the browser window. Which page layout method should he implement in order to control the placement of page elements while meeting his design requirements?

Liquid layout

Each element on a webpage is surrounded by a number of rectangle boxes that can be configured using CSS. Which choice correctly identifies the boxes included in the CSS Box Model?

Content, padding, border, margin

Which of the following statements best describes the purpose of the following code? \n \n .floatleft { \n float: left; \n margin: 5px; \n }

To position an element to the left of another element on the page

Your company uses a custom font for the company Web site. To add the custom font to your department’s intranet Web site, which at-rule is correct?

 @font-face {font-family: customfont; src: url("../media/customfont.ttf");}

Which of the following choices uses the correct syntax for a CSS rule in an external style sheet?

p {text-align:center; color:red;}

Simone is in charge of her company's website. Her boss wants a "one site fits all" solution that will reliably display on most or all computer devices. Which two technologies would be accomplish this?

HTML5 and CSS3

The following code is an example of a ______ selector: \n h1, h2, p { \n text-align: center; \n color: red; \n }

grouped

You have an external, internal and inline style for the

tag. All of the rules are different. Which CSS rule will the browser use when displaying the element?

inline rule

You want to place an picture in the bottom right hand corner of the screen, even when user scrolls. Which CSS positioning value will accomplish this task?

In fixed

You need to change single heading to a different color. What would quickest way to accomplish this task.

create an inline style inside of the heading tag you want to change

The following CSS code is specific for which browser? \n \n background: -webkit-linear-gradient(red, yellow);

Safari

Jolene wants to ensure that a website's pages render as expected by the target audience, regardless of the device used to access them. Which design model should she use?

\n Responsive Web Design

14. \n A CSS rule-set consists of a selector and a declaration block. What is the selector in the following code: h1 {color: blue;}

h1

You need to add the same CSS style to your images, headings and paragraph text on a Web site. Which CSS entry could accomplish this task?

.right {text-align: right;}

td { padding: 15px; }

td

What kind of selector is shown in the code below? \\n p {color: blue;}

HTML

You can only link one style sheet in your header.

False

Which of the following statements best describes an external CSS stylesheet?

\n A text file that contains CSS formatting instructions to define the font, color and position of elements on a webpage.

Kenna is preparing to validate several new pages for her company's website. Which element determines the code version or specification that the validator will use to check the webpages code?

Which statement regarding the compatibility of forms built using the HTML5 elements and attributes is correct? \n

\n Modern browsers support HTML5 forms but different browsers may display the same form differently.

The CSS position property specifies the type of positioning method used for an element. Which of the following is NOT a real value?

liquid

You want to apply a shadow effect to your

headings. The shadow effect should include a horizontal shadow, a vertical shadow, blur distance and a shadow color. Which CSS code accomplishes this task?

h1 {text-shadow: 3px 3px 3px #888888;}

Jorge has created an external style sheet named main.css and now he wants to associate this stylesheet with an HTML document. Which line of code will connect an HTML document to a stylesheet?

What kind of selector is shown in the code below? \n .box {color: blue;}

Class

You are creating navigation buttons for your Web page. You want good looking buttons with rounded corners. Which CSS3 property allows you to easily create rounded corners for buttons?

border-radius

Which code correctly links a webpage to an external stylesheet?

Gregor is creating a footer for a webpage and wants a solid line to appear above the footer. Which CSS declaration for the

element should he include in his stylesheet?

\n border-top-style: solid;

You are implementing CSS3 media queries on your site to create responsive design for different screen sizes. Your mobile Web site should only be used on devices with a screen width between 320 and 768 pixels. Which media query should you use?

media="screen and (min-width: 320px) and (max-width: 768px)"

You are updating your company site's code to HTML5, starting with the home page. Which new HTML5 structure element should you use for the top portion of the page, where you will place the company logo and description? \n

Media query is a CSS technique introduced in CSS3. It uses the __________ rule to include a block of CSS properties only if a certain condition is true.

@media

What is does the 0.1 represent in the following code? \n #p1 {background-color:rgba(255,0,0,0.1);}

opacity

Which choice lists the new HTML5 structure elements?

,

,

,

,

,

and

You want to place a picture on top of the page as a pop up add? Which CSS property will allow you to place the image on top of the page?

z-index

What kind of selector is shown in the code below? \n #box {color: blue;}

ID

Which new HTML5 structure element is intended to mark up the page's primary content, which is directly related to the page's subject?

\n

The latest version of CSS, CSS3, allows web designers to use custom fonts through the @font-face rule. Which properties are required for @font-face?

\n font-family and src

What is the difference between responsive web design (RWD) and mobile web design?

\n RWD pages adjust on-the-fly to any device, whereas mobile design simply creates a smaller, simpler version of the page.

Many web pages are based on a _______-view, which means that the page is divided into columns.

\n grid

Elements after a floating element will flow around it. To avoid this, use the __________ property.

clear

Bruno is updating his company's website using HTML5 and CSS3. He needs to make several changes, including adding a drop-shadow effect to all

headings on the site. What should he do?

In Use the CSS3 text-shadow property to style the

elements

You are updating a Web page from HTML 4.01 to HTML5. When you upload the page to the W3C validator, you receive a large number of errors. The errors surprise you because you consider yourself an HTML5 expert. What is the first thing you should check?

In Make sure the declaration is correct for HTML5.

Sam wants to create smooth buttons for his webpages easily and quickly. Which CSS3 property rounds the corners on the elements that he uses for the buttons?

border-radius

When combined with HTML, which technology will provide the most consistent and accessible interface for your website?

CSS

Which type of selector should only be used one time?

ID

Webpages should be aesthetically please, easy to read and easy to navigate. This is why page layout is important. What should you do to improve your page layout?

Provide content that is clear and concise

Which of the following semantic tags would you use to place information that is not directly related to the content of your website?

aside

Which of the corners would have a curve using the following code? \n border-radius: 15px 0px 0px 0px;

Top Left

\
Look at the image. Both A & B are

declarations