5 Simple CSS Tips

5 Simple CSS Tips

Cascading Style Sheets, or CSS is a common application used to style web pages. It has been known to reduce bandwidth, increase uniformity among different browsers, and even add some stylistic flair to web pages. Here are a couple of tips to help you along the way.

1. CSS and Text Overflow

If text has been cut off and you want to leave a visual clue to the user, use CSS to leave an ellipses to inform them that there is more to read.
example code:

text-overflow: ellipsis-word;

2. Rotating Text With CSS

By using the “transform” property in Webkit and Firefox, and the BasicImage filter in Internet Explorer, web designers have the ability to rotate text as they please. Designers can use this tool to rotate images as well making it a valuable asset for almost any design.
example codes:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

3. Using CSS to Center Layouts

For web sites that rely heavily on large pictures, it is crucial to present the pictures correctly to prevent any problems. This code allows for proper centering, fixing problems associated with overlapping images, repeating images, or images that cut off neat the edges of the screen.
example code:

#container {margin: 0 auto; width: 30px; text-align: left;}

4. Resetting CSS

Resetting CSS gives users the ability to work uniformly across multiple browsers and platforms, fixing problems with margins, font size, headings, default line heights and other variables that often change between browsers.
example code:

{padding: 0; margin: 0;}

5. Using Shorthand CSS

Especially in larger projects, using shorthand CSS helps to keep file size small, which greatly benefits users as web pages don’t take as long to load. The biggest benefit, however, is its large boost in efficiency. When coding takes a significantly short time, you can do more work in a shorter amount of time.
example code:

#box p {margin-top: 15px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; }

can be shortened to…

#box p {margin:15px 5px; }

read more