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?
*
test
What does the # selector do?
Selects a single element with the matching id, in this case “test”
Can 2 elements have the same id? How about the same name?
No, 2 elements cannot have the same id, but they can have the same name
What properties are included in the box model?
Height, padding, and border
What is the root element in HTML?
The <html> element, since it is at the start of the branch
What is the rem united based on?
It’s relative to the font-size of the root element of the page. 1rem = same font size as HTML
T/F - Given the following rule
. grid {
display: grid;
width:500px;
grid-template-columns:100px 1fr 1fr;
}
The first column will have a width of 100px. The second column will be 150px wide and the third column will be 300px wide.
False. 3 columns, one of them 100px, 2 of them 200px
Which of these is a JavaScript Datatype? Which is not?
Int
String
Number
Boolean
Number, String, Boolean are, Int is not
T/F - JavaScript is used to add interactive content to websites
True
What would be the result of the JavaScript expression (31 + “angry polar bears”)?
31 angry polar bears
When a user views a page containing a JavaScript program, which machine executes the script?
The users machine running the browser
Which equality operator is used to check whether 2 variables are of the same value and type?
=== - String equality operator
== Does not check if it’s the same type
T/F - JavaScript is a weakly typed language
True
Strongly typed vs weakly typed
Strong: Every variable needs a type, can only receive values of its type
Weak: Vars do not need to be declared with types and the type a value has can change dynamically.
Weak languages see things like conversions/concatenations happen often
