Wednesday, August 21, 2013

CSS Hacks...!

1- Below are possible ways to add style-sheet.

a) Internal Style Sheet --      <style type="text/css"> ......</style>
b) External Style Sheet --     <link rel="stylesheet" type="text/css" href="css/global.css">

or XHTML way

<link rel="stylesheet" type="text/css" href="css/mystylesheet.css">

c) Linking a Style Sheet using CSS -- <style type="text/css">@import url(css/mystylesheet.css);</style>

NOTE- import technique can slow your style sheets’ download speed   @www.stevesouders.com/blog/2009/04/09/dont-use-import/

d) Inline StyleSheet -- <h1 style="color: #FFFFFF;">


2- Selectors in CSS
Tag Selector       --    tag_name {  }
Class Selector    --   .class_name {  }
ID selector          --    #id {  }
Group Selector   --    tag, .class, #id, .class1 {   }
Universal Selector       --   * {  }
Descendent Selector   --   html  body  ul  li  a  {  }      


3- Pseudo-classes
a.link  -- any non-visited link
a.visited -- any link which is visited as per browser history
a.hover -- how to behave when visitor passes mouse over it
a.active -- how a link looks as visitor click


4- To Remove dotted border which appear while clicking on anchored text use

a:active, a:focus {outline:  none;ie-dummy: expression(this.hideFocus=true);}


5- Pseudo-element
:before -- add content preceding given element
            to put content before paragraph -- p.tip:before {content: "HOT TIP!" }
:after  -- add content after given element
:first-child -- select the first child
:focus -- visitor does something to indicate her attention to a web page element—usually by clicking or tabbing into it
( IE6 and IE7 do not support :before, :after and :focus pseudo element)