Advanced HTML/CSS
How do you select all HTML elements with the class "alert" and set their color to be red?
.alert { color: red; }
Why is it important to avoid repetitive code while creating a website?
1.Excessive code is harder to read and understand 2. It is easier to make edits to websites when CSS rules are strategically grouped and organized 3. It demonstrates good coding style
For the given div, what is the size of the right padding? div {width: 10px; height: 10px; padding: 15px 10px 5px 20px; }
10px
the proper way to link to the about.html page from the index.html page?
<a href= "about.html"> About This Site </a>
You are trying to apply the same style to several different elements in a block, with line breaks before and after. What tag should you use?
<div>
The correct uses div to style multiple elements the same way?
<div> <h2 class="intro"> Welcome </h2> <p class="intro"> Hi, welcome to my page. </p> </div>
What would you use an IFrame for?
Embedding a map from Google Maps in your website
Only CSS has online documentation because it is a more complex language than HTML.
False
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
What are IFrames?
HTML pages embedded inside of other HTML pages.
What defines a border's thickness so that the top and bottom borders are 10px thick and left and rightborders are 5px thick?
border: 10px 5px 10px 5px;
You will learn everything there is to know about HTML and CSS in one place.
false
This 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;}
will turn the h1 tag blue as the mouse hovers over it?
h1:hover { color: blue; }
will insert an exclamation point after every h2 element.
h2::after { content: "!"; }
How do you select the HTML element with the id logo and set the font size for that element to 60 pixels?
#logo { font-size: 60px; }
the difference between <span> and <div> ?
<span> is used to group and style inline elements, while <div> creates a line break.
What defines an animation change-color that changes the font color from green to red?
@keyframes change-color {from {color: green;} to {color: red;} }
What will define an animation increase-font that increases the font size from 5px to 20px?
@keyframes increase-font {from {font-size: 5px;} to {font-size: 20px;} }
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>
ranks the selectors from highest precedence to lowest precedence?
Select by id name, select by class name, select by tag name
The Inspector is useful tool for the following tasks?
Testing what small CSS changes will do to the site presentation
None of the changes you make in the Inspector will be saved.
True
How can you select all h1 tags that are immediate children of div tags?
div > h1 { ... }
What would select all elements with the class footer that are inside of divs?
div .footer { ... }
What would select all tags that are immediate children of div tags?
div > a { ... }
What applies an animation named grayscaleFilter over 10 seconds to every img tag?
img { animation: grayscaleFilter 10s;}
How do you select all <img> tags on a page and give them a height of 200 pixels?
img { height: 200px;}
applies a grayscale filter to all images?
img {filter: grayscale(100%); }
What applies the invert filter to all images with the class "inverted"?
img.inverted { filter: invert(100%); }
What selects images as the mouse hovers over them and sets their size to 350px by 350px?
img:hover { width: 350px; height: 350px; }
What will select all p tags with the class alert and makes them red?
p.alert { color: red; }
What will turn the first letter of all p elements blue?
p::first-letter { color: blue; }
What settings will make an element invisible?
visibility: hidden; opacity: 0; display: none
