HTML & CSS- part 10 Flashcards
How do you comment in CSS?
/* */
This also works with multi-line comments in javascript. (Single line comments in JS would be //)
How do you comment in HTML?
<!– comment goes here –> (Two dashes with no space in between)
What is the first thing to know about HTML layout?
It’s always a collection of invisible, nested boxes
What are the usual “boxes” in a layout?
The biggest box is <html></html>
The biggest box that you can style is <body></body>
The next biggest box (probably) is <div>
Then you have <p>, <a>, <span> and everything else.</span></a>
What are some of the big parts of almost every webpage?
Header
Footer
Nav bar
Side bar
Main content
How do you create sections like the nav bar and the header?
<div id=”nav_bar”>…</div>
<div id=”header”>…</div>
Which kinds of formats take precedence?
Essentially, the smaller, more precise elements overrule the bigger ones.
class, ID overrule general rules
<p>, <h1> etc. overrule <div> rules
<div> formatting overrules <body> rules.
What is the most important function of <div>?
Layout positioning
What is a <div> width based on?
Divs inherit their width from their parent.
So if you code a <div> at width: 75%, then that’s 75% of their parent, not the page.
Why would I explicitly code the body width at 100% when it defaults to 100% automatically?
Because this lets other coders know that I’m accepting the browser’s default that runs the content from edge to edge in the window
How do you put divs side by side?
use float: left; and float: right;
Then after them, use clear: both;
If there are three div boxes, use float: left for the first two and float: right for the third;
Push the content in the left box to the left and the right box to the right to avoid whitespace
What does this mean?
position: absolute;
This forces the browser to place the element exactly where you want it.
Specifically: it’s positioned relative to its nearest absolute, fixed, or relative ancestor. If it doesn’t have a positioned ancestor, it’s positioned relative to the viewport
How do you remove whitespace from a header?
left: 0; the line that places the element at the 0th pixel from the left. This eliminates whitespace on the left and right.
top: 0: the line that places the element at the 0th pixel from the top
Combining these together will take a header with white space around the sides to one that doesn’t have white space:
div#header {
width: 100%
position: absolute;
top: 0;
left: 0;
background-color: #990000;
}
What is a viewport?
Viewer’s visible area of a web page.
What’s one drawback of pixels?
They don’t adapt to different sized windows
How do I style an h2 heading within the div whose id is “header”?
div#header h2 {
What have I noticed out maring and padding with the <div>?
Seems like when using <div> for layout, the margin and padding are measured in percentages rather than EMs
Also margin expands the space around the image and forces the div to expand to accommodate it
How do these behaving differently from each other when scrolling?
position: fixed; vs. position: absolute;
position: fixed; This one keeps your header (or anything else) from moving off the page when you scroll.
position: absolute; This one does scroll and is placed precisely where you want it.
When coding the position of a div with directions, which comes first?
The left/right part comes before top/bottom
Note: **The top, right, bottom, left positioning can be used with both position: absolute; and position: fixed;
Can the top, right, bottom, and left positioning be used with both?
position: absolute;
position: fixed;
Yes, the top, right, bottom, left positioning can be used with both positions: absolute; and position: fixed;
