CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.

1. Reset Values
   

   Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:

   * {
        margin: 0;
        padding: 0;
   }

   For more in-depth and thorough code, you may visit CSS Tools.

2. CSS Hover Pseudo Class
   

   Creating nice hover effects can greatly help out your visitors. Many websites create a basic effect that changes the text color, border, or background when the mouse hovers over a link. This enables visitors to easily identify these elements and follow them to access your content.

   a:hover {      border-bottom: 1px solid black; }

   This sample piece of code adds a 1 pixel wide bottom border when the user hovers over a link.

   Many web designers only use the hover pseudo class while dealing with links. Note that it can be used much more often. For example:

   input {      background-color: #e7e7e7; } input:hover {      background-color: #fff; }

   This changes the background of a hovered input box to signify that the user may type in it.

3. Image Display
   

   Search engines are only able to understand the words that you place into your HTML markup. Flash content or images are not directly identifiable.

   A problem may arise when you create a logo image. If you want to have actual words on the logo image (as we have done in our site’s logo), you are not expressing this content to the search engines. For example, let’s say you wanted to integrate your logo image:

   #logo {
        width: 960px;
        height: 150px;
        background: #fff url(your-image-name.jpg) no-repeat;
   }
   
   <div id="logo">
   
   </div>

   As you can see, there is no content in your logo div. Search engines will not be able to understand any text placed in your image. This is where an easy CSS trick comes in handy.

   Let’s say that you placed your site’s name, which we will represent with “Site Name”, directly into your image. It is possible to do the following:

   #logo {
        width: 960px;
        height: 150px;
        background: #fff url(your-image-name.jpg) no-repeat;
   }
   
   #logo h1 {
        display: none;
   }
   
   <div id="logo">
        <h1>Site Name</h1>
   </div>

   By adding this invisible text, the search engine is able to see the words you placed on your logo without them actually appearing on your site twice.

4. Fixed Width Wrapper
   

   Many sites use a fixed width design. The common values for such a design are 780px and 960px.

   Some web designers make the mistake of restating this width every time they create a new element. For example:

   #logo {
        width: 960px;
        height: 150px;
        margin: 0 auto;
        background: #fff url(some-image.jpg) no-repeat;
   }
   
   #menu {
        width: 960px;
        height: 50px;
        margin: 0 auto;
   }
   
   #content {
        width: 960px;
        margin: 0 auto;
        background: #fff;
   }

   Definitions can easily become messy and out of shape when creating a fixed width design like this. A simple way to combat this problem is by creating a wrapper div that contains all other elements:

   #wrapper {
        width: 960px;
        margin: 0 auto;
   }
   
   #logo {
        height: 150px;
        background: #fff url(some-image.jpg) no-repeat;
   }
   
   #menu {
        height: 50px;
   }
   
   #content {
        background: #fff;
   }

   This produces clean, efficient code that takes advantage of the CSS cascading property.

5. Vertical Alignment
   

   Many beginning CSS users have trouble making an element vertically aligned in a container. For example, given the following HTML and CSS:

   #logo {
        width: 960px;
        height: 150px;
   }
   
   <div id="logo">
        <h1>Site Name</h1>
   </div>

   A vertical alignment can be created using absolute positioning. By giving the logo a position style of relative, the header can be placed in the dead center of the container”

   #logo {
        position: relative;
        width: 960px;
        height: 150px;
   }
   
   #logo h1 {
        position: absolute;
        top: 50%;
   }
   
   <div id="logo">
        <h1>Site Name</h1>
   </div>

   And that is all there is to it. The text is now vertically aligned. To make it centered horizontally, add the following line to the #logo h1 definition:

   left: 50%;

Happy Coding!