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
