5 important css tips for Web designers and Developers

These css tips are not very common to find. But very often we need to use these css properties. Sometimes they become real headache if we do not know how to use these properties properly.

1. Set body font-size to 62.5%  if you are using em for fonts.

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

2. Removing outline for Safari and chrome input text boxes

When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).

If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):

input[type=”text”]:focus {
outline: none;
}

3. Target IE6 and IE7 Browsers with special hacks

The code below will change the background-color of divs depending on what browser the user is viewing the web page under. Since * cascades down to IE7 and below, we use _ after that declaration so that IE6 (and below) has a different background color from IE7.

div {
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property – IE7 and below */
_background-color: #000; /* add a _ before the property – IE6 and below */
}

4. Transparency/Opacity in All Major Browsers

div {
/* standards-compliant browsers */
opacity:0.7;

/* The following is ignored by standards-based browsers */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

5.  !important to Override Normal CSS Precedence Rules

In CSS, when two properties apply to the same element, the one that is farther down the stylesheet is the one that will take effect. However, by using !important at the end of a property value, this can be changed.

Let’s take, for example, this set of style rules:

h1 { color: green; }
h1 { color: red; }

The h1 element will have a red color with the CSS above.

If we wanted to change the style rule’s priority without changing the order of the property declaration, then we simply do the following:

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

Now, the <h1> element will be green.

These css properties are very often used but not very popular. Lets hope these tips are usefull to you.

Advertisements

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

%d bloggers like this: