Html & Css

Very Useful CSS Tips and Tricks

Skip to end of metadata

Go to start of metadata

Contents


1.Using a CSS Reset for Cross-Browser Compatibility

One of the issues in cross-browser web development is that different browsers use different default values for various CSS properties. By explicitly setting a property like margin to be 0 for certain html elements we can assure that the margin will be 0 on that element in all browsers.

* {
 padding: 0px;
 margin: 0px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address {
 margin: 0px;
 padding: 0px;
 font-family: Trebuchet MS, 'Cuprum', serif;
 font-size: 12px;
 color: #000000;
 text-align: left;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 text-decoration: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th, td {
 vertical-align: top;
}
fieldset, img {
 border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
 font-style: normal;
 font-weight: normal;
}
q:before, q:after {
 content: '';
}
abbr, acronym {
 border: 0;
}
sup {
 vertical-align: text-top;
}
sub {
 vertical-align: text-bottom;
}
pre, code, kbd, samp, tt {
 font-family: monospace;
 *font-size: 108%;
 line-height:100%;
}
em {
 font-style: italic
}
strong {
 font-weight: bold
}
iframe {
 margin: 0px;
}
h1, h2, h3, h4, h5, h6 {
 font-size: 100%;
 font-weight: normal;
}
a img {
 border: none;
}

Back to top

2. Efficient CSS with shorthand properties

Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

Instead of creating CSS like this

background:color image repeat attachment position;
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
margin:1em 0 2em 0.5em;

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

property: value1;
property: value1 value2;
property: value1 value2 value3;
property: value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

One value: all sides

Two values: top and bottom, right and left

Three values: top, right and left, bottom

Four values: top, right, bottom, left

Back to top

3. Understanding Class and ID

These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

Back to top

4. Setting Multiple Classes on an HTML Element

Easy and easy to forget the proper syntax. If you want to set multiple classes on an html element it should look like:

<div class="class-1 class-2 class-3"> </div>

with all class names inside the same set of double quotes with a space between each. The CSS specificity is controlled by the order of the classes in your CSS file. If your CSS has:

class-2 {color: blue}
 class-3 {color: green}
 class-1 {color: red}

then text inside the div will be red as class-1 is the last declared in the CSS. The order the classes appear in the html is irrelevant.

Back to top

5.Forget <table>, try <div>

One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>‘s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

Back to top

6. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

<!--[If IE 5]>
ie 5
<![endif]-->
 
<!--[If lte 6]>
ie 6 and lower
<![endif]-->
 
<!--[If gte 7]>
ie 7 or higher
<![endif]-->

Back to top

7. Understanding !important

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following

h1 {
 color: red !important;
 color: blue
 }

browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the above code would show your h1 as red in all browsers except IE where the color would be blue.

Back to top

8. Replace Text with Image

Better typography through more font choices is here, but there are still limitations to using it in practice. Sometimes the easiest solution is to use an image. However you also want the original text to be there for search engines and screen readers. A simple way to have both text and image is to use the text-indent property.

h1 {
 text-indent:-9999px;
 background:url("h1-image.jpg") no-repeat;
 width:200px;
 height:50px;
 }

The height and width should match those of your image

Back to top

9. Visibility or Display?

On the surface both the CSS visibility and display properties seem to do the same thing, hide or show an element on the page. Beneath the surface they work differently.

  • {visibility: hidden} – The element holds the space, but isn’t seen
  • {display: none} – The element does not hold space. Other elements collapse to fill the space

Most of the time you likely want to use display: none, unless your goal is to leave an empty open space on your page.

Back to top

10. Remove vertical textarea scollbar in IE

Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.

textarea{
 overflow:auto;
}

Back to top

11. min-height fix for IE

* html div#division {
 height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
}
div#division {
 min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}

Back to top

12. Setting Minimum width for a page

* html div#division {
 width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division {
 max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

Back to top

13. Horizontal Centering

It’s easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
 text-align:center; /* for ie */
}
 
#container {
 width:800px;
 margin:0 auto;
 text-align:left;
}

Back to top

14. Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block

The HTML:
 <div id="container">some text here</div>
 
The CSS:
 div#container {height: 35px; line-height: 35px}

Back to top

By default any image that is wrapped in a link will have a border around the image (similar to the way text is underlined). Removing the border is simple

a image {border: none} or a image {border: 0}

Since I never want to see the border around image links I usually set the above on every site I develop.

Back to top

16. Setting Padding on Background Images

Since background images don’t create a new CSS box you can’t directly set padding on them. What you want to do is use the background-position property on the background image to create the same effect.

background-position {top-value left-value}
background-position: 5px 5px

Top values can be top, center, or bottom and Left values can be left, center, or bottom

Both can also take values in % or px or any other measurement. So to create 5px of padding around a background image you would use

Back to top

17. Swap Background Images on Hover

There are two very similar ways to achieve this. The key in both is to use the :hover pseudo-class to change either the url of the image or the position of an image sprite

.element {background-image: url("path-to-an-image")}
 .element:hover {background-image: url("path-to-a-different-image")}
 
 .element {background-position: top-value left-value}
 .element:hover {background-position: different-top-value different-left-value}

Unfortunately IE only accepts :hover on a link and not another element. You can use something like the suckerfish system to dynamically add a class for IE and simulate the :hover behavior.

Back to top

18. nth-child

The nth-child CSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this:

ul li:nth-child(3) {
 background: blue
 }
 
 The above would select the 3rd item in the list and give it a blue background
  
 ul li:nth-child(3n+3) {
 background: blue
 }

Similarly the code above would style every 3rd list item with a blue background

Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8.

ul > li:nth-child(3) is the same as ul > *:first-child + * + *

The code above will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child.

Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

Back to top

19. CSS Text Shadow

Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate

2. value = The Y-coordinate

3. value = The blur radius

4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

Back to top

20. CSS Drop Caps

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 width : 1em;
}

Back to top

21. Round Corners without images

Here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
To round a specific corner (top-left or bottom-right) use below stylesheet.
div {
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
}

Back to top

22. Cross Browser Opacity

Use following stylesheet to make an element transperant by setting the opacity level.

.transparent_class {
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

23. Style the Element that has Focus in a Form

A nice usability tip is to let people filling out a form know which input currently has focus. You can do this easily using the :focus pseudo-selector

input:focus { border: 2px solid green; }

This way your users will know exactly which field is ready for input

Back to top

24. Mobile Specific Stylesheets

As more and more people are accessing the web via smart phones and other mobile devices we need to make sure our sites display well on different platforms. Fortunately html allows you to serve different stylesheets for mobile devices.

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

Back to top

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s