Font size
WorksheetsHTML &CSS
Total questions: 54
Worksheet time: 33mins
What are IFrames?
Buttons that link to other websites
Videos uploaded to your website
The number of views your website has
HTML pages embedded inside of other HTML pages
What is the function of the div tag?
To define a section of an HTML page
To group a block of elements together to format them with CSS
To efficiently apply the same style to several different elements
All of the above
Which of the following correctly uses div to style multiple elements the same way?
<div class="intro">
<h2>Welcome</h2>
<p>Hi, welcome to my page.</p>
</div>
<div>
<h2 class="intro">Welcome</h2>
<p class="intro">Hi, welcome to my page.</p>
</div>
<div>
.intro{
font-size: 16px;
font-style: italic;
}
<h2>Welcome</h2>
<p>Hi, welcome to my page.</p>
</div>
<h2 div class="intro">Welcome</h2>
<p div class="intro">Hi, welcome to my page.</p>
What is the difference between <span> and <div>?
<span> is better for styling text, while <div> is better for styling images
<span> is for styling multiple elements, while <div> is for styling single elements at a time
<span> is used to group and style inline elements, while <div> creates a line break
<span> is used to style elements, while <div> is used to embed parts of other websites
Which of the following selects all p tags with the class alert and makes them red?
p.alert {
color: red;
}
p {
.alert {
color:red;
}
}
.alert p{
color: red;
}
p alert{
color: red;
}
What is the reasoning behind the Don’t Repeat Yourself principle?
It helps you stay under the HTML file character limit
Repeated code makes it harder to read and edit
HTML files with repeated code will take a very long time to load
It makes a more clean and organized website for the user
Which of the following is not a property that can hide the visibility of an element?
opacity
hidden
visibility
display
What symbol should you use to target a class name in css?
#
()
.
class
What is missing from this HTML skeleton?
<!DOCTYPE html>
<html>
<body>
</body>
</html>
<head></head>
<div></div>
<img></img>
<head>
How do you change the font color with CSS?
font-color: green;
color: green;
change-font-color: green;
fontcolor=green;
TRUE OR FALSE: All tags require a closing tag.
True
False
Where should you put the link tag to connect your CSS and HTML file?
Between the <head> </head> in HTML
Between the <body> </body> in HTML
None of the above.
Which of the following is the correct CSS link tag?
<link rel="styles" href="stylesheet.css">
<link href="stylesheet">
<link rel="stylesheet" src="styles.css">
<link rel="stylesheet" href="styles.css">
A ________ is a software program to present and explore content on the World Wide Web.
Word Processor
Browser
HTTP
attribute
____________ is a term used to describe how page elements are placed on the screen. For example, elements can be positioned left, right, or center.
Attribute
Style
Alignment
Properties
The _____ ______ is a block element used to designate a list that is either numbered or alphabetical.
<tr> tag
<ol> tag
<ul> tag
<td> tag
an _____ _____ stays in the same line as the code that surrounds the text.
block element
inline element
HTML tags
alt attribute
a _____ _____ is any element that starts a new line (e.g., paragraph) and uses the full width of the page or container.
inline element
img href
CSS ID
block element
In CSS, which selector would you use to select a paragraph with a class of "bright"?
.bright
#bright
bright.p
p bright
Which tag should be a direct child of an unordered list?
<ul>
<li>
<p>
<body>
What is Responsive Web Design?
Using CSS on different parts of a web page
Making HTML elements appear in a grid
Controlling the font size of text on a page
Making web pages look good on all devices
What is an HTML element?
What is an HTML attribute?
Which of the following is the proper way to link to the about.html page from the index.html page?
<a href="about">About This Site</a>
<a href="/about.html">About This Site</a>
<a href="about.html">About This Site</a>
<a href="/about">About This Site</a>
What are IFrames?
Buttons that link to other websites
Videos uploaded to your website
The number of views your website has
HTML pages embedded inside of other HTML pages
Which of the following selects all p tags with the class alert and makes them red?
p.alert {
color: red;
}
p {
.alert {
color:red;
}
}
.alert p{
color: red;
}
p alert{
color: red;
}
What are some ways to cut down on repetitive code in your website?
Group together multiple selectors with commas
Strategically plan ahead to make sure the site is coded concisely
Use a div to style multiple elements
All of the above
Which of the following is not a property that can hide the visibility of an element?
opacity
hidden
visibility
display
Which of the following will correctly display the words above?
<h3> Eggs </h3>
<h1> Bacon </h1>
<h6> Waffles </h6>
B<h1> Eggs </h1>
<h2> Bacon </h2>
<h3> Waffles </h3>
<h6> Eggs </h6>
<h1> Bacon </h1>
<h3> Waffles </h3>
If I wanted to change the entire background of my web page, I would add which of the following CSS tags?
p
h1
#h1
body
What does CSS stand for?
Cascading Style Sheets
Certain Styles Selected
Certain Style Sandwiches
Central Servicing Systems
You are trying to apply the same style to several different elements in a block, with line breaks before and after. Which tag should you use?
<span>
<div>
<style>
<src>
Which of the following defines border thickness so that the top and bottom borders are 10px thick and left and right borders are 5px thick?
border: 5px 10px 5px 10px
border: 5px 5px 10px 10px
border: 10px 10px 5px 5px
border: 10px 5px 10px 5px
Which of the following defines an animation change-color that changes the font color from green to red?
@keyframes change-color {
from {color: green;}
to {color: red;}
}
@animation change-color {
from {color: green;}
to {color: red;}
}
@keyframes change-color {
color: {color: green, red;}
}
@animation change-color {
color: {color: green, red;}
}
p {color: red;}
