Compatible CSS for first-child

selector:first-child {declarations}*:first-child + html selector{declarations}*:first-child + html selector{declarations} * html selector{declarations}

Example:
.dateElement td:first-child { width:80px; }
*:first-child + html .dateElement td{ width:80px; }
*:first-child + html .dateElement td{ width:80px; } * html .dateElement td{width:80px;}

Source

Stylesheets / CSS in Javascript

if(document.styleSheets[index].cssRules) rules=document.styleSheets[index].cssRules

else if(document.styleSheets[index].rules) rules=document.styleSheets[index].rules;

var firstRule=rules[0];

var selector=firstRule.selectorText;

var style=firstRule.style;

Source1

Source2

Optimizing code while styling HTML table rows

When specifying the css class name to be used for a tr HTML element, so as to specify the style for a HTML table row element , we need not explicitly specify the classname for all tr tags if all tr's have same styles. Rather we can only explicitly specify the classname for the first tr tag . By doing so subsequent tr tags will implicitly have the required style

Horizontal aligning of HTML elements using CSS

Center Align:

margin-left : auto;

margin-right : auto;

Right Align

float : right;

Left Align:

float : left;

Importing a css file in a css file

@import url("cssfile1.css");

@import url("cssfile2.css");

Few Guidelines while writing CSS

1. Defining font sizes in css:

While defining font sizes in stylesheets , we should hardcode the same only once. This will make font size manipulation easier. If we want different font sizes for various child elements of an HTML element we should use relative values (like em , %) . It is because a child element of an HTML element assumes its parent element's font size as its default value , thus inheriting the value thereby. But the most possible exception for this statement is IFRAME element in HTML

2. Reducing lines in a css file:

If we have number of same properties having same value. We should avoid repetition of the same by declaring that specific rules at a time and as usual separated by commas. By doing so we can make our css file compact.

Fix : Appearing of dotted borders when we click an element in mozilla

:focus { -moz-outline-style: none; }

Different ways of creating CSS rules

.css_class_name

{

..

}

.css_class_name *

{

..

}

.css_class_name html_tag_name

{

..

}

.css_class_name html_tag_name1, html_tag_name2

{

..

}

.css_class_name .its_child_class_name

{

..

}

.css_class_name table > tbody > tr > td

{

..

}

.css_class_name table > tbody > tr > td:first-child

{

..

}

#id_of_html_element

{

..

}

.css_class_name [id= id_of_html_element]

{

..

}

.css_class_name input[type=text]

{

..

}

CSS code to reduce image brightness by 50%

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;