Summary:
The <body> wraps all other content. Properties most likely to be set include background, padding, and maybe font properties. Setting margin and width is not recommended, but possible.
In-Depth:
The body tag is an essential element of any webpage. As an HTML element, it encapsulates all visible content. In terms of CSS styles, it is useful in setting the background of the page, although most skins do not make extensive use of this body background, covering it with multiple layers of background colors. In these cases, which are the majority, only the region represented by the rim visible in the chart below would be visible.
Not every property is useful to set for body. Usually, setting the background and padding is all you will ever want to do with it, as there are multiple layers of <div>'s to take care of everything else. One other possibility is to set font properties sont as font-family or font-size.
NOTE: It has come to my attention that some skins use the margin and/or width settings. For example, according to CSS standards, setting "margin:auto" and "width:800px" should center your page and give it a width of 800 pixels. That seems arbitrary, because there's not supposed to be a layer behind <body>. For these purposes, setting wrapper-root or root makes much more sense.
Usage in stylesheet:
body {
//Set background color to red
background: #ff0000;
//Set a 10 pixel margin around entire document
padding: 10px;
}
Apply these styles / Clear styles
Notice that the SideBar text is a link; the color property of the <a> tag overrides the color property of the <div class=SideBarTitle> wrapping it. Thus, to set it:
.SideBarTitle a{
color: #00ff00; //set text color to green
}
Apply this style / Clear this style
SideBarTitle is a seemingly unimportant class but with some interesting features. In its default state, it features large, bolded text with an underline. That functionality is unexpectedly useful, but you can also tune its properties to match your needs.
Some properties worth setting for SideBarTitle include: background, font-size, font-family, & border-bottom. See the example for what some of these properties do. You can also set "display:none" to make this invisible completely.
Usage in stylesheet:
.SideBarTitle {
background: #ffdddd; //Set background to pink
border-bottom: none; //remove the bottom border
font-size: 10pt; //set font properties
font-family: Courier, monospace
}
Apply these styles / Clear styles
Related Question: Why can't I change the font color?
Comments (0)
You don't have permission to comment on this page.