Yes, yes, yes absolutely use a CSS Reset if you plan to develop for cross-browser compatibility.
Also, Yahoo YUI reset in another excellent choice.
Force IE7 Standards on IE8
Following the previous post here are couple of ways emulate and force your browser to go with the IE7 standards while opened with IE8.
First, to do that you’d need to have XHTML Transitional doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then you’d need add the following line above all your meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The solution, is to set the X-UA-Compatible value via an HTTP header ala:
<?php header('X-UA-Compatible: IE=EmulateIE7'); ?>
Two Ways for you to Reset your CSS
The first way is simple but very efficient when you don’t have tables, iframes, etc. It will reset the padding and margin for all the html elements.
* { padding: 0; margin: 0; font-size: 100%; background: transparent; }
The second way, [original]:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
Specificity Rating
CSS Specificity determines when a style property should be applied irrespective of the location at which it will appear in the style sheets. The more specific a style property is, the more likely for it to be applied to the element. These simple steps will help you figure the specificity of style properties.
How to calculate specificity rating?
Count the number of element names in the selector [=a]
{ … } is 0,
p { … } is 1 and
div p { … } is 2
Count the number of ID attributes in the selector and multiply by 100 [=b] #hot { … } is 100
Count the number of pseudo-classes and other non-ID attributes in the selector and multiply it by 10 [=c]
:active {…} is 10 and
:external:link { … } is 20
Add up all three numbers and that is that property’s specificity
div a { … } = 2
div.top a { … } = 12
#main div.top a { … } = 112
blockquote ul + li { … } = 3
h2 + a [title] { … } = 12
h2 + a [title]: active { … } = 22
Concatenating the three numbers a-b-c [in a number system with a large base] gives the final specificity:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
Note: the specificity of the styles specified in a HTML style attribute is described in another CSS3 Module “Cascade and Inheritance”.
Tips for Specificity Rating
A host of tips to have a better understanding of specificity rating:
- The higher the specificity number, the more likely it will be applied
- Negative selectors are counted just like their simple selectors argument
- Ignore pseudo-elements. Pseudo elements are elements that a CSS selector selects a portion of another element that would not otherwise be defined by the document tree. For example, the first letter or first line of a paragraph is a pseudo element. P: first letter, p: first-line
Descendant Selectors
Descendant selectors in advanced CSS allow you to define styles on elements that are basically located in specific locations in the XHTML document tree. The selectors are defined as patterns, so you can define child elements, grandchild elements and so on. So it’s all related and you will hear/read words like parent, child, sibling and ancestor. That is how CSS specificity works.
A descendant selector is a method of targeting elements as it is in a specific relationship with a set of other elements. But the descendant selector avoids the need to create or assign over many class names.
For example:
div#nav li a {}
There are host of sites that may require different styles on different pages or show different background image/color theme for each page; either of this can be done by using an ID or class on the
element.
<body id="homepage">
<h1>My Title</h1>
This defines you to specify general rules for <h1> element, and then if you want the one on your home page to be styled differently you can target for it more specifically. For example, to place different header background on each section of the site, you need to conduct the following:
h1 {color: red; background: #fff;}
#homepage h1 {background: #fff url("mybgimage.gif") no repeat;}
The second rule will target an <h1> element that has many other elements with the id of "homepage" somewhere in the ancestry. The first rule will be applied to all <h1>'s so the Home Page color will still continue to be red and it’s only the background that had been changed.
You can define a descendant selector by separating the relevant elements with a space:
div p { background-color : #ccc; }
This will definitely impact all p elements that are within a div element. But p elements that are within the body of the document will not get affected at all.
You can also use patterns to specially define your selectors:
div* em {background-color: #ccf;}
This will affect all em elements that are grandchildren of a particular div element. In other words, any em will be two elements below the div.
For example:
<div><p><em>. This one will be </em></p><em>. This one isn't</em></div>
The Descendent selector’s specificity can be calculated as follows:
- Count1 if the selector is a “style” attribute rather than a selector, 0 otherwise (=a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules will have no selectors, so a=1, b=0, c=0 and d=0)
- Count the number of ID attributes in the selector (=b)
- Count the number of other attributes and also pseudo-classes in the selector
- Also count the number of element names and pseudo-elements in the selector (=d)
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the final specificity value of descendent selectors.
What is CSS Specificity?
Specificity in CSS is a test that defines how competing style sheet rules can be applied to the document elements. The larger the style sheets are, the more specificity rules can be applied. For example in case you have two style properties on the same element, the last one defined in the document will definitely be more specific and take greater effect.
Competing Cascading Style Sheet Rules
These refer to rules beyond why a browser would choose one style over another style when displaying an element? This would not generally happen in simple websites, but the more complicated the site will be, the more conflicts will be frothing the style properties.
When it comes to CSS Specificity, it is basically order, which matters. It is basically the order in which styles are read by the browser. If you have a case of two style properties affecting the exact same selector and the last property to be read is the one that would apply.
The same is true whether the styles are in same style sheet or in different external style sheets. The style that is read last would include the one that is applied. If you are getting styles from a variety of locations, the order of styles is important.
Following will be the web page fragment
<html> <head> <link href="stylesheet1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @import URL ("stylesheet3.css"); p { color: blue; } </style> <link href="stylesheet2.css" rel="stylesheet" type="text/css" /> </head> <body> <p style="color: yellow;">first paragraph</p> </body> </html>
The styles and style sheets are imported in the following order by the web browser:
stylesheet1.css stylesheet3.css p { color: blue;} stylesheet2.css <p style ="color:yellow;">
The fifth style is most specific and it would be applied even if there are other styles in the other style sheets that can also be applied.
Typical CSS Specificity examples
First, you need to count the element names. These names can either be in HTML elements or XML elements. To distinguish between the two, I will write it in caps:
* { ... } = 0 P { ... } = 1 DIV P { ... } = 2 H3 + P { ... } = 2
Count Classes, pseudo classes and non-ID attributes and multiply them by 10
.top { ... } = 10 P.top { ... } = 11 a:link { ... } = 11 a.new:link { ... } = 21 H3.bottom + p.top { ... } = 22 DIV + *[title] { ... } = 11
IDs are most specific, so count then and multiply them by 100
#a1 { ... } = 100 #a1.red { ... } = 110 H3#a1.red { ... } = 111 blockquote #a2 { ... } = 101
