Custom CSS Page Headers 

Ok, for this CSS tutorial I am going to descibe a way to liven up your header tags <h1>.

Left by itself the h1 is big ugly piece of text with a bunch of unnecessary white space pushing everything out of its way, like this:

You can use CSS to tame it down some and look like it fits in with the rest of your page style like this:

This is easily accomplished with a few simple CSS styles applied to the h1 in your style sheet. For example:

h1{
color: #006699;
text-height:16px;
}

But for a bit more finesse you can apply a background image to the header for custom looking headers.

Here is one example:

h1{
color:#ffffff;
font-size:16px;
margin:0px auto 0px auto;
background-image:url(images/myHeaderImage.jpg);
background-repeat:no-repeat;
height:28px;
padding:3px 0px 0px 18px;
}

You may have noticed that I added the padding to the left but still put in the short hand for the top, right and bottom. This is just out of habit for me. I used to put specific sides like padding-left or padding-right but found more often than not I had to add or change another property so I figure if I am going through the trouble of adding any margin or padding I put the short hand way of doing it so it will be easily maintainable/editable. Also, please take notice of the height property that you will probably have to change depending on the image you chooose to use in the background.

So there you go. A simple way to make your headers look better using CSS.

 —————————————————————————————–

Custom CSS Scroll Bars 

Ok, so I know CSS scroll bars aren’t the favorite for many experienced web designers but I am not here to judge. Sometimes there might be a time with a specific website that you want or need to change the look of the scrollbars (Maybe by a clients demand??).

Anyways, I’ll just say this, if you decide to customize your scroll bars then do it in a way the is complimentary to the site and not a distraction. Also remember that Internet Explorer is the only browser that will recognize the custom scroll bars.

The below CSS code will give you an orange scroll bar. Of course if you want to use it with your website you should change the hexadecimal colors to fit your design.

body, html {
scrollbar-face-color: #FF9900;
scrollbar-shadow-color: #975A00;
scrollbar-highlight-color: #FFDBA6;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #333333;
scrollbar-track-color: #FFD291;
scrollbar-arrow-color: #333333;
}

That’s it! Just add that to the head section between your <style> tags and you are all set.

If you are interested in having a web site designed
for your company please visit:
Aqueous Designs – Web Design

Aqueous Designs is located in the Atlanta, GA
area in Gwinnett County.