Tag Archives: HTML

Some Html CSS tips and tricks

Posted on by

Some Html CSS tips and tricks Trick No. 1:We often need to use clear in our html so insted of using:
<divstyle="clear: both"></div> OR <divclass="clear"></div>

We can make use of pseudo selector :after,like this: ———–

.container {
        /*dummy attributes*/
        height:100%;
        width:100%
        margin:5px;
}
.container :after {
        display: block;
        clear: both;
        content: " ";
        height: 0;
        overflow: hidden;
}
.container childDiv {
       float:left;
}
——
It makes more sense if we are using LESS,as we can create a mixin for this as:
.clearfix() {
        &:after {
              display: block;
              clear: both;
              content: " ";
              height: 0;
              overflow: hidden;
       }
}
and then we can call this in our class,like this:
.container {
        /* this div has two floated child,*/
        /* so we must clear left/right after this div.*/
        /* calling the mixin,which will take care of clear.*/
        .clearfix;
        .div1 {
              float:left;
        }      
        .div2 {
              float:right;
        }
 }
Trick No. 2: last-child/first-child are another pseudo selector,which are very useful,so if we want to apply some additional attributes to last/first child of certain class,we can use these selector. This is how these can be used:
.class-name {
     /* dummy attributes */
     height:100%;
     width:100%
     margin:5px;
 }
 .class-name:last-child {
     margin:0px;
 }
Trick No. 3:To select the next element, we can use + selector:
.class-name + span {
        /*dummy attributes*/
        height:100%;
        width:100%
        margin:5px;
 }
it will select the next span element. We can also select the next element with class name.

.class-name + .some-class {
        /* dummy attributes */
 }
Trick No. 4:If we want to make some portion of image clickable (hot spot),then we can insert an anchor with absolute position, e.g.:
.container {
       background: url('../images/container-bg.png') no-repeat;
       height:75px;
       width:75px;
       position:relative;
 }
 .hot-spot {
       position: absolute;
       bottom:0;
       right:0;
       height:28px;
       width: 28px;
       display: block;
       content:"";
 }
HTML for this
<div class="container">
        <!-- We can place this anchor anywhere under this div -->
        <a class=".hot-spot" href="#" alt="hot spot"></a>
        <!-- dummy text -->
        <p>
                Lorem ipsum dolor sit amet.Etiam a ipsum id purus.
        </p>
<div>
Note: if the element is positioned absolute, then its parent must be positioned relative.
Trick No. 5: For browser specific css, instead of creating different css/less files we should use this:
<!--[if IE 8 ]><head class="ie8"><![endif]-->
<!--[if (IE 9) |!(IE)]><!--><head><!--<![endif]-->
And define this class “ie8″ in the same css/less file. Happy Coding!!