Great tool for extracting colors from CSS… http://www.thrivesmart.com/open_source/color-parser.html

http://www.13styles.com/

Here is the code for the button….

<input type=”button” onclick=”javascript:callpage(’advertising.aspx’);” name=”Submit” value=”Request Information” style=”width: 180px;”>

 Here is the javascript….

<script language=javascript >
function callpage(str)
{
var url = str;
//alert(url);
document.location.href = url;
}
</script>

Border style: ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, ‘border-left-style’, and ‘border-style’The border style properties specify the line style of a box’s border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:

none

No border; the computed border width is zero.

hidden

Same as ‘none’, except in terms of border conflict resolution for table elements.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of ‘border-width’.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of ‘groove’: the border looks as though it were coming out of the canvas.

inset

The border makes the box look as though it were embedded in the canvas.

outset

The opposite of ‘inset’: the border makes the box look as though it were coming out of the canvas.

This eliminates all differences in padding and margin across browsers so you are free to go about styling your page.

html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}

Sources and Related Posts

• CSS Tips and Tricks by Roger Johansson
• (The Only) Ten Things To Know About CSS by John Manoogian
• CSS Crib Sheet by Dave Shea
• My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
• CSS Tips by Philipp Lenssen
• Top CSS Tips by Jonathan Snook
• Ten CSS tricks — corrected and improved by Tantek Çelik
• Ten More CSS Trick you may now know by Trenton Moss
• CSS techniques I use all the time by Christian Montoya
• CSS Tip Flags by Douglas Bowman
• My 5 CSS Tips by Mike Rundle
• 5 Steps to CSS Heaven by Ping Mag
• Handy CSS by Lachlan Hunt
• Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
• 15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
• 10 CSS Tips You Might Not Have Known About by Christopher Scott
• A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
• Tips for a better design review process by D. Keith Robinson
• 20 pro tips - .net magazine by Jason Arber
• CSS Best Practices by Richard K Miller
• 10 Quick Tips for an Easier CSS Life by Paul Ob
• 10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
• Web Design References: Cascading Style Sheets by Laura Carlson
• Getting Into Good Coding Habits by Adrian Senior

Shorthand Examples:

Here are some of the common shorthand formats:

font:  [style] [variant] [weight] size/[line-height] family

The values in square brackets are optional. The first three values can be specified in any order.

Eg:

font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;font-family: Tahoma, Arial, Helvetica, sans-serif;

Becomes:

font: normal bold 12px/1.2em Tahoma, Arial, Helvetica, sans-serif;

Font shorthand W3C specifications

---

background: (Can specify any of the background elements in any order, separated by spaces)

Eg:

background-color: #333;
background-image: url(image.gif);
background-position: 0 15px;
background-repeat: no-repeat;

Becomes:

background: #333 url(image.gif) 0 15px no-repeat;

Background W3C specifications

---

margin:

(top, right, bottom, left) (See the clock tip below) or
(top and bottom, left and right) or
(top, left and right, bottom) or
(one value for all four sides)

Eg:

margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 5px;

Becomes:

margin: 2px 3px 4px 5px;

Eg:  

margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;

Becomes:

margin: 5px 10px;

Eg: 

margin-top: 5px;
margin-right: 7px;
margin-bottom: 10px;
margin-left: 7px;

Becomes:

margin: 5px 7px 10px;

Eg:   

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px

Becomes:

margin: 5px;

Margin W3C specifications

---

padding:

(top, right, bottom, left) (See the clock tip below) or
(top and bottom, left and right) or
(top, left and right, bottom) or
(one value for all four sides)

Padding works in the same way as the margin examples above.

Padding W3C specifications

---

border:

The three elements below work in exactly the same way as the padding and margin shorthand methods:

border-width W3C specifications
border-color W3C specifications
border-style W3C specifications

border: [style] [width] [color]

The values in square brackets are optional and can be specified in any order.

Eg:

border-top: solid black 2px;
border-right: solid black 2px;
border-bottom: solid black 2px;
border-left: solid black 2px;

Becomes:

border: solid black 2px;

If for instance you wish to use the same style and color but specify a different width for each side you can use:

border: solid black 2px;border-width: 5px 7px 3px 0;

Note: Within the CSS values, each value should be separated by a space and each value should have a unit of measurement assigned to it, eg: px, em, %, etc.

