How is the best way to apply a single image as a background using CSS?
You can apply a single image background to any tag that is capable, such as divs, tables, etc using CSS. This example will show how to apply a single image background to the entire page. The best way apply the background is to use the body tag, making the body or background the first “layer” in your design.
(more…)
I’m sure you’ve all been there. You create a web page and it looks great in Firefox, then you preview it in Internet Explorer and…doh! You scratch your head and wonder, where did I go wrong?
Every browser has their set of built-in default styles for just about every tag. Most are the same but some aren’t, especially between the two main browsers (FF & IE).
Some of the most common differences are the margins and padding in the tags. Below is an example of the differences in spacing between Firefox 3 and Internet Explorer 7.
Example of Standard Spacing in Firefox
Example of Browser Spacing in Internet Explorer
As you can see above, there are differences in spacing in both browsers.
You can also view this example yourself, if you have multiple browsers installed, here: http://www.redicedesigns.com/blog/wp-content/links/reset_example.html
The way to make sure all your spacing’s are the same across all browsers is to reset all the tag properties. This will set all properties for all tags to minimum, or zero. From there you can style the page exactly how you intend to.
You can find the most commonly used reset CSS file from yahoo, here:
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css
There are a few keys things to remember when using a reset CSS file.
This tutorial will focus on creating custom link colors that can be applied to any web browser using CSS. Be default, the link color on most browsers is blue and the visited link color is violet.
Not only can you determine the unvisited link color and visited link colors but also the “hover” color and the “active” color (when you click on the link).
CSS will allow you to supersede the current browsers default link colors by using the “a” property and using the following attributes: link, visited, hover, and active.
Here is what the four declarations look like:
a:link {}
a:visited{}
a:hover{}
a:active{}
The four declarations can be applied to a page, tag, class or ID. You can even apply declarations to the entire site when using the same external style sheet on every page.
There are several ways to apply link properties to a specific page using CSS. The simplest form of applying the properties is to use the ‘body’ tag with the link declarations. Below is an example.
body a:link {color:green}
This will make all links in the page green. This would be applied using the “Embedded” and “External” type of CSS application.
To add all four of the link declarations using the body tag, it would look like the following:
body a:link {color:green}
body a:visited {color:black}
body a:hover {color:red}
body a:active {color:blue}
If you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
body a:link, body a:visited, body a:hover, body a:active {color:green}
To simply that even further, you can apply the following:
body a {color:green}
The body tag also allows you to also apply link properties using an inline style declaration. The body tag has three built in properties for links: link, vlink and alink. Below is an example of a link property applied to the body tag.
<body link=”green”>
The link properties can be applied to any tag, class or ID similarly like the body tag. Link properties can be applied using external or embedded styles only.
Below is how to apply link properties to various tags:
h1 a:link {color:green}
h1 a:hover {color:blue}
p a:hover {color:blue}
p a:link {color:green}
Like the body tag, if you wanted to apply the same property to all four declarations, the simplest way to apply them would be the following:
p a:link, p a:visited, p a:hover, p a:active {color:green)
To simply that even further, you can apply the following:
p a {color:green}
Below is how to apply link properties to a class called “menubar”:
.menubar a:link {color:green}
.menubar a:visited {color:blue}
.menubar a:hover {color:red}
.menubar a:active {color:black}
Like any other tag or ID, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
.menubar a:link,.menubar a:visited,.menubar a:hover,.menubar a:active {color:green}
To simply that even further, you can apply the following:
.menubar a {color:green}
Below is how to apply link properties to a class called “footer”:
#footer a:link {color:green}
#footer a:visited {color:blue}
#footer a:hover {color:red}
#footer a:active {color:black}
Like any other tag or class, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
#footer a:link,#footer a:visited,#footer a:hover,#footer a:active {color:green}
To simply that even further, you can apply the following:
#footer a {color:green}
Another default style that browsers apply is the “underline” property to any link. This is part of the “text-decoration” property. You can attach a “text-decoration” property to any “link” related property. To remove this underline property from a class for example, the following declaration would be used:
.class a:link {
color:blue;
text-decoration:none;
}
Red Ice Designs is a full service web design and development company, which also provides marketing for the web and print. We specialize in providing companies with a quality web presence, marketability, and maintenance needs. We take pride in being a local business that provides quality services to other local businesses in the Washington DC, Northern Virginia and Maryland Areas. More...
Alexandria, Virginia
703.647.6252
info@redicedesigns.com
