HTML & CSS multiple choice (code academy)
Which of the following tags would contain the HTML for a web page's visible content?
<body>
Which of the following elements will directly affect the vertical spacing in an HTML layout?
<br />
The following HTML code should only exist within which one of the following tags? <title>Codecademy</title>
<head>
Which of the following tags contains metadata about the webpage?
<head>
All HTML code must be nested within which of the following tags?
<html>
Which of the following tags can be used to add a paragraph to a web page?
<p>
CSS code can be written in an HTML file with which of the following tags?
<style>
When offset properties are specified, how will the following property affect the positioning of the div? div.container { position: relative; }
Changes to the div's position will be made relative to its natural position.
Headings, paragraphs, lists, and divs are all examples of which of the following types of elements?
Block level
What is one advantage of using percentages or ems over pixels when specifying the dimensions of a box?
Both allow content to adjust to varying display sizes.
The acronym "HTML" stands for which of the following?
HyperText Markup Language
The following CSS code attempts to set the color of a paragraph using a named color, but fails to do so. Why? p { color: bold; }
bold is not a valid color keyword in CSS.
The following CSS code sets the typeface of the heading to Times New Roman. Why? h1 { font-family: Garamond, Times, serif; }
The Garamond font is not available on the user's computer, but Times is.
The contents of the <title> tag will appear where in a modern browser?
The browser's tab or title bar
The following HTML code attempts to label a heading with two classes, but fails to do so. Why? <h1 class="book,domestic">The Way of the Deep</h1>
The comma should be deleted and replaced with a single space between both classes.
When the dimensions of an element's box are modified, how is the content within the box affected?
The content will be unaffected.
Which of the following two CSS properties are used to set an HTML element's foreground color and background color, respectively?
color and background-color
Why should the document type declaration be included in all HTML documents?
To specify the HTML standard being used in the document.
Use the following CSS code to identify the border thickness of each side of the heading's box. h1 { border: 1px 3px 5px 3px; }
Top: 1 pixel, Right: 3 pixels, Bottom: 5 pixels, Left: 3 pixels
Use the following CSS code to identify the padding on each side of the div's content. div.heading { padding: 2px 4px 6px 4px; }
Top: 2 pixels, Right: 4 pixels, Bottom: 6 pixels, Left: 4 pixels
div.heading { margin: 5px 10px 20px 10px; }
Top: 5 pixels, Right: 10 pixels, Bottom: 20 pixels, Left: 10 pixels
The following CSS code attempts to modify the width and height of a heading's box, but fails to do so. Why? h1 { height: 200; width: 250; }
Units are not specified for 200 and 250, so the browser does not know how to interpret the value.
Take a look at the following CSS code. Can it be improved in any way? body h1 { color: #BB44FF; }
Yes, by removing body from the selector
The background-size property accepts two values: cover and contain. What is the difference between each value?
cover will expand an image to fit its container, whereas contain will letterbox the image in the container.
Which of the following properties would allow multiple div elements with class .block to display on one line? div.block { height: 100px; width: 100px; background-color: Red; display: ? }
inline
The following CSS code attempts to select an HTML element with an class of heading, but fails to do so. Why? heading { color: Red; }
it should be #heading
The following code changes all main headings to uppercase. Unfortunately, it also decreased the spacing between each word in the heading, making it much more difficult to read. What property should be modified to make the headings easier to read? h1 { text-transform: uppercase; }
word-spacing
Which of the following characters allows you to select all HTML elements on the page?
*
Which of the following characters targets all HTML elements on a page?
*
Which of the following z-index values will ensure that the fixed position element appears on top of the relatively positioned element? div.navigation { position: fixed; background-color: Blue; z-index: ? } div.heading { position: relative; z-index: ? }
2 and 1, respectively.
According to the W3C recommendation, what's the appropriate way of indenting nested HTML elements?
2 spaces
You wish to link a CSS file called main.css to an HTML file. Which of the following lines of code correctly links the HTML file and the stylesheet? // 1 <link href="main.css" type="stylesheet" rel="text/css" /> // 2 <link href="main.css" type="stylesheet" rel="css/text" /> // 3 <link href="main.css" type="text/css" rel="stylesheet" /> // 4 <link href="main.css" type="css/text" rel="stylesheet" />
3
How many different heading elements does HTML support?
6
Which of the following options would change div element's box from a square to a perfect circle? div { height: 60px; width: 60px; border-radius: ? }
60px or 100% would both work.
Which of the following tags instructs the browser to expect a well-formed HTML document?
<!DOCTYPE html>
By default, all HTML elements are contained in which of the following?
A box
Which of the following best describes why HTML comments are important to web development?
Comments clarify code and makes code easier to understand for other developers
What are the two components of HTML attributes?
Name, Value
: Separating HTML and CSS into their own files helps accomplish which of the following?
Separating HTML structure from CSS style to make code easier to read and reuse.
A stylesheet will not affect HTML code unless which of the following occurs?
The stylesheet is is linked to the HTML page using a <link> tag.
CSS declarations must terminate with which of the following characters?
a semicolon ;
Which of the following values would place the background image at the bottom left of the div's background? div.main { height: 500px; width: 500px; background-image: url("https://www.codecademy.com/images/computer.jpg"); background-repeat: no-repeat; background-position: ? }
left bottom
The lines of text in a paragraph are very close to each other, making the paragraph difficult to read. Which of the following CSS properties would best increase the readability of the paragraph?
line-height
The following CSS code attempts to select an HTML element with an ID of mouse, but fails to do so. Why? mouse { color: SlateGrey; }
mouse { color: SlateGrey; } mouse should be changed to #mouse.
The following CSS code attempts to set the text color of all heading elements, but fails to do so. Why? <h1> { color: blue; }
the <h1> characters should be replaced with h1.
The following code creates a link to another page. Which of the following will cause the page to open in a new browser window? <a href="https://www.codecademy.com/">Codecademy</a>
Add the target attribute, with its value set to _blank
What changes can be made to the CSS code below to improve readability, if any? p { border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; }
All four CSS declarations can be replaced with one single border declaration.
What improvements can be made to the CSS code below, if any? div.container { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; }
All four CSS declarations can be replaced with one single margin declaration.
What improvements can be made to the CSS code below, if any? div.container { padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; }
All four CSS declarations can be replaced with one single padding declaration.
What's the difference between a class and and ID?
An ID should be used once for only one element, but a class can be used for multiple elements that share the same styling.
How would the output of the code below change if <ul> and </ul> were changed to <ol> and </ol>, respectively? <ul> <li>Lorem</li> <li>Ipsum</li> <li>Horribilis</li> </ul>
Bullet points in the output would change to numbers
What improvements can be made to the CSS code below, if any? div.main { background-image: url("https://www.codecademy.com/images/computer.jpg"); background-repeat: no-repeat; background-position: right center; }
Condense all three properties into one by using the background property.
What improvements can be made to the CSS code below, if any? p { border-width: 3px; border-style: solid; border-color: rgba(23, 12, 111, 0.4); }
Condense all three properties into one by using the border property.
The following CSS code fails to set the typeface of the heading to Courier New. Why? h1 { font-family: Courier New, Times, serif; }
Courier New must be enclosed in double quotation marks.
Which of the following is the current HTML standard?
HTML5
In the following code, the empty line of space between the heading and the first paragraph is supposed to increase the vertical space between them in the browser, but fails to do so. Why? <a href="https://www.codecademy.com/">Codecademy</a>
In an HTML file, whitespace does not affect the layout of a webpage because the browser ignores it.
Which of the following is the best way of improving the code below? <img src="https://www.codecademy.com/laptop.jpg" />
Include an alt attribute and a description of the image.
When offset properties are specified, how will the following property affect the positioning of the div? div.container { position: absolute; }
It'll force the div to stay in one place, but other elements will ignore the div, and the div will ignore other elements.
When offset properties are specified, how will the following property affect the positioning of the div? div.container { position: fixed; }
It'll force the div to stay in one place, even as the user scrolls.
The following code results in no visible output in the browser. Why? <ol> </ol>
List items must be added to list
The following CSS code will ensure which of the following? div.special { clear: right; }
No other elements will touch the div on the right side.
Which of the following best describes the difference between padding and margin?
Padding refers to the spacing between an element's content and borders, margin refers to the spacing outside of the box.
In which of the following ways do percentages affect the dimensions of an HTML element's box?
Percentages only affect the dimensions of the box if the element lives within another box that has defined dimensions.
Which of the following units of measurement allow you to specify the absolute dimensions of an element's box?
Pixels
Font sizes can be specified using which of the following three units?
Pixels (px), Ems (em), Percentages (%)
The following HTML code links to what Google Font? <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Roboto
Which of the following two constitute a CSS rule?
Selector and one or more declarations.
What's the difference between serif and sans-serif fonts?
Serif fonts include details on the ends of letters, whereas sans-serif fonts do not.
The following code is supposed to to create a link to another web page, but fails to do so. Why? <a>Codecademy</a>
The <a> element is missing the href attribute set to the URL of the Code academy website.
Which of the following best describes the difference between the content-box box model and the border-box box model, if any?
The content-box model adds the padding and border width dimensions to the size of the box, whereas border-box does not.
The background image of the div is repeating. Why? div.main { height: 500px; width: 500px; background-image: url("https://www.codecademy.com/images/computer.jpg"); }
The default behavior of all images is to repeat in the x and y directions.
The following code resulted in no change to the typeface of the paragraph. Why? p { font-family: Times, Garamond, serif; }
The default font family for HTML elements is already Times New Roman.
The following CSS code attempts to position a div to the left side of the page, but fails to do so. Why? div.box { float: left; }
The div must have a width specified.
What's likely to occur when the following two elements are positioned in the following way? div.navigation { position: fixed; } div.heading { position: relative; }
The divs could potentially overlap.
The following CSS code attempts to center the element with class "headline", but fails to do so. Why? div.headline { margin: auto; }
The element must have a width set for it to center.
Where on the page will the div appear? div.container { position: absolute; }
The element will appear in its default position because offset properties have not been specified.
What is the difference between the following two CSS rules? .breaking { font-family: Georgia, Times, serif; } p.breaking { line-height: 1.3em; }
The first CSS rule targets all elements with a class of breaking, whereas the second will target only paragraphs with a of class breaking.
Assume that a web page contains only a single heading element. Where will the following code position the heading element? h1 { position: relative; top: 25px; left: 50px; }
The heading will move down by 25 pixels and to the right by 50 pixels.
The following CSS code attempts to insert an image into the background of a div, but fails to do so. Why? div.main { height: 500px; width: 500px; background-image: url(https://www.codecademy.com/images/computer.jpg); }
The image URL must be enclosed in single or double quotes.
Assume the following image has not been modified using CSS. What are the width and height dimensions of the image? <img src="https://www.codecademy.com/images/computer.jpg" />
The image will have its default height and width dimensions.
The following CSS code hides a list item from view, but fails to remove the space the list item occupies in the web page, resulting in a blank space. How should the code be modified to do so? li.future { visibility: hidden; }
The property should be changed to display and the value should be changed to none.
The following CSS code fails to set the typeface of the heading to Georgia. Why? h1 { font: Georgia, Times, serif; }
The property should be font-family, not font.
When offset properties are specified, how will the following property affect the positioning of the div? div.container { position: static; }
The property will not affect the positioning of the div.
The following CSS code attempts to set the background color of the body using a transparent RGB color, but fails to do so. Why? body { background-color: rgb(212, 34, 99, 0.75); }
The rgb() property should be set to rgba() instead.
The following CSS code attempts to set the color of a paragraph using an HSL color, but fails to do so. Why? p { color: hsl(412, -5, 99.9%); }
The saturation value must be a positive percentage.
The following code is supposed to display an image, but fails to do so. Why? <img https://www.example.com/laptop.jpg />
The src attribute is missing and must be set equal to the image url, enclosed in double quotation marks.
The following CSS code attempts to set the color of a paragraph using an RGB color, but fails to do so. Why? p { color: rgb(277, 56, FF); }
The three parameters of the rgb() property must be numeric.
Use the following CSS code to identify the margin on each side of the div's content. div.heading { margin: 15px 25px; }
The top and bottom sides have a margin of 15 pixels, the left and right sides have a margin of 25 pixels.
Use the following CSS code to identify the padding on each side of the div's content. div.heading { padding: 10px 20px; }
The top and bottom sides have a padding of 10 pixels, the left and right sides have a padding of 20 pixels.
Identify any errors with the following CSS code, if any. div.heading { padding-top: 10px; padding-left: 20px; }
There are no errors.
Which of the following is an advantage of using the <div> element?
They allow HTML elements to be grouped into logical sections of the web page.
RGB and hex color codes offer what significant advantage over named colors?
They offer more color options than named colors, giving more flexibility in color choice.
Which of the following values would stop the background image from repeating? div.main { height: 500px; width: 500px; background-image: url("https://www.codecademy.com/images/computer.jpg"); background-repeat: ? }
no-repeat
Which of the following values for background-repeat would cause the background image to display horizontally only? div.main { height: 500px; width: 500px; background-image: url("https://www.codecademy.com/images/computer.jpg"); background-repeat: ? }
repeat-x