Notice that the value 0 does not have a unit of measurement. The reason for this is that no matter which type of measurement you use, eg: px, em, % etc. a zero unit is a zero amount in any unit.

Within the W3C specifications it is optional to include the measurement for a unit of zero, we have chosen to remove px from the zero.

Border W3C specifications

So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are.

Great. But now you need a cross-browser way to dynamically switch between the style sheets.

Styling your site

Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate.

Persistent

These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet paul.css persistent, the following link element would be included in the head:

<link rel="stylesheet"  type="text/css" href="paul.css" />

Preferred

These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

To make paul.css preferred, a title attribute is added, giving the default style a name.

<link rel="stylesheet"  type="text/css" href="paul.css"  title="bog standard" />

Alternate

These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet"  type="text/css" href="paul.css" title="wacky" />

Note that these relationships only apply to external style sheets which are included using the link element.

Swappin’ Styles

When a document is initially loaded, the persistent and preferred style sheets are applied to the document. The alternate style sheets can then be selected by the user. The W3C tells us that the browser should give us a choice of the style sheet we want to use, and suggests that perhaps a drop–down menu or tool bar will be provided.

So far, so good. We have several style sheets and the visitor can choose their favorite from a menu. But then we encounter a problem. A major one. Mozilla provides a menu to select the style sheet we want to use under the view menu item. But Microsoft Internet Explorer (MSIE) provides no such menu. So we have several style sheets, and no way to access them in MSIE.

Here’s where a little bit of JavaScript can be used along with the DOM to provide a way for MSIE and Mozilla users to select the style sheet they want to use. Their preference can also be stored in a cookie. And because we are using the link tags as the W3C tells us to, the JavaScript doesn’t interfere with the menu in Mozilla, and it degrades very gracefully.

The Script

First we need the script to be able to differentiate between the three different types of style sheet. This is relatively easy to do, as we only need to check two of the attributes of each link element.

Is it a link to a style sheet?

HTMLLinkElement.getAttribute("rel").indexOf("style") != -1

Is there a title attribute?

HTMLListElement.getAttribute("title")

Does the rel attribute contain the keyword “alternate”?

HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

Note that we check for the string “alt” because some browsers accept the keyword “alternative” in place of “alternate.”

Using these three checks we can write a function to switch style sheets. This involves looping through every link element in the document, disabling all preferred and alternate style sheets that we don’t want active, and enabling all preferred and alternate style sheets that we do want active.

Note that only preferred and alternate style sheet link elements will have a title attribute.

The change function looks like this:

  function setActiveStyleSheet(title) {    var i, a, main;    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {      if(a.getAttribute("rel").indexOf("style") != -1         && a.getAttribute("title")) {        a.disabled = true;        if(a.getAttribute("title") == title) a.disabled = false;      }    } }

Cookies

Now we can change the style sheet. Cool. We have a more personalized page. Excellent. But we don’t have a personalized site. The preference is only applied to the current page; when we leave the current page the preference leaves with us. This situation, however, can be rectified with a cookie.

To store a cookie we need another function to return the current style sheet. We also need two functions to store and read the cookie.

To return the current style sheet we look for an active preferred or alternate style sheet and check its title.

First we loop through all the link elements in the document again. We then check whether the link is a style sheet. If it is, we check whether the style sheet has a title. This tells us that the style sheet is either preferred or alternative.

The last check is to see whether or not the style sheet is active. If all three checks return true, we have the current style sheet and we can return the title.

The function ends up looking like this:

  function getActiveStyleSheet() { var i, a;  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {   if(a.getAttribute("rel").indexOf("style") != -1   && a.getAttribute("title")   && !a.disabled) return a.getAttribute("title");   }   return null; }

As this is an article on style, and cookies are a completely different topic, I won’t explain the cookie functions here, but I will include them for your convenience (these functions are written by ALA author Peter-Paul Koch).

    function createCookie(name,value,days) {   if (days) {     var date = new Date();     date.setTime(date.getTime()+(days*24*60*60*1000));     var expires = "; expires="+date.toGMTString();   }   else expires = "";   document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) {   var nameEQ = name + "=";   var ca = document.cookie.split(';');   for(var i=0;i < ca.length;i++) {     var c = ca[i];     while (c.charAt(0)==' ') c = c.substring(1,c.length);     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);   }   return null; }

