Step 1: Title Text
Sunday, 23. July 2006, 22:02:40
If we take a look at the main.css stylesheet found in most any of the default themes, we will notice a part called Title. See below for a walkthrough of each element and what it does.
#top h1 {
margin:0;
width:100%;
overflow:hidden;
font-size:30px;
font-family:'trebuchet ms',arial,helvetica,sans-serif;
line-height:normal;
padding-top:22px;
}
Here's Ivan's line by line walkthrough:
- margin:0;
- The CSS margin properties define the space around elements. In this case, the margin is 0.
- width:100%;
- The width property sets the width of an element. In this case, the width of the title area is 100%, and that means that it will be possible for users to write their title as long as there is space in the header. In other words, as wide as the header is, is as wide (100%) as the area is for the title.
- overflow:hidden;
- The overflow property sets what happens if the content of an element overflows its area. Hidden means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content.
- font-size:30px;
- Font-size sets the size of a font. It is expressed in pixels (px), ems or percentages of the default. In this case, font size is set in pixels.
- font-family:'trebuchet ms',arial,helvetica,sans-serif;
- Font-family is a prioritized list of font family names and/or generic family names for an element. It's a good idea to offer several common fonts available on the Mac and Windows PC, and always declare a generic (serif, sans-serif, monospace, etc.) font family. When declaring fonts that have more than one word in their name (e.g., Trebuchet MS or Times New Roman), enclose the font name in single or double quotes. In this case, the font-family contains: Trebuchet MS, Arial, Helvetica,and Sans-Serif. The browser will look on the user's machine to see if he or she has those fonts, in the order listed. If it cannot find any of the fonts, it will use an approximation.
- line-height:normal;
- The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines.
- padding-top:22px;
- The padding-top property sets the top padding (space) of an element. In this case it is set to 10 pixels.





