CSS font shorthand rules
You might do something like this when defining a font using CSS:
font-size: 1em;
The line – height: 1.5 em.
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
In fact, you can abbreviate these properties:
Font: 1EM / 1.5EM Bold italic Small-caps Verdana, Serif
Much better now, but there is one cavtake: to use this shorthand you must specify at least the font-size and font-family attributes. Other attributes (such as font-weight, font-style, and font-varient) will automatically use the default values if they are not specified.
Use both classes simultaneously
Normally we only specify one class for attributes, but that doesn’t mean you can only specify one. In fact, you can specify as many classes as you like, for example:
<p class=”side text”>… </p>
By using both classes (separated by Spaces instead of commas), the paragraph applies the rules laid down in both classes. If there is any rule overlap between the two, then the latter gets practical precedence.
The default border value in the CSS
When writing rules for a border, you usually specify color, width, and style (in any order). For example: border: 3px solid #000 (black solid line border 3 pixels wide), the only value you need to specify in this example is the style. If you specify the style as solid, the rest of the values will use the default values: the default width is medium (3 to 4 pixels); The default color is the text color in the border. If this is exactly what you want, you don’t have to specify it in CSS.
! Important will be ignored by IE
In CSS, the rule specified last usually takes precedence. For browsers other than Internet Explorer, however, anything with a tag! Margin-top: 3.5em! important; Margin – top: 2 em.
The top edge in all browsers except IE is 3.5em and IE is 2em, which is sometimes useful, especially when relative edge values are used (as in this example) to show the subtle differences between IE and other browsers. (Many may also have noticed that CSS child selectors are also ignored by IE.)
Picture replacement techniques
Using standard HTML instead of images to display text is often more sensible, in addition to faster downloads and better usability. But if you are determined to use a font that may not be available on your visitor’s machine, you can only choose images.
For example, if you want to use the “Buy Widgets” title at the top of every page, but you also want it to be visible to search engines, you might want to use images instead if you use an unusual font for aesthetics:
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
This is certainly true, but there is evidence that search engines value real text far more than Alt text (because so many websites already use Alt text as keywords), so we have to use another method: <h1><span>Buy widgets</span></h1> What about your beautiful fonts? The following CSS can help:
h1 {
background: url(widget-image.gif) no-repeat;
}
h1 span {
position: absolute;
left:-2000px;
}
Now you have a nice image and a good hiding of the real text – with CSS, the text is positioned at -2000 pixels to the left of the screen.
An alternative to CSS box model hacks
CSS box model hacks were used to solve browser display problems prior to IE6, which included the border and padding values of an element within the width (rather than on top of it). For example, you might use the following CSS to specify the size of a container:
#box {
width: 100px;
border: 5px;
padding: 20px;
}
Then apply to HTML: <div id=”box”>… </div>, the box’s total width is 150 pixels in almost all browsers (100 pixels wide + two 5-pixel borders + two 20-pixel fills), except in browsers prior to IE6 where it is still 100 pixels (border and fill values are included in the width values). The box model hack is designed to solve this problem. But it can also cause trouble. The simpler way is as follows:
#box {
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
<div id=”box”><div>… </div></div>
The total width of the box will be 150 pixels in any browser.
Center the block element
Assuming your site has a fixed width layout with all the content in the center of the screen, use the following CSS:
#content {
width: 700px;
margin: 0 auto;
}
You can place any item within the body of the HTML inside <div id=”content”></div>, and the item will automatically get equal left and right boundary values to ensure center display. However, this is still problematic in browsers prior to IE6 and will not be centered, so it must be changed as follows:
body {
text-align: center;
}
#content {
text-align: left;
width: 700px;
margin: 0 auto;
}
Setting the body will center the body content, but it will center all the text, which is probably not what you want. For this reason, the #content div should also specify a value: text-align: left.
Use CSS to achieve vertical center
Vertical-align: middle is a piece of cake for a table, just specify vertical-align: middle, but this doesn’t work in CSS layouts. If you set the height of a navigation menu to 2em and specify the vertical alignment rules in CSS, the text will still be placed at the top of the box, no difference at all.
To solve this problem, simply set the box’s row height to be the same as the box’s height. In this case, the box’s height is 2em, so simply add one more line in the CSS: line-height: 2em to achieve vertical center!
Location of CSS in a container
One of the biggest advantages of CSS is that you can locate objects anywhere in a document, as well as within a container. Just add a CSS rule to the container:
#container {
position: relative;
}
Any element in the container is positioned relative to the container. Suppose you use the following HTML structure:
<div id=”container”><div id=”navigation”>… </div></div>
If you want to position navigation within the container 30 pixels from the left edge and 5 pixels from the top, you can use the following CSS statement:
#navigation {
position: absolute;
left: 30px;
top: 5px;
}
The background color that extends to the bottom of the screen
One of the drawbacks of CSS is the lack of vertical control, which leads to problems that a tabulated layout would not encounter. Suppose you set up a navigation column on the left side of the page for your site. The page has a white background, but you want the navigation column to have a blue background, use the following CSS:
#navigation {
background: blue;
width: 150px;
}
The problem is that navigation items don’t go all the way to the bottom of the page, and their background colors don’t go all the way to the bottom. The blue background in the left column gets cut halfway across the page, wasting your design. What to do? Unfortunately we now have to cheat by specifying the background of the body to be the same color and width as the image in the left column, CSS as follows:
body {
background: url(blue-image.gif) 0 0 repeat-y;
}
The background image should be a blue image 150 pixels wide. The disadvantage of this approach is that you can’t use EM to specify the width of the left column. When the user changes the size of the text, the width of the background color does not change. As of this writing this is the only solution to this kind of problem, so you can only use pixel values for the left column to get different background colors that automatically extend.