HTML Basics
This HTML tag creates the largest heading on a webpage
<h1>
What type of CSS selector is used in this rule?
p { color: blue;}
Tag selector
This CSS property adds space between an element's content and its border
Padding
<a src="https://www.google.com">Visit Google</a>
<a href="https://www.google.com">Visit Google</a>
In the HTML family tree, what is a parent element?
An element that directly contains another element.
This section of an HTML file contains the content that appears on the webpage
<body>
Write the CSS selector needed to target every element with class="card"
.card
This CSS property adds space outside an element's border
Margin
This CSS rule is supposed to make every element with the class warning display red text. Fix the mistake.
#warning { color: red; }
.warning { color: red; }
Two <li> elements are inside the same <ul>. What is their relationship to each other?
They are siblings
Write the HTML line that connects an HTML file to a CSS file named style.css
<link rel="stylesheet" href="style.css">
Write the CSS selector needed to target the element with id="banner"
#banner
Explain the basic difference between <div> and <span>
A <div> is a block-level container. A <span> is an inline container used within a line of text.
This code is supposed to create an unordered list with three items. Identify and fix all of the mistakes.
<ol>
<li>HTML
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Why do indent our code?
To improve readability and to visually see the family tree structure
Put these elements in the correct nesting order:
<body>, <html>, <head>.
Then state which two are children of <html>.
<html> contains <head> and <body>.
The <head> and <body> elements are children of <html>.
A CSS file contains these rules in this order:
p { color: green;}
p { color: red;}
What color will paragraph text be? Why?
Red.
Both rules have the same level of importance and specificity, so the rule written later wins because of "order" in the cascade.
List the parts of the box model from inside to outside
Content --> Padding --> Border --> Margin
This code is supposed to make only one word red. Fix the mistake.
<p>
This is a <div class="red">very</div> important message.
</p>
<p>
This is a <span class="red">very</span> important message.
</p>
Name any two semantic tags
<header>
<nav>
<main>
<footer>
<section>
<aside>
Write the HTML code needed to create a table.
The table should have 2 rows.
The first row contains headers (Town & Population)
The second row contains Hawthorne & 20,000.
<table>
<tr>
<th>Town</th>
<th>Population</th>
</tr>
<tr>
<td>Hawthorne</td>
<td>20,000</td>
</tr>
</table>
Why do we use the CSS cascade. Give me a sentence.
We use the CSS cascade whenever two or more CSS rules conflict with each other.
A box has width: 200px
Padding: 10px
Border: 2px
How wide is the visible box, excluding margin?
224px
This code is supposed to create a clickable link that opens the school website. Fix the mistake.
<a href="https://www.hawthorne.k12.nj.us">Visit the School Website</a>
How are semantic tags different than divs.
Semantic tags provide meaning.
Both are containers that you can put other tags inside of. However, divs are basic while semantic tags are more specific.