1/39
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
---|
No study sessions yet.
Examine the following HTML code:
body {color: maroon;font-size: 12pt;}
p {color: gray;font-size: 12pt;}
.shirts {color: burgundy;font-size: 14pt;}
Blue shirts on sale
Get 'em while they last
What will be the color of the text in the second paragraph?
gray
You are building a style sheet to use to format most of the pages in a website. You want to make sure the style below applies only to specific paragraphs, not all paragraphs and not toward any other tags.
Using the dropdown arrow, indicate the correct selector for the requirements.
p.highlight {font-family: Arial, Helvetica, sans-serif; background-color: #AAEEAA;}
A web designer building a home page for a real estate business wants a box around each div containing a house and is using a .housebox class to set up the look of the box.
Using the drop-down arrows, fill in the missing code for the class according to the comment next to each missing code piece.
.housebox {
width: 250px;
border: 5px solid blue; / a blue line around each box /
padding: 10px; / a clear area around the content of each box /
margin: 8px; / the distance between a box and another element /
}
For each statement regarding the accessibility principles in CSS, select Yes if the statement is true and No if the statement is false.
Font sizes defined with ems are always resizable as one zooms in on a webpage. - Yes
Well-known fonts tend to be the most readable fonts on a webpage. - Yes
Font sizes defined with points are always resizable as one zooms in on a webpage. - No
You are constructing an external style sheet. You want hyperlinks to be slateblue, turn pink when a user moves the mouse over the link, and turn gray after the link has been visited.
Using the dropdown arrows, choose the correct selectors to accomplish these tasks.
a:link {color: slateblue;}
a:hover {color: pink;}
a:visited {color: gray}
You have the following code:
Welcome to our online store!
Check out what is on sale!
Use this code to answer the following questions. Select Yes if the statement is true and No if the statement is false.
The color of the second paragraph will be slateblue. - No
The heading color will be maroon. - Yes
The color of the first paragraph will be black. - Yes
Using drag and drop, arrange the order in which CSS styles take precedence as they apply to HTML code.
1. Inline styles
2. IDs
3. Classes
4. Internal style sheets
A junior web developer is asking you how to add comments to an external style sheet where the file is in draft mode. Which syntax will you tell the developer to use?
/ This is in draft mode /.
The bottom of a webpage for a shirt company is in need of some tags to better define the purpose for some blocks of code.
Using the dropdown lists, add the correct tags to the code.
For each type of link, use the dropdown lists to indicate whether the link is relative or absolute.
http://www.learnkey.com/mta_introduction_to_programming_Outline = Absolute
http://blog.learnkey.com = Absolute
images/shirt1.jpg = Relative
../styles/main.css = Relative
You have the following folder navigation set up on your web server:
With that knowledge, what would be the proper syntax for displaying an image called shirts1.png from the images folder on a the shirts.html webpage?
A new web developer is attempting to build a class to use on newsletter headings. The requirements for the class are as follows:
1. The first line of text needs to be indented the equivalent of two letter M's
2. Words need to be allowed to be broken across lines
3. The space between letters needs to be two pixels
Using the dropdown arrows, identify the properties needed for this class.
.specialheading {
text-indent: 2em;
word-wrap: break-word;
letter-spacing: 2px;
}
You are building the top part of a webpage. You want to use the second largest, to the smallest headings on the first five lines of text.
Using the dropdown lists, select the appropriate tags to use to fit the requirements of the webpage.
You are trying to create collapsible content on a webpage.
Using the dropdown lists, complete the code so that the Sale Items heading always shows and the sale items are collapsible content.
T-shirts and pullovers 20% off
Evaluate the following code and use it to answer the questions below. If the statement is true, select Yes. If the statement is false, select No.
.hiddenelement {visibility: hidden;}
.showelement {visibility: show;}
.collapseelment {visiblity: collapse;}
tag. - No
Which statements regarding using CSS across multiple browsers are true? (Choose two)
Many CSS frameworks are built to work across multiple browsers.
The -webkit prefix on a property indicates a property specific to Safari and Chrome browsers.
Which would be the correct markup for adding closed captioning in English, using a file called captions, to a video on a web page?
You have a single block of text named sidebar that you want to make sure is positioned on the right side of the page. This is going to be part of an internal style sheet.
You also have several sales items on a webpage that you want to have in bold, dark blue text.
Using the dropdown arrows, choose the correct selectors for the styles on the stylesheet.
#sidebar {
float: right;
}
.sales {
font-weight: bold;
color: darkblue;
}
Which statements are true regarding CSS frameworks and templates? (Choose two)
A CSS framework, not a template consists of multiple stylesheets and is used for shortcuts in building websites, specifically for responsive layouts.
A CSS template is a boilerplate for adding properties and attributes to selectors.
Evaluate the following statements regarding stylesheets and links. Select Yes if the statement is true or No if the statement is false.
http://certiport.com is an example of a relative link. - No
A
The following code does not show a scroll bar even though the code indicates as such. Which best explains the reason for this?
#sidebar {width: 250px;float: right;overflow: scroll;}
There is no height specified for the element
You have the following code in an internal style sheet on your web page:
body {background-image: url(images/shirt-back.png);background-repeat: repeat-x;background-color: #EEDDCC;}#textbox {background-color: #CCDDEE;}
The textbox ID is being used in a div element on the web page.
For the following questions, select Yes if the statement is true and No if the statement is false.
The background color of the textbox element will be #CCDDEE. - Yes
The background image size will be the native size of the image. - Yes
The background image will tile down the left side of the page. - No
For each measurement, indicate whether the measurement is relative or absolute.
em - relative
percentage - relative
px - absolute
vw - relative
vh - relative
Evaluate the following code. A developer is trying to get the background color of a webpage to be gray, but the background is beige. What is the fundamental reason for the background being beige?
An inline style supersedes both an internal and external style sheet.
Which HTML attribute can be applied to a series of links on a webpage to control the tab order of those links?
tabindex
You are in the process of creating a content page for a newsletter and need to mark up two blocks of text. The first block of text needs to be center aligned and needs to be positioned on the page.
The second block of text, contained within the first block of text, is a normal block of text within the flow of the webpage.
Using the dropdown arrows, add the tags necessary to properly markup the main area of the webpage.
Employee Spotlight
Travis has been at Shirts 'R Us for five years, working in the sales department. Travis has been a top employee for a long time.
You have an image, large_shirt.png, to display on screens that are at least 640 pixels wide. The image is 700 pixels wide by 800 pixels high.
For smaller screens, small_shirt.png should be displayed.
Using the drop-down arrows, choose the correct tags and attributes for the code.
A new web page needs a section of text that is self-contained in a block that can have its own background color and position on the page. Which tag is used to accomplish this need?
div
As part of building a web page for ordering shirts, you want to present a numbered list of instructions on how to order shirts to a buyer. The first item is displayed in the code.
Using the drop-down arrows, select the correct HTML tags to build this code.
You are in the process of styling a class; named feature, that does the following with an element:
The position is not affected by other elements
Positions itself on the right side of the webpage relative to the element before it
Using the dropdown arrows, select the correct properties and attributes into the class.
.feature {
position: static;
float: right;
}
A new web developer is building some test pages for a website. The developer wants some text that explains the page to be in the code, before the first paragraph, but not print on the page. Using the dropdown arrows, finish the code to complete the body of the webpage.
Insert text here
You are setting up a style for box borders that you want to apply multiple times to a web page. The border requirements are as follows:
A solid border
The color black
A line 3 pixels wide at the bottom and 1 pixel wide for every other side
5 pixel rounded corners.
Using the dropdown arrows, fill in the code needed to complete the style.
.borders {
border-style: solid;
border-color: black;
border-width: 1px 1px 3px 1px;
border-radius: 5px;
}
You are in the process of constructing a form and you want to make sure the form does the following:
Displays the thankyou.html page when submitted
Captures an input between 1 and 50 for a mailbox number
Has a default mailbox number of 0
Makes an email address mandatory
Using the dropdown arrows, fill in the code needed to finish coding this form.
Enter an email address:
You are in the process of building a table with a header row that spans the entire table and then two additional rows of information. The table just needs the code for the header row.
Using the dropdown arrows, fill in the code necessary to finish the table.
You are trying to ensure that a web page views at normal size both for a desktop device and for a mobile device.
You also want to make sure the webpage is not translated via Google Translate.
Using the dropdown arrows, add the tag and attributes necessary to finish the code to make this happen.
You are in the process of building a webpage that should use ISO-8859-1386979 for an encoding type and a description of "Discount Shirt Site."
Using the dropdown arrows, select the correct attributes into the code to accomplish this task.
You are using CSS to set up a box class with a defined height. You want to ensure that, if the amount of text in the boxexceeds the box's height, the text displays within the box, and one can scroll to see the rest of the text.
However, the scroll bar should only appear if necessary.
Using the dropdown arrows, complete the code for the class.
.box {
height: 300px;
overflow: auto;
}
You are in the process of buidling a form customers fill out to request information on items. You need to create a form areas that has a dropdown list of choices and code the first choice, TV.
Using the dropdown arrows, fill in the missing pieces of code.
How did you hear about us?
Describe what you are looking for:
A clothing department wants its webpage to have a sales.html page show inside the index.html page so that when the sales.html page updates, the index.html page reflects that update.
Use the dropdown arrows to complete the code needed to accomplish this task.
A web developer is trying to build a grid layout for a webpage. The grid needs to be three columns wide, with widths of 100 for the first and third columns. The second column width is defined by the width of the browser.
Using the dropdown arrows, finish the gridbox class, which defines the grid.
.gridbox {
display: grid;
grid-template-columns: 100px auto 100px;
}