Monday 28 April 2014

CSS Selectors

to apply css to your html tags first you need to find ways to reference them in css, this is called selection and there are different technique to refer to html tags.


  1. Refer to html general tags for example:
    body{
    margin:0;
    padding:0;
    }
  2. Select through hierarchy. for example the following says any div inside P tag
    p div { background: #bbb url(../images/divbackground.jpg);}
  3. you can define a class inside html for a tag and then in css refer to it.
    .myCustomClass{border:none}
  4. you can define an id for html tag and refer to it in css.
    #myId{font-size: 0.9em;}
  5. you can have hierarchy for class or id scenario above like:
    p.myCustomClass{color:#aaa} /*means for any item having myCustomClass inside p tag*/
  6. there are some tags that have different state like a tag
    a{text-decoration:none;}
    a:hover{text-decoration:underline;}
  7. there are tags that have different type like input tag
    input[type="text"]{font-family: Verdana, sans-serif;}
  8. finally if you want to refer just to first child in hierarchy you can use
    div>input{font-family:georgia, serif}
best practice would be define the general tags then use class and id to target specific item and finally you can target specific also with hierarchy.

No comments:

Post a Comment