Few things about your browser

How to apply my stylesheet to browser.

This is required when you have a problem in viewing particular colors or have problem in reading content which is more bright then this would be helpful. Not every site will be built with our wanted colors but we can choose every site be displayed in my own style.

This can be done by applying my own stylesheet to the browser.

For example, if i want to see all content with background of web page being white and foreground being black, then i will create a simple css with the following code and save it on my desktop.

* {
color: #000 !important;
background: #FFF !important;
}

If i am using IE browser, then i will open IE, go to Internet Options -> General -> Accessibility -> User Style sheet.

I will select my style sheet and i will see that all the web pages are changed.

If using Mozilla, then you need to put the css with name userContent.css in chrome directory under your profiles.

Reference: http://www.squarefree.com/userstyles/user-style-sheets.html

Sometimes, you will be facing issues with particular form or link being styled different in different browsers. You can remove this by visiting the Mozilla Folder -> res

under res folder, you will see the forms.css, html.css and quirk.css which are the basic 3 important css files which styles the page in a particular format. If you remove then, then you will see the entire web page being Unstyled.

Usage of !important

As you aware, when multiple styles are defined then the concept of specificity helps to determine which style to be applied.

Similarly, when you want to diagnose why a particular style is not being applied, then you can use !important.

For example, i want all h1 text to be in upper case. and i use this style

h1 {
text-transform:uppercase;
}

When i reload it is not working, because there was a style already defined saying this somewhere in my style

#content h1{background-color:green;
text-transform:lowercase;
}

Since this style is having higher specificity value (0101) compared to earlier style (0001), this is being applied. It is easy to debug, bcoz my css file is smaller and the style i am applying is a simple one.

I am not doing any complex things like setting up margins, paddings which is difficult to identify. But imagine, when you are working on a project with many css files being included and you are doing complex things, you may be in a dilemma whether the style you have written is having an error or is it the problem with other styles overriding.

To overcome this , you can use !important like this
h1 {
text-transform:uppercase !important;
}

This will override any other style irrespective of whatever the specificity value is and will make the text in h1 to uppercase. This would eliminate one of my doubt of syntax or style being wrong.

If you are using !important and still you don't see any effect, then it means that there is a error in your style syntax, may be you would have misspelled the element descriptor or Id or Class.

This way, the !important will help you diagnose the issue.

It is advisable and very important to avoid using !important for styling. You should use it only for debugging purpose. For example, the above one can be achieved by giving the same specificity value or writing this style in the same place where it is defined earlier.

Otherwise, later you may have to override this again and you will end up mentioning many !importants in your style.css

Also, Remember if you see !important in your style, then it means you are getting lazy ;)

Hope this may help some of the developers .

All the best

Understanding Specificity

Recently, i started going thorugh few css tutorials as i am facing lot of design issues in my project. While going through css tutorials i came across the concept of specificity which is very interesting and simple. Till the time i don't know specificity i use to play around with firebug and modify all the styles for N times to get a particular style fixed. Now i know how specificity works and hence i can debug the issue fast.

Basically, when multiple styles are defined on a particular element, then the concept of specificity comes into picture. The specificity is a simple 4 digit number which identifies which particular style to be applied.

The specificity contains a 4 digit value with each digit separated by comma. #,#,#,#

Starting from right, The 1st digit stands for the number of element descriptors. If you had given style for 1 then the specificity value is (0,0,0,1). For example

/*The specificity of below li is 0,0,0,1*/
li {background-color:red;
list-style-type:square;
font-style:italic;
}

Similarly if you had styled like (body li {background-color:red}, then the specificity value is 0,0,0,2. When these 2 styles come in the same css, then the higher the specificity values wins and that particular style applied. IT means that the red color backgorund will be applied, bcoz it is more specific than only li.

The 2nd digit form right stands for number of classes defined

The 3rd digit from right stands for number of ids defined

The 4th digit from right stands for inline styles. Hence inline styles will overwrite only conflicting styles. The other styles defined to that element will still be valid

Here are few more styles with specificity values

/*The specificity of below li is 0,0,0,1 because only 1 element descriptor is present*/
li {background-color:red;
list-style-type:square;
font-style:italic;
}

/* The specificity of below style is 0,0,0,2 because 2 element descriptors are present i.e. body and li */
body li {background-color:red;
list-style-type:square;
border:1px solid yellow;
}

/* The specificity of below one is 0,1,1,1 because content is a id and hence 1 mentioned in 2nd digit place, 1 class present hence 1 mentioned in 3rd digit place and 1 element i.e. li and hence 1 in 4th digit place */
#content li.third {background-color:green;
list-style-type:circle;
}

/* The specificity of below one is 0,0,1,3 because the there are 3 element descriptors body, ol and li and 1 class*/
body ol li.third {background-color:purple;
list-style-type:square;
}

/* The specificity of below one is 0,0,1,1 because 1 class and 1 element descriptor is present */
li.third {background-color:yellow;
list-style-type:square;
}

BUT Remember only when more than 1 style applied, then only specificity comes. Otherwise, it won't. For example, if li contains other styles such as font-size, font-style which are not present in body li or any other style of li, then those styles will get applied as there is no conflict.

I hope my small explanation of specificity will help you in understanding and fixing design issues.