Think the condition a client give you a web project and said i don’t like CSS make it with out CSS, only using HTML and other thing.

what will be your answer to the client ?

i hope it will be “NO” or “I can’t do it”.

i will like to say “then make it your self”

There may be no client such type, so we use css on each and every web project.

but the the main problem css makes to developer is

  1. Cross browser support
  2. Cascading order

the first one is reduced by css and JavaScript Framework. but some times  cascading order makes some  real problem if you use a css framework that makes you some time hopeless, but it is easy to resolve just knowing the order of cascading there are two type of cascading

  1. Selector order
  2. Location order

Every one of us know about location order but very few know about Selector order,  let see the orders first Location order

Location order

  1. The first location is the <style> element in the head of the HTML document. This will over write all other.
  2. The second important location  is @import within <style> tag. if we include any style sheet using @import statement with in <style> </style>, than the style from this style sheet will take most important after the first one !important and before next 4 group.
  3. The thirdimportant location is the style sheet included using <link> tag.
  4. The forth location is the the style sheet which is included in another style sheet  using  @import, and the style sheet which include this is link with HTML using <link> tag. little confusing let see a example
  5. let assume the have two style sheet one.css and two.css

    let one.css is

    @two.css

    body{margin:0px;}

    a{text-decoration:none;}

    let two.css is

    h4{margin:0px}

    #me{margin:0px}

    than the two.css takes important grater then group 5 and 6 but less the 1,2 and 3 also less the one.css.

  6. The fifth important location is the stylesheet attached by an end user.
  7. The last one location is the default stylesheet supplied by a browser.

let now see the Selector order

Selector order

  1. The first important selector  is !important, if the is any !important than this style will be rendered emitting all other.for example                                                                                                                                                                                                                                #example{color:red !important;}                                                                              #example { color:black; }                                                                                                                                                                                                                                                        by location rules(explains above) the color must me black but for !important it will be red.
  2. The second  important selector is style attribute within a tag. for example<p style=”background:#0CF”></p>but it is good particle to never use it
  3. The third important selector is id selector all #idname.
  4. The forth important selector is class (.classname), attribute (*[title]) and pseudo (a:hover) selector.
  5. The fifth selector is element selector like body a etc.
  6. and the last one is universal selector the * or *.class etc.

very easy list just write in a paper and see regularly for some day, if do so it will come to your mind  automatically.

Advertisements