The first task with any new web site is to consider what blanket rules can be declared in the
body selector. Remember that every element contained in the body element will inherit its
values unless you specify otherwise. For example, to avoid having to declare the font-family
and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding
properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that
take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}With the font-size reduced to 12px, the display looks a little more professional, and
Verdana makes the text a little easier on the eye. Notice that the declared font-size has no
effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.
Showing posts with label Body. Show all posts
Showing posts with label Body. Show all posts
Saturday, October 23, 2010
Monday, October 4, 2010
Margin, Padding, and the Body in Css
Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
Subscribe to:
Posts (Atom)