HTML & CSS Review

HTML Basics

100

What tag creates a level 1 heading?

<h1>

200

What HTML tag creates a clickable hyperlink?

<a>

300

What attribute is required to make a link go somewhere?

href 

400

What is the purpose of the alt attribute in an image?

Give me 2 examples. 

Provides alternative text for (1) accessibility (2) if image doesn’t load

500

The following code does NOT display correctly.
Identify ALL errors and rewrite it correctly.

<h1>My Page</h>

<p>Welcome to my website

<ul>
  <li>Home
  <li>About</li>
  <li>Contact
</ul>

Missing 1 in <\h1>

Missing closing </p>

First <li> missing </li>

Third <li> missing </li>

Lists & Tables

100

What tag creates a bulleted list?

<ul>

200

What tag creates a numbered list?

<ol>

300

What tag creates each item inside a list?

<li>

400

What tag creates a table row?

<tr>

500

What is the difference between <th> and <td>?

<th> = header cell
<td> = regular data cell

CSS Rules

100

What symbol is used to start a CSS rule block?

Hint: You use this symbol for any type of CSS rule BLOCK whether it's class, id or regular selector. 

{

200

What is wrong with this?

p {
  color="red";
}

CSS uses : not =
Correct: 

color: red;

300

Write a CSS rule that makes all level 2 headings 18px.

 Example: h2{font−size:18px;}

400

Which selector has the LOWEST priority: ID, Class, or Tag? Explain why.

Tag selector has the lowest priority. Specificity order: element/tag selectors < class selectors < ID selectors.

500

Given these CSS rules:

p{color:green;font−family:′LucidaConsole′;}

.info{color:orange;font−family:Helvetica;}

#announcement{color:red;}

For the HTML <p class="info" id="announcement">Update</p>

 What is color and font-family of the text?

Color: red (ID rule wins)

Font-family: Helvetica (class rule wins)

Selectors

100

Which selector targets all <h1> elements?

h1

200

Write the CSS selector that targets an element with id="header".

#header

300

Which selector targets class="box"?

.box

400

Can a class and ID be used on multiple elements?

yes for the class, no for the ID

500

Given the following CSS:

p { color: gray; }
.highlight { color: blue; }
#main { color: green; }
#main.highlight { color: red; }

What color will this be?

<p id="main" class="highlight">Hello World</p>

Red 

#main.highlight has higher specificity than just #main, .highlight, or p, because it combines an ID and a class selector.

etc.

100

Which has higher priority: tag or class?

class

200

What is the domain of this URL:

www.example.com/home.html

example.com

300

Given:

p { color: blue; }
.note { color: green; }

What color?

<p class="note">Text</p>

Green

400

Given:

p { color: blue; }
#alert { color: red; }

What color?

<p id="alert">Warning</p>

Red

500

Which of the following best describes the difference between the domain and path of a URL?

The domain specifies where the browser’s request should be sent.

The path specifies exactly what file is being requested.