5 Simple CSS Tips You Need To Know
1. Float an Image and Wrap Your Text Around
One of the common questions that people starting out with CSS have is how do you wrap the text around an image? Simple do this:
2. Center A Block Element
As I pointed out in the post about Controlling Page Layout with CSS and Dreamweaver CS3 here is how you center a block element.
3. Use CSS Shorthand
Another thing that I see many CSS designers do is use multiple lines of code where there is a better more efficient way eg:
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
If you use CSS shorthand then those 3 lines can condense onto 1 line:
font: bold 16px Arial, Helvetica, sans-serif;
}
Much cleaner, with this method be sure to define the font-size and the font-family properties.
4. Global Styling
One of my pet hates is taking over a project that and noticing that on a majority of elements that margin and paddings are set to zero for each element, why not do this:
5. Use Line Height to Vertically Center Text
Specify the line height to be the same as the height of the box to vertically align your text. If your div / box is 20px in height then set the line-height to 24px as well.
height:20px
line-height:20px;
}
Want more CSS and Web Tips? Then sign up for the Weekly Web Design Tips Newsletter (top right of the page)
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
Leave a Reply