Click for CSS Code
Open or Close Box
body{
font-size:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFFFF;
}
h1{font-size:1.5em;}
h2{font-size:1.2em; color:#333333;}
h3{font-size:1em; color:#666666;}
h4{font-size:.9em; color:#999999;}
h5{font-size:.8em; color:#CCCCCC;}
h6{font-size:.7em; color:#666600;}
p{
font-size:.8em;
font-weight:bold;
}
blockquote{
font-size:.8em;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#999999;
border-right-color:#999999;
border-bottom-color:#999999;
border-left-color:#999999;
background-color:#DEDEDE;
}
ul{
font-size:.8em;
font-variant:small-caps;
}
To start we set the default settings, telling the "body" to set the font size to 100%. Setting font size to "100%" means that we set the font to 100% of the UA settings. If the UA has a setting of 13pixel as default then our body will set the text to 100% of 13pixel.
A Font Size Demonstration has been created to view the different types of font size structures "px, %, em, pt".
We now decide what font we want to use - in this case I have used one of the most supported web fonts "Verdana". In our CSS there are multiple fonts shown in one line - this is for a reason. If the person viewing your webpage doesnt have "Verdana" installed then "Arial" will be selected, this carrys on until a font is found to be installed. If all else fails then a standard "sans-serif" font will be selected.
Now we set the general font and background colours - please note that colour is written using the American style: "color".
It is always good practice to define a default background color, there are a couple of reasons: 1) If background images are being used and are not shown then the default UA background colour will be shown. 2) The background colour of the UA may be set to a colour that you dont want to show.
Now we set the individual elements that require formatting:
* Headline 1 to 6
* Paragraphs
* Blockquotes
* Unordered lists
Initially all of the elements use the standard size and colour set in the "body". Because we dont want everything to look exactly the same we create a tag in the CSS for the individual elements.
The headlines have been given their own bespoke colours and sizes, the "p, blockquote, ul" have all the same font size. The "p" tag has been told to render in "bold", the "ul"(list) renders using "small-caps" and for this tutorial I have given the "blockquote" a border, a background colour and padding to enhance the block.
Open or Close Box
body{
font-size:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFFFF;
}
h1{font-size:1.5em;}
h2{font-size:1.2em; color:#333333;}
h3{font-size:1em; color:#666666;}
h4{font-size:.9em; color:#999999;}
h5{font-size:.8em; color:#CCCCCC;}
h6{font-size:.7em; color:#666600;}
p{
font-size:.8em;
font-weight:bold;
}
blockquote{
font-size:.8em;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#999999;
border-right-color:#999999;
border-bottom-color:#999999;
border-left-color:#999999;
background-color:#DEDEDE;
}
ul{
font-size:.8em;
font-variant:small-caps;
}
To start we set the default settings, telling the "body" to set the font size to 100%. Setting font size to "100%" means that we set the font to 100% of the UA settings. If the UA has a setting of 13pixel as default then our body will set the text to 100% of 13pixel.
A Font Size Demonstration has been created to view the different types of font size structures "px, %, em, pt".
We now decide what font we want to use - in this case I have used one of the most supported web fonts "Verdana". In our CSS there are multiple fonts shown in one line - this is for a reason. If the person viewing your webpage doesnt have "Verdana" installed then "Arial" will be selected, this carrys on until a font is found to be installed. If all else fails then a standard "sans-serif" font will be selected.
Now we set the general font and background colours - please note that colour is written using the American style: "color".
It is always good practice to define a default background color, there are a couple of reasons: 1) If background images are being used and are not shown then the default UA background colour will be shown. 2) The background colour of the UA may be set to a colour that you dont want to show.
Now we set the individual elements that require formatting:
* Headline 1 to 6
* Paragraphs
* Blockquotes
* Unordered lists
Initially all of the elements use the standard size and colour set in the "body". Because we dont want everything to look exactly the same we create a tag in the CSS for the individual elements.
The headlines have been given their own bespoke colours and sizes, the "p, blockquote, ul" have all the same font size. The "p" tag has been told to render in "bold", the "ul"(list) renders using "small-caps" and for this tutorial I have given the "blockquote" a border, a background colour and padding to enhance the block.
| Website Design | Website Design Company | Web Development Get a beautiful website design. Studio Web is a results oriented web design & online marketing firm serving companies worldwide. |
Sponsored Link |
