WorksheetsAdvanced HTML/CSS review
Total questions: 28
Worksheet time: 14mins
Assume you have two files for your website, and these files exist in the same folder:
home.html
style.css
Which of the following is the proper way to apply the CSS code inside style.css to the home.html file?
Inside home.html:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Inside home.html:
<head>
<style href="style.css"> </style>
</head>
Inside style.css:
<html href="home.html">
Inside style.css:
applyTo {
href: home.html; }
Assume you have two files for your website, and these files exist in the same folder:
index.html
about.html
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
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 that may contain video or other media
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 ="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 images, while <div> is better for styling specific text in the page
<span> is for styling multiple elements, while <div> is for styling single elements at a time
<span> is used to style inline elements such as a text in a paragraph, while <div> used to group elements together and 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;
}
How can I select all h1 tags that are immediate children of div tags?
div h1 {
...
}
div > h1 {
...
}
div {
h1 {
...
}
}
.h1 div {
...
}
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
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 will turn the h1 tag blue as the mouse hovers over it?
hover > h1 {
color: blue;
}
h1:hover {
color: blue;
}
h1; hover {
color: blue;
}
h1 hover {
color: blue
}
Which of the following will insert an exclamation point after every h2 element?
h2:after {
content: “!”;
}
h2:after {
content: !;
}
h2::after {
content: “!”;
}
h2::after {
content:;
}
True or False: If a selector’s display property is set to none, selected elements will still take up space on the page.
True
False
Which of the following is NOT a property that can hide the visibility of an element?
opacity
visibility
hidden
display
Which of the following applies the invert filter to all images with the class “inverted”?
.inverted {
filter: color(0;
}
img.inverted {
filter: invert;
}
img.inverted {
filter: invert(100%);
}
Which of the following will result in a smooth transition from green to red as the mouse clicks on h1 tags?
h1 {
color: green;
transition: color 2s;
}
h1:active {
color: red;
}
h1 {
color: green;
transition: color 2s;
}
h1:hover {
color: red;
}
h1 {
color: green;
}
h1:hover {
color: red;
}
None of the above
The Inspector would be a useful tool for which of the following tasks?
Starting to write the HTML and CSS based on a design
Testing what small CSS changes will do to the site presentation
Finalizing changes made to the styling of the website
None of the above
Which of the following is NOT a part of the box model?
padding
border
background-color
margin
For the given div, what is the size of the right padding?
div {
width: 10px;
height: 10px;
padding: 15px 10px 5px 20px;
}
15px
10px
20px
5px
True or False: An image can have more than one CSS filter.
True
False
Which of the following applies a grayscale filter to all images?
img {
filter:: grayscale(100%);
}
img {
filter: grayscale;
}
img {
filter: grayscale(100%);
}
img {
filter: grayscale(100);
}
Which of the following defines the animation increase-font to change the font size from 5px to 20px?
increase-font {
from {font-size: 5px;}
to {font-size: 20px;}
}
keyframes increase-font {
font-size: {5px, 20px};
}
@keyframes increase-font {
from {font-size: 5px;}
to {font-size: 20px;}
}
@animation increase-font {
font-size: {5px, 20px};
}
Which of the following applies an animation named grayscaleFilter over 10 seconds to every img tag?
img {
animation-name: grayscaleFilter;
animation-length: 10s;
}
img {
animation: grayscaleFilter 10s;
}
img {
animation-name: grayscaleFilter;
length: 10 seconds;
}
img {
animation: grayscaleFilter 10 seconds;
}
img {
width: 100px;
height: 100px;
transition: width 2s, height 2s;
}
img:hover {
width: 200px;
height: 200px;
}
What would be the resulting difference if the line transition: width 2s, height 2s; was removed from the first CSS rule?
Images would no longer get larger as the mouse hovers over them.
The transition would happen over 10s, since this is the default duration.
Images will no longer show up on the website.
There would no longer be a smooth transition for the image:hover rule.
True or False: You can only transition one property at a time.
True
False
True or False: None of the changes you make in the Inspector will be saved.
True
False
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
border: 5px 10px 5px 10px
border: 10px 5px 10px 5px
border: 5px 10px 5px
Which of the following defines an animation change-color that changes the font color from green to red?
@ change-color {
from {color: green;}
to {color: red;}
}
@keyframes change-color {
from {color: green;}
to {color: red;}
}
@keyframes change-color {
color: {color: green, red;}
}
@animation change-color {
color: {color: green, red;}
}
