Advanced HTML / CSS
Studied by 0 people
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/49
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
50 Terms
Assume you have two files for your website, and these files exist in the same folder:
home.html
style.cssWhich 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>Assume you have two files for your website, and these files exist in the same folder:
index.html
about.htmlWhich of the following is the proper way to link to the about.html page from the index.html page?
<a href="about.html">About This Site</a>What are IFrames?
HTML pages embedded inside of other HTML pages
True or False: It is possible to embed any website inside IFrames.
False
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
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>What is the difference between <span> and <div>?
<span> is used to group and style inline elements, while <div> creates a line break
Which of the following selects all p tags with the class alert and makes them red?
p.alert {
}How can I select all h1 tags that are immediate children of div tags?
div > h1 {
...
}What is the reasoning behind the Don’t Repeat Yourself principle?
Repeated code makes it harder to read and edit
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
Which of the following will turn the h1 tag blue as the mouse hovers over it?
h1:hover {
}True or False: If a selector’s display property is set to none, selected elements will still take up space on the page.
False
Which of the following is not a property that can hide the visibility of an element?
hidden
True or False: You will learn everything there is to know about HTML and CSS from CodeHS.
False
Who might need to look something up in HTML/CSS documentation?
A student learning about web development
A web developer using a new feature
A person building a personal website as a hobby
The Inspector would be a useful tool for which of the following tasks?
Starting to write the HTML and CSS based on a design
Correct Answer
Testing what small CSS changes will do to the site presentation
Finalizing changes made to the styling of the website
Which of the following is not a part of the box model?
background
For the given div, what is the size of the right padding?
div {
width: 10px;
height: 10px;
padding: 15px 10px 5px 20px;
}10px
True or False: An image can have more than one CSS filter.
True.
Which of the following applies a grayscale filter to all images?
img {
filter: grayscale(100%);
}Which of the following defines an animation increase-font that increases the font size from 5px to 20px?
@keyframes increase-font {
from {}
to {}
}Which of the following applies an animation named grayscaleFilter over 10 seconds to every img tag?
img {
animation: grayscaleFilter 10s;
}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?
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.
False
Assume you have two files for your website, and these files exist in the same folder:
about.html
style.cssWhich of the following is the proper way to apply the CSS code inside style.css to the about.html file?
Inside about.html:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Which of the following would you use an IFrame for?
Embedding a map from Google Maps in your website
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?
<div>
Which of the following selects all elements with the class footer that are inside of divs?
div .footer {
...
}Which of the following selects all a tags that are immediate children of div tags?
div > a {
...
}Why is it important to avoid repetitive code while creating a website?
Excessive code is harder to read and understand
It is easier to make edits to websites when CSS rules are strategically grouped and organized
It demonstrates good coding style
Which of the following will turn the first letter of all p elements blue?
p::first-letter {
}Which of the following selects images as the mouse hovers over them and sets their size to 350px by 350px?
img:hover {
width: 350px;
height: 350px;
}Which of the following settings will not make an element invisible?
appearance: off
True or False: Only CSS has online documentation because it is a more complex language than HTML.
False.
True or False: None of the changes you make in the Inspector will be saved.
True.
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: 10px 5px 10px 5px
Which of the following applies the invert filter to all images with the class “inverted”?
img.inverted {
filter: invert(100%);
}Which of the following defines an animation change-color that changes the font color from green to red?
@keyframes change-color {
from {}
to {}
}Which of the following will result in a smooth transition from green to red as the mouse clicks on h1 tags?
h1 {
transition: color 2s;
}
h1:active {
}
Note 
Flashcards (56)