Here is an example of a hyper link going to my site using a class:

<a href=”http://www.elitewebstrateiges.com” title=” Home Page”> Elite Web Strategies< /a>

a:link {color: #000000; background-color: #ffffff}

a:visited {color: #0000ff; background-color: #ffffff}

a:hover {color: #0000ff; background-color: #ffffff}

a:active {color: #ff0000; background-color: #ffffff}

So what is each part used for?

• “a:link” will specify what the hyperlink looks like on the page.
• “a:visited” will specify what the hyperlink looks like once it has been
  visited (clicked on).
• “a:hover” shows what the hyperlink will look like
  when hovered over.
• “a:active” specifies what the active link will look like.

In the above example you’ll also notice both color and background colors are designated. Color indicates the actual color of the font, followed by the hex code for the color you want. The background color is the color behind the text itself, followed by the hex code for that color.

It’s important that these hyperlinks are written in the proper order which is why they are put in a class such as above.

CSS Link Specificity – How to Put Your Links in Order

There is an acronym to help you remember the proper order to place your links in. You might think of something to help you remember it easier but some people simply remember LVHA. This simple acronym, LVHA will help you get your hyperlinks in the right order every time.

LVHA stands for:

1. a:link

2. a:visited

3. a:hover

4. a:active

LVHA is the order you should designate your link rules in the CSS so they work together. The way that it is designed to work in CSS, each selector has specificity. So just like anything else in the cascade, if there are two selectors that are both applied to one element, the one with the higher specificity is applied. If you put them in the wrong order, you could end up with a page that isn’t showing your style rules as you intended them.

The only two that you can change the order on are the a:link and a:visited (primarily because a link is only either or, never both). You can change many things with links, but always keep in mind that specificity so that they show properly on your page.

Here is an example of a potential problem and how it is corrected.

Problem Order

a:link {color: #000000; background-color: #ffffff}

a:visited {color: #0000ff; background-color: #ffffff}

a:active {color: #ff0000; background-color: #ffffff}

a:hover {color: #0000ff; background-color: #ffffff}

If you use the above CSS, all of it will work except the active rules. Those will not show. This is because the active has to come after the hover to follow the LVHA format. If the active is placed before the hover, it breaks that part of the class.

Simply swapping the places of the active and hover will fix the order of the cascade and allow it to all work.

Correct Order

a:link {color: #000000; background-color: #ffffff}

a:visited {color: #0000ff; background-color: #ffffff}

a:hover {color: #0000ff; background-color: #ffffff}

a:active {color: #ff0000; background-color: #ffffff}

Following the LVHA rules will help you keep your CSS hyperlinks in the right order to comply with W3C.

– Resource Box –

This article may be distributed freely on your website, as long as this entire article, including working links and this resource box are unchanged. For more tools, tips, and tricks of the trade, go to: www.elitewebstrategies.com – Empowering You to Empower Your Business. Copyright 2007 Larry Lang All Rights Reserved. Lang Enterprises Inc.

There are only three parts to Cascade Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use. One of the best parts of CSS is that you can create an external Cascade Style Sheet which you can use for all web pages on your website. You can also have one CSS for all of your articles and a different one for all of your press releases. Making one change in your CSS, you are able to effect changes to a few web pages or to hundreds of web pages without ever touching any of the different web pages themselves.

Below I am going to break out each one of the parts of CSS and explain them in non-techie terms:

1. Selector
2. Property
3. Value

This is what these three parts will look like when they are all put to together:

selector { property: value }

The first part is the selector. In techie terms, a selector is the (x)HTML element that you want to style. Now what does this really mean to the person who doesn’t know about (x)html code and really doesn’t want to learn it, but does want to make changes to their own websites. Absolutely nothing, right? It just went over your head and now you are at a loss (oh how well I know that feeling!). Well, let me show you what some of the most common selectors are, and I know that you will begin to feel more comfortable with selectors.

The first selector that you come across in all web pages is the body, next
might be h1, or the p. In (x)html the code is going to look like this:

< body> your web page content goes here< /body>: or,

< h1> Your headline text goes here< /h1> ; or,

< p> your paragraph text goes here< /p> .

For the first example, let’s start with the body. Here is the main thing that you will likely do with this simple but important piece of code. Let’s say you want the main background color of your website to blue or #0000ff (which is the hex code for blue). It will look like this:

body {background-color: #0000ff}

OK, what does all that mean? It is saying that the “background-color”, which is the property, is going to be blue, which is the value of that property. In simple terms, it means the main background color of your website is going to blue. It is easy to change the background color of your website now just by changing the hex code (#0000ff) to a different color, say red, which would look like this: #ff0000.

Now let’s look at the selector h1:

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22pt;
font-weight: bold;
text-align: center;
color: #000000;
background-color: #ffffff;
}

Here we are defining what h1, or the text inside of our header 1 tags, is going to look like. The first line in the property is the font-family, and the value is Verdana, Arial, Helvetica, and sans-serif. So, in plain English, what we are saying is the font that we want to use for all of our h1 headers is going to be Verdana, Arial, Helvetica, or sans-serif.

You might be asking if we want the main font to be Verdana, why are we also using Arial, Helvetica, and sans-serif as fonts? The reason for this is not all computers are going to have Verdana font loaded on them. If they don’t, then the default font becomes Arial. The same thing holds true for the Arial font, which then defaults to Helvetica and, finally, to what is called a system font or screen font that all computers have on them, which is sans-serif.

Now for the next line, which is font-size: 22pt. The property is font-size and the value of that is 22pt. 22pt is the easiest to use because we all know about 10 pitch, 12 pitch, 14 pitch fonts when we are using our word processors. There are several other different ways to express the size of the font, one of which is small, medium, and large, and is much more complex than just entering the pitch size.

Next we come to the font-weight which is a real easy way to bold all of the text in your header without using any other code to do it. Following along with what we already know, font-weight is going to be the property and bold is going to be the value of the font weight. If you choose not to bold all the text, all you need to do is change the word “bold” to “normal” and you are all done.

The text-align is just that: by changing the word “center” to “left”, you can align your text to the left margin instead of centering it all. I am sure that you are beginning to get the hang of this by now, but just follow through, “text-align” is the property and “center” is the value.

The color of your font or text is going to be the hex code color #000000, or black. If you want to change the color of the font, find the hex code for the color that you want it to be and replace #000000 with it.

The last one here is the background color, which is behind the header text. This background color is different from the body background color in that this color is going to be directly related just to the text in between the header tags or the h1 tags. In our example, “background-color” is the property and “#ffffff” is the value. You can change the background color to any color you like just by replacing the hex code #ffffff, which is white, with the hex color code of your choosing.

In our next article we begin with the paragraph tags and show just how easy it is to get rid of a ton out dated code.

– Resource Box –

This article may be distributed freely on your website, as long as this entire article, including working links and this resource box are unchanged.

Copyright 2006 Larry Lang All Rights Reserved.
Lang Enterprises Inc.
www.elitewebstrategies.com

Meta tags are lines of code and are located in the “head” section of your web page. These lines of code, even though they are not displayed by your browser, are very useful when providing additional descriptive information about your web page. There are a number of different Meta tags used in your web pages, some more important than others.

Meta tags, or a < Meta> element (both are the same), must contain what is called an attribute, and have some kind of value following it. A required attribute is content, and it defines the Meta information that goes with the attributes, http-equiv and name.

The http-equiv attribute has values like “content-type, expires, refresh, and set-cookie.” One example of an http-equiv attribute is if you have moved your web page to a new URL. You want to let your customers know the page has moved and, after a predetermined time, they will be automatically redirected to the new URL.

Example:

< Meta http-equiv=”refresh” content”5;url=http://www.yournewpage.com” />

In the above example, your web page will refresh causing your user’s browser to refresh the current URL. Displayed is the short message you have placed on this page notifying your users the current page has moved and they will be redirected to the new page. In the above example, after 5 seconds the user will automatically be redirected to the new web page at http://www.yournewpage.com.

The name attribute has values such as, “author, description, keywords, generator, revised”, to name a few, and is the one most commonly used. For example, this attribute is the one you use when creating the description for your web page,

< Meta name=”description” content=”This is where you would put the short description about your web page” />

In the above example, we used the name attribute, and its value is description. We also used the required attribute, content. The content attribute defines what the Meta information is that goes with the value, description.

The description Meta tag, as it is more commonly referred to, is very important. This is what is displayed on the results page of search engines, and is located underneath your title tag. The title tag should contain as many of your keywords, or keyword phrases, as possible in a short, coherent sentence describing your web page.

The Meta tag that most people have heard of is keyword Meta tag. Although it is not as important as it once was, it is still a good idea to include it on your web pages. You should only put keywords in here that you are using on your web page, so they should be really focused. I suggest using between three to five keywords or keyword phrases, each being separated by a comma. Below is an example:

< Meta name=”keyword” content=” your first keyword phrase, followed by your next one, and the next, and so on” />

In all of the above examples, notice the Meta tag is, what they call, “properly closed”. It is considered “properly closed” when using a space after the last quote, followed by /> . By closing all of your Meta tags this way, they will be W3C compliant. Also, when you check your code, you will not show any errors.

Creating the code for Meta tags is easy when you use our Meta Tag Generator, found at Elite Web Coaching. All you need to do to create your Meta tag code is fill in the form, press the submit button, then copy and paste your new code into your website. It is as simple as that!

– Resource Box –

This article may be distributed freely on your website, as long as this entire article, including working links and this resource box are unchanged.

Copyright 2006 Larry Lang All Rights Reserved. Lang Enterprises Inc.
www.elitewebstrategies.com