HTML and CSS Reference
In-Depth Information
body {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Arimo', sans-serif;
font-weight: bold;
margin-bottom: 0.5em;
font-size: 1em;
}
h3 { font-size: 1.25em; }
h2 { font-size: 1.5em; }
h1 { font-size: 1.9em; }
You use em's instead of pixels for the font size. Setting the body's font-size to
0.75em is the equivelant to 12px as shown in the code snippet above where the
font-size has been declared as em's for the body. 1em is equivelant to the
browsers default font size, which is 16px. To work out what 10px should be in
em's, you would use 10 / 16 which would equal 0.625, so 10px would be
0.625em's. em's are useful as the values are relative. For instance, if you set a
div's font size to 0.75em (12px) and then set any element within that to 1em,
that font size will be relative to the parent element'ss font size. So 1em in the
child element becomes 0.75em from the parent element. Trying to figure out
what the font sizes for EM's should be can be a nightmare,
http://riddle.pl/emcalc/ ha
s a soloution that allows you to build a DOM based
tree of font sizes in pixels, the web app will convert them to em's for you and
take into account what the parent elements font size is.
Save and close the _typography.scss file. Open the _layout.scss file. The
_layout.scss file will control the positioning, dimensions, colour and general
layout of elements within the application.
The first thing to do is to style the body, html, #shoe and .deck elements of the
application. You style these at the top so that they can be overridden at a latter
point in your stylesheet.
body, html, #shoe, .deck {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
As you can see, the height and width have been set to 100% so that it spans the
width and height of the screen. overflow: hidden; has been added so that any
content that flows outside of the elements are cut off and don't affect the layout,