To use these cookie functions, we need to add onload and onunload event listeners to the window.

onLoad

There is a w3c specified DOM Level 2 attribute, “disabled,” that is set to false when a style sheet is applied to the document. This attribute is correctly implemented in Mozilla, but unfortunately not in MSIE.

MSIE does have a proprietary HTML attribute, also called “disabled,” that applies to link elements. This attribute is initially set to false for all link elements.

To set the MSIE disabled attribute to match the DOM Level 2 disabled attribute, we can call the setActiveStyleSheet() function with the name of the preferred style sheet.

To find out which style sheet is the preferred style sheet, we need another function. Because this function is so similar to the getActiveStyleSheet() function I’m not going to explain how it works, but here is what it may look like:

    function getPreferredStyleSheet() {   var i, a;   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {     if(a.getAttribute("rel").indexOf("style") != -1        && a.getAttribute("rel").indexOf("alt") == -1        && a.getAttribute("title")        ) return a.getAttribute("title");   }   return null; }

In the onload function, we first set a title variable. This either holds the value of the previous style sheet that is stored in the cookie, or if there isn’t one, the title of our preferred style sheet. To keep things logical, let’s call the cookie “style.”

Next we call up the setActiveStyleSheet() function passing the title variable as the title. Our onload function looks something like this:

    window.onload = function(e) {   var cookie = readCookie("style");   var title = cookie ? cookie : getPreferredStyleSheet();   setActiveStyleSheet(title); }

Note that it may be desirable to call this function before the onload event as well, causing the document to “paint” with our style sheet preference.

If you choose to do this, make sure the function is called after the functions and the link elements have been defined.

onUnload

To save the cookie in the onunload event is simpler. All we have to do is use the getActiveStyleSheet() function to return the active style sheet, and save this in a cookie. Using the function to store a cookie we will end up with something like this:

    window.onunload = function(e) {   var title = getActiveStyleSheet();   createCookie("style", title, 365); }

Puttin’ it all together

To use these functions to make your website more sexy, you need to include them in your document. To make it easy, I have put them all together in a javascript file, ready for you to download and add to your site.

Download styleswitcher.js

To include the javascript file, you add a script element to the head of your document, making sure that it is put below all the style sheet link elements you have. The HTML would look like this:

<script type="text/javascript"  src="/scripts/styleswitcher.js"></script>

To allow the visitor to change the active style sheet, you could use javascript onClick events. For example, to have the option to switch between two themes with titles “default” and “paul,” you could use the following HTML:

<a href="#"  onclick="setActiveStyleSheet('default');  return false;">change style to default</a>  <a href="#"  onclick="setActiveStyleSheet('paul');  return false;">change style to paul</a>

Once the visitor has selected a theme, it will be stored in a cookie. To use the same theme throughout your website, the same style sheet and javascript link elements should be included in the head of every page of the site.

That’s all, folks!

There you have it, a customizable website that uses link elements to link to style sheets as the W3C has told us we should. Enjoy!

As simple as this sounds, sometimes you just need a reminder on setting the margins to auto…

.container{
 width: 785px;
 background:   url(../images/bkg2.gif);
    margin-left: auto;
    margin-right: auto;
 margin-top: 0px;
}

One interesting way to use the background property is to alter the appearance of traditional HTML. Tired of the black circles and squares that set off lists on your Web pages? Why not remove those boring bullets and provide your own graphics (see “A Bullet to Call Your Own”)?

Start by redefining the ul, or unordered list, tag, which controls lists. In your CSS document, type:

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

This gives you a clean slate and eliminates any indentations a browser might apply to the list.

Now you’re ready to add your bullets. (If you don’t have any handy, click here for free bullet images.) For this example, I’ll assume that I have an image called mybullet.gif in the same directory as the CSS file.

In HTML, each item in a list is represented by the li tag. To change its appearance, add this to the style sheet :

li { background: url(mybullet.gif) left center no-repeat }

Now, whenever an li tag pops up, the browser will place the image at the left edge of the list item. To more accurately position the bullet, you can replace left center with pixel values.

At this point, the text for each list item will appear directly over the bullet. To insert a little breathing room, simply add padding to the left side of the li item. For example, if the graphic is 10 pixels wide, 15 pixels of padding should suffice. If the list items are stacked too close together, increase the top or bottom margins. Your final rule would look like this:

li {
background: url(mybullet.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;