Back to Basics: A Beginners guide to starting a CSS Document

Here’s a tip for you. Never let the browser to decide what your site will look like. What we’ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your website. As you all know some of our more popular browsers **cough** IE **cough** tend not to display things as well as we want on their own.

Read the rest of this entry »

Framing your images using CSS

So you have this awesome autographed picture of Carrot Top that you got after months of waiting from his fan website, and you’d like to put it up on your website to prove your fanhood. The problem is you don’t have Photoshop or Fireworks handy to put a nice frame around it, and you’d like to have something to do the job. Well don’t sweat it my friends, I’ll show you a simple yet effective CSS trick that you can use to mimic a frame on a picture and all you’ll need is Notepad to do it.
Read the rest of this entry »

How to make Buttons with Hover Load Faster

With CSS we can target the ‘:hover’ child class for links and update their background properties.

Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

Read the rest of this entry »