Hybrid 4-6 Flashcards
T/F - Block elements ignore width and height properties
False
T/F - All browsers have a default style sheet that apply basic style to HTML markup
True
An external style sheet uses the ___ file extension
css
Explain the descendant combinator (“ “)
Selects nodes that are descendants of the first element
div h1 { } would match all h1 elements that are nested in a <div> regardless of where that <div> is in the tree
<div>
<ol>
<li> <h1> This would be selected
</h1></li></ol></div>
Explain the child combinator (>)
Only selects nodes that are direct children of the first element.
div > h1
<div>
<ol>
<li> <h1> This would NOT be selected
<div>
<h1> this would be selected
</h1></div></h1></li></ol></div>
Explain the general sibling combinator (~)
Selects all subsequent second elements that follow the first element. They must have the same parent.
div ~ h1 All h1 elements, immediate or not, will match ( as long as they have the same parent)
<div>
<ul>
<li> <h1> this will match
<h1> - I don't think this will (div is parent of h1, h1s parent is body)
</h1></h1></li></ul></div>
Explain the adjacent sibling combinator (+)
2nd element will match only if it immediately follows the first
h2 + p only the first <p> will match
<h2>
<p> match
<p> no match
</p></p></h2>
Explain the column combinator (||)
Only matches elements matched by the 2nd element that also belong the column elements of the first.
All relates to tables. Essentially you define the columns before actually writing them in HTML. The 2nd element must be part of the columns.
column-selector || td
<h1>
<p paragraph 1 p>
<p paragraph 2 p>
CSS
Style
h1 ~ p {
color:red;
}
</Style>
Would the browser output something like this?
Heading
red para
normal para
</h1>
No it would not, you would need an adjacent combinator for that. This would look like
Heading
red para
red para
Authors use the ____ element to use external style sheets in their HTML pages
link
.offer
{
color:blue;
font-family:Arial,sans-serif;
}
What does this do?
Configures a class called offer with blue text and arial or sans-serif font
What is the advantage of using inline CSS?
It can be used to quickly test local CSS overrides
T/F - Inline elements take up the same height and width as teh content contained within their tags
True
body {
background: white;
}
section {
background: red;
height:200px
}
What does this do?
Red section on a white background
What is the universal selector in CSS?
*
