Useful CSS Tricks That Make Your Site Interesting

Cascading Style Sheets or CSS is one of the most effective ways to add attractive new features to your website.  Technically speaking, it is a stylesheet language that is used to describe the presentation of a document that is written in a markup language like HTML. To put in simpler words, it is used to enhance the visual appeal of your site. A lot of people think that CSS is technically advanced and you need a great deal of coding knowledge to master it. This is somewhat true. To do advanced stuff with CSS, you need to have a great deal of skill in coding. However, there is some simple stuff that you can do with CSS even if you not a coding master. You can do a little research on the internet about CSS, learn just a few basic stuff and you are good to go! Here in this article, we would be looking at some of the most amazing yet simple CSS tricks.

Changing the Text Highlight Color – You can use CSS to change the color of the selected text. To do that you just need to use the following code

  ::selection{ /* Safari and Opera */  

      background:#c3effd;   

      color:#000;    

  }  

  ::-moz-selection{ /* Firefox */  

      background:#c3effd;   

      color:#000;  

}

  #container{  

      height:auto !important;/*all browsers except ie6 will respect the !important flag*/  

      min-height:500px;  

      height:500px;/*Should have the same value as the min height above*/  

}

Adding Drop Caps Effect – You can add drop caps effect to your text content by using the following simple code

  p:first-letter{  

  display:block;  

  margin:5px 0 0 5px;  

  float:left;  

  color:#FF3366;  

  font-size:3.0em;  

  font-family:Georgia;  

}

Highlighting Links that Open a New Window – To highlight the links that open in a new window you need to use the following code. This is a neat little feature that would make your users understand that clicking on the link would open in a new window.

  a[target="_blank"]:before,  

  a[target="new"]:before {  

      margin:0 5px 0 0;  

      padding:1px;  

      outline:1px solid #333;  

      color:#333;  

      background:#ff9;  

      font:12px "Zapf Dingbats";  

      content: "\279C";  

  }  

Replacing Text with Image – This trick would allow you to show a nice image to your visitors instead of text. However search engines would see text. Just use the following code

  .header{   

      text-indent:-9999px;   

      background:url('someimage.jpg') no-repeat;   

      height: 100px; /*dimensions equal to image size*/  

      width:500px;  

  }  

Capitalize the Text – You can use the simple code to make the first letter of every word in the title to appear in capital

        text-transform: capitalize;  

 Removing Active Link Borders –You can remove active link borders by using the following code

a:active, a:focus{ outline:none; }  

However, if you want to do some advanced stuff to increase the level of attraction of your website, you can take the help of the leading names in website design in Houston as they have a great deal of expertise in CSS web development. So take the help of the experts and design the most amazing website with the help of CSS.