HTML Midterm
Consider the following paragraph with a class of "emphasize" (like below), what CSS would I use to change that paragraph's background color to orange? <p class="emphasize">This is a paragraph</p>
.emphasize { background-color: orange; }
Generally Speaking, what style will be used when there is more than one style specified for an HTML element? (In other words, list the priority of each CSS style where number 1) has the highest priority).
1) Inline Style 2) External and internal style sheets, whichever one is LOADED LAST will have highest priority 3) Browser Default
A div element has the following style: div { width: 250px; padding-left: 40px; padding-right: 60px; margin: 0 25px; border: 10px solid goldenrod; } Using the CSS Box Model, what is the content width of this div?
250px
A div element has the following style: div { width: 250px; padding-left: 40px; padding-right: 60px; margin: 0 25px; border: 10px solid goldenrod; } Using the CSS Box Model, what is the physical width of this div?
420px
Which of the following is a valid HTML5 doctype?
<!DOCTYPE html>
Which HTML tag is used to define a hyperlink?
<a>
This HTML element is used to collect user input ?
<form>
Lets say you have a form, inside the form you have an input type number. You want to restrict the user to only be able to enter numbers between 1 and 5. How would you accomplish this using HTML from input type restrictions? Note: type="number" is not supported in IE9 and earlier.
<input type="number" name="quantity" min="1" max="5">
________________ defines a button that will reset all form values to their default values.
<input type="reset">
Consider the following HTML code: <table style="width:100%"> <tr> <th>Name:</th> <td>Mr. Wergeles</td> </tr> <tr> <th>Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> What would be the proper way to make the "Telephone:" header span vertical or down across both phone numbers ?
<th rowspan="2">Telephone</th>
In the following HTML element, what is "checked"? <input type="radio" id="raptor" name="dinosaur" value="velociraptor" checked>
A boolean attribute
What is HTML and what does HTML do?
A markup language, HTML is used for describing web documents or pages
After class, I thought it would be cool to learn more about CSS3, therefore I looked up information about color gradients. Which W3C module provides documentation for CSS3 Gradients ?
CSS Image Values and Replacement Content Level 3
According to the W3C, what is the current status of the CSS3 Multi-Column Layout Module?
Candidate Recommendation
CSS stands for _________ and does this ____________?
Cascading Style Sheets, CSS describes how HTML elements are to be displayed on screen or in other media
When using the box-shadow property, what does the optional inset keyword do to the shadow?
Changes the shadow from an outer shadow (outset) to an inner shadow (inset)
By default, the characters in a password field (<input type="password">) are shown to the user until the user has finished entering the password.
False
By default, the form itself is visible.
False
By default, the text in table headings are bold and left-aligned.
False
CSS3 is a full recommendation of the W3C.
False
Considering standard HTML practices, an HTML table is defined with the <th> tag.
False
If the HTML table has collapsed borders, then the CSS border-spacing property can still be used to specify the space between the cells.
False
In CSS, an ID selector and Class Selector can start with a number.
False
In the box model, the margin clears an area inside the border and is around the content.
False
Internal and external stylesheets should be nested within a webpage's <body> element
False
Negative values are NOT allowed for the box-shadow property's horizontal and vertical shadow. For example, this is invalid CSS: box-shadow: -5px -10px 10px #aaa;
False
The :hover pseudo class selector can only be used on links.
False
The <head> and <body> section are displayed in the browser.
False
The POST method does not display the submitted form data in the page address field and POST does have size limitations, which is why POST can not be used to send large amounts of data.
False
The default width of a text field is 30 characters.
False
The method attribute GET must be used when sending sensitive information.
False
The start tag is also called the opening tag and the end tag is also called the termination tag.
False
When the "autofocus" attribute is on or enabled, the browser will automatically complete the input values based on values that the user has entered before.
False
When using new HTML5 input restrictions, such as the "maxlength" attribute, these input restrictions are foolproof since HTML5 came out and since JavaScript provides many ways to add illegal input. Therefore, to safely restrict input, you do not need to check by the receiver (the server) anymore.
False
When using the inline-block value of the display property in CSS, you must also specify the clear property in order to stop the elements displaying inline-block.
False
When you set the width and height properties of an HTML element with CSS, you simply set the width and height of the physical area (the full size of the element).
False
You must add space between the property value and the unit (such as margin-left: 20 px; ).
False
A(n) __________ selector is used to select a single, unique HTML element on a page.
ID
CSS can be added to HTML elements in 3 ways:
Inline, Internal, External
What does the "for" attribute in a <label> tag do?
It binds a label to a form element's id attribute.
What does the "method" attribute in a <form> tag do?
It defines how the form data will be packaged.
What does the "action" attribute do in a <form> tag?
It defines where the form data will be sent.
What does the "#" sign do in CSS?
It denotes an element's ID
What does the "." sign do in CSS?
It denotes an element's class
What are Webkit and Gecko ?
Layout engines
The box model consists of:
Margins, Borders, Padding, and the actual Content
Consider the following CSS: table, th, td { border: 1px solid black; padding: 5px; border-collapse: collapse; } table { border-spacing: 15px; } What will be the border-spacing for <table>?
None
Consider the following HTML: <div class="info"> <h1>My Chinese Name</h1> <p class="name"> 你好我的中国名字是尼克</p> </div> And the following CSS: div.info { color: crimson; } p.name { color: powderblue; } What color will the <p> tag's font be?
Powder Blue
Considering the previous question's HTML and CSS, now the order of the previous question's CSS has changed: p.name { color: powderblue; } div.info { color: crimson; } Now what color will the <p> tag's font be?
Powder Blue
CSS _____________ are patterns used to bind style properties to matched elements.
Selectors
What are CSS combinators?
Something that explains the relationship between the selectors
A CSS selector's __________ is a calculated value that determines the priority of that selector in relation to other CSS rules on a page.
Specificity
If you omit the submit button's value attribute, the button will get a default text. What is the submit button's default text?
Submit
What does the doctype do ?
The doctype is an instruction to the browser that identifies which version of HTML is being used and helps the browser to display the webpage correctly
HTML5 added the following form elements: <datalist> <keygen> <output> Lets say your browser is not updated and these elements are unknown elements. New elements that are not supported in older browsers will do what?
They WILL NOT "destroy" your web page, and the page will still load but without the new elements.
Some HTML elements are empty, such as the <br> element (which indicates a line break), what does an empty tag mean ?
They have no content and no end tag
The CSS font-family property allows you to specify a comma-separated list of font names like so: font-family: "Permanent Marker", cursive, sans-serif; Why would you supply multiple font names?
To provide a fallback system, in case a font is not installed or cannot be downloaded.
A pseudo class is used to define a special state of an HTML element.
True
According to the W3C, tables should NOT be used for page layout.
True
All HTML elements can be considered as boxes, where boxes refers to the term "box model".
True
An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
True
By default, the first item (<option>) in the drop-down list (<select>) is selected.
True
By standard web development practices, the <caption> tag is supposed to be inserted immediately after the <table> tag.
True
If you do not specify a border for an HTML table, it will be displayed without borders by default.
True
New input types that are not supported by older web browsers will behave as <input type="text">.
True
The "value" attribute in an <input> field specifies the initial value.
True
The <td> elements are the data containers of the table, they can contain many HTML elements such as: text, images, lists, and other tables.
True
The default method when submitting form data is GET.
True
The text in <td> elements are regular and left-aligned by default.
True
While using the float property, you must also use the clear property which specifies on which sides of an element that the floating elements are not allowed to float.
True
What does the CSS ":hover" pseudo-class selector do?
Used to select an element when you mouse over it and can be used to add a special style
Consider the following code: <form action="action_page.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form> What will the <keygen> element do?
When the form is submitted, two keys are generated, one private and one public. The private key is stored locally and the public key is sent to the server.
According to the W3C, what is the current status of the CSS Animations module?
Working Draft
Which CSS declaration would cause an animation to play infinitely?
animation-iteration-count: infinite;
To test CSS3 gradients, you placed a <div> on your page and gave it the following CSS: div { width: 300px; height: 400px; background-image: linear-gradient(orange, tomato); } This will produce a gradient that starts with orange on the top and fades to a light red on the bottom. Let's say you wanted to change the direction of the gradient, from vertical to horizontal. How could you start with orange on the left and have it fade to light red on the right ?
background-image: linear-gradient(to right, orange, tomato);
Consider the following CSS: th, td { background-color: red; } table tr:nth-child(even) { background-color: lightgray; } table th:nth-child(odd) { background-color:white; } table#t01 th { background-color: black; color: white; } For <table id="t01">, what will the background color be for the <th> tags ?
black
Which CSS declaration causes table borders to mesh together into a single border ?
border-collapse: collapse;
Let's say you have a div with an ID of "myDiv", consider the following CSS: div#myDiv { width: 300px; height: 300px; border: 3px solid powderblue; border-radius: 25px; } Suppose you would like a rounded look on the top left and right corners of the div, but you want to make the bottom left and right corners square again. How could you modify the border-radius property to do this?
border-radius: 25px 25px 0 0;
The "readonly" attribute specifies that the input field is _____________.
cannot be changed but the user can highlight it and copy the text from it
Which of the following is the correct way to apply more than one class to a single HTML element ?
class="firstClass secondClass"
The __________ attribute specifies the visible width of a text area.
cols
Consider the following CSS: div#myDiv { width: 200px; height: 200px; background-color: powderblue; } div#myDiv:hover { width: 400px; height: 400px; background-color: orange; } Suppose you to use a CSS3 transition to gradually apply the effects of the :hover pseudo-class. Hovering over and away from #myDiv should result in a smooth transition. The duration of the transition should be 5 seconds. Which of the following would do this?
div#myDiv { transition: width 5s, height 5s, background-color 5s;
Which of the following CSS properties is used to place block elements besides one another ?
float
Consider the following CSS: table, th, td { border-collapse: collapse; background-color: powderblue; } th, td { background-color: goldenrod; } table#t01 { width: 100%; background-color: crimson; } What background color will <table id="t01"> be ?
goldenrod
Consider the following div: <div id="exampleID" class="exampleClass">Example Text</div> And consider the following CSS: #exampleID { border: 20px solid goldenrod; } .exampleClass { border: 20px solid powderblue; } What color will the div's border be?
goldenrod
Which of the following is the correct CSS selector for referencing a span with a class named "note" inside of an h1 with an ID of "important"?
h1#important span.note
If you would like to right align all the text for all h1, h2, and h3 elements on your HTML page. What would be the most efficient way to do this ?
h1, h2, h3 { text-align: right; }
When radio buttons are grouped together, selecting one will automatically deselect the others. Which HTML attribute groups radio buttons this way?
name
In the following HTML5 attribute is used to display a hint in an input field. As the user types, the hint goes away automatically.
placeholder
Consider the following div: <div class="exampleClass">Example Text</div> And consider the following CSS: .exampleClass { border: 20px solid goldenrod; } .exampleClass { border: 20px solid powderblue; } What color will the div's border be?
powderblue
The ________ attribute specifies the visible number of lines in a text area.
rows
To define a pre-selected option in a drop-down list, add the ______________ attribute to the option.
selected
Consider ONLY adding a 1px solid black border around the <th> and <td> tags within <table id="myTable">, which CSS declaration should be used ?
table#myTable th, table#myTable td { border: 1px solid black;
The "disabled" attribute specifies that hte input field is disabled. A disabled input field means ___________.
the field is unusable and un-clickable, and its value will not be sent when submitting the form