HTML Review
CSS Review
Stylin'
Color, Fonts, & Design
Breathing Room
100
The tag where all of your HTML visible to your users should go.
What is <body>?
100
The name of the three types of CSS.
Inline, Internal, and External
100
The name of the tag that contains <style>.
What is <head>?
100
Dark text on a light background is a good example of this design principle.
What is contrast?
100
The name of the CSS property used to add space between the content and its border.
What is padding?
200
The three tags used to create a table.
What are <table>, <td>, and <tr>?
200
The CSS for curving the corners of a border.
What is border-radius?
200
The name of the HTML tag used to connect a website with an external CSS file.
What is link?
200
The CSS declaration for changing a font.
What is font-family?
200
The two CSS declarations required to center something (usually a div) in HTML.
What is margin:auto and width?
300
A complete example of a link to the webpage "hobbies.html", which can be found inside of a "pages" folder.
<a href="pages/hobbies.html">Click Here!</a>
300
(DOUBLE JEOPARDY)
This is an example of the complete and accurate CSS in an internal style sheet that changes all paragraphs in 5 different ways.
What is
p {color: #FF0000;
background-color:#00AABB;
padding: 20px;
font-family: Arial, sans-serif;
text-align:center;
}
?
300
In a style sheet, the CSS used to change the background color of all <h1> tags.
What is:
h1 {background-color:#FF0000;}
?
300
A basic sketch of a simple website using a Z Pattern Layout.
What is:
300
The CSS needed to move an HTML element 50 pixels to the left on a webpage.
What is margin-right-50px;?
400
(FREE FOR ALL)
An example of an HTML image tag that uses four attributes.
What is:
<img src="picture.jpg" width="200" height="200" alt="a pretty flower">
400
The CSS declaration for a border that is 5px wide, with the hex code for green, and dashed.
What is:
border: 5px dashed #00FF00;
400
(FREE FOR ALL)
A paragraph that has been assigned the "cool" class, and the CSS used to change the text color for that class to blue.
What is:
<p class="cool">Paragraph</p>
.cool {color:blue;}
?
400
An example of the CSS declaration used to change the size of your text.
What is "font-size:72px;"?
400
(DOUBLE JEOPARDY)
The CSS required to add 50 pixels of spacing in the two indicated areas of this paragraph.
What is
padding-top:50px;
padding-bottom:50px;
?
500
(FREE FOR ALL)
The complete setup for every HTML file you start in this class.
What is:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
500
(FREE FOR ALL)
The CSS for a paragraph that changes its text color to pink when you move the mouse over it.
p:hover {
color:pink;
}
500
(FREE FOR ALL)
A complete example of the tag needed to connect an HTML file to another file named style.css.
What is
<link rel="stylesheet" type="text/css" href="style.css">
?
500
(FREE FOR ALL)
A complete example of an opening h1 tag that has a background color of blue and a text color of red, without using the names of the colors.
What is:
<h1 style="background-color:#0000FF; color:#FF0000;>
500
A complete example of an h1 tag and a paragraph, inside of a centered div with 60px of padding on all sides.
What is
<div style="margin:auto; width:300px; padding:60px;>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
?