css

Rational for using CSS

Cascade Style Sheet (CSS) is designed to remove style from the HTML documents, and store them separately for portability and reusability.

A CSS rule contains at least one selector and at least one declaration within a declaration block.

• Each selector is separated by a comma (,), and a space used to cascade specificity.
• A declaration is made up by name/value pair, and each declaration is separated by a semicolon (;)
• A declaration block is defined by curly braces ({}).

There are three types of style sheets.

What is Specificity?

Each CSS selector has a specificity value, and more specific selector has the higher precedence it has. If multiple selectors apply to a single element, the highest specificity CSS rule apply to the element. Have you had an experience where you define a CSS rule for an element, and it doesn't work? You probably have a CSS rule that has a higher specificity value which causes your newly created CSS rule to not apply.

Which CSS rule applies to an element?

Vertically aligning input box and the label that goes with it is quiet challenging especially when you have vertically align them on all browsers such as IE, Firefox, Chrome, Safari and Opera; and on all different versions on all available OSes. I had to work with multiple checkboxes in a single row with label attached to each input checkbox, and when I thought I've got it done; it worked all but on a Chrome running in Mac. This made me rework the whole thing again from scratch using display table CSS property.