specify these and other spcial characters using a simple abbreviation
< <
> >
& &
link elements with ids
<a href="index.html#chai">See Chai Tea</a>
webfont
the @font-face rule
allows you to define the name and location of a font
text-align
align all the inline content in a block element
float
the float property first takes an element and floats it as far left or right as it can
It then flows all the content below it around the element
you must specify a width
solve the overlap problem
use the CSS clear property on an element to request that as the element is being flowed onto the page, no floating content is allowed on the left,right,or both sides of the element
absolutely position
it is removed from the flow and positioned accordign to any top,left,right,or bottom properties that are specified
Elements that are in the flow don't even wrap their inline content around an absolutely positioned element
fixed positioning
place an element in a location that is relative to the browser window
fixed elements never move
static positioning
the default value for positioning is "static"
the element is placed in the normal document flow and isn't positioned by you
relative positioning
takes an element and flows it on the page just like normal, but then offsets it before displaying it on the page
relatively positioned elements are first flowed into the page as normal, and then offset by the specified amount, leaving empty the space where they would normally sit
css table display
first, we added a <div> for the table with the id "tableContainer"
This <div> contains the rows and columns.
div#tableContainer { display: table;}
next,we added a <div> for the row, with the id "tableRow"
if we had multiple rows, we'd need multiple <div>s
div#tableRow { display: table-row;}
finally, we used our existing "main" and "sidebar" <div>s for the cells corresponding to each column in the row
#main, #sidebar { display: table-cell;}
