Now that we’ve learned a great deal about CSS let’s learn some tricks and short cuts to help us code better and faster with CSS. CSS is a vast programming language in and of it self, and can be used to do a great deal of things within a site.

Short Hand

When we learned CSS we learned the proper way of doing it and that’s just fine. Most people prefer to use the normal or “Proper” way of coding in CSS. But there is a shorter and faster way of doing it, called short hand.

Example – Normal “Proper” Coding

.content_text {
  FONT-STYLE: italic; 
  FONT-FAMILY: Verdana;
  FONT-WEIGHT: bold; 
  FONT-SIZE: 12px; 
  LINE-HEIGHT: 1px;
  COLOR: #FFFFFF;
  }

Example – Short Hand

.content_text { font: italic Veranda bold 12px 1px #FFFFFF }

As you can see this is much shorter in size and in the amount of time it would take to code. There are a few things to keep in mind, this will only work if a font family and font size or in this line of code. If they are not present it will not work. Also if you do not specify font weight, font style, or font variant then those values will automatically default to a value of normal.

Two Classes Together

Normally when we use a class within our HTML we only use one attribute or class to call from our CSS file. We can use multiple classes very easily.

Example

<font class=”content link”></font>

Note that these two classes are separated by a space and not a comma. Keep this in mind you do not separate them with anything other then a space. When using two classes in the same attribute, if the same values are setup in both classes the class lowest in the CSS document will be used.

Let’s say that the “link” class is the lowest coded class in the CSS document, and both use a “font-size” value but they are different values. The “link” class will be used as it’s the lowest coded class in the CSS document.

Default Border Value

Normally when coding a border we would do something like this.

Example – Normal “Proper” Style

H1 {
  BORDER-STYLE: solid;
  BORDER-WIDTH: 3px;
  BORDER-COLOR: #000000;
  }

Example – Short Hand

H1 { solid 3px #000 }

Either one of these will output a black border that’s solid and is 3 pixels in width. We can do the same thing, but with even less code. Knowing the default values of each command is very useful knowledge if a user prefers short hand over any other method.

The default of a border is around 3 pixels to 4 pixels in width and will use the color of the text it’s surrounding. So if the text is black, the border will be black and around 3 pixels wide. The only thing we’ll need to specify will be the border style.

Example – Normal – Default

H1 {
  BORDER-STYLE: solid;
  }

Example – Short Hand – Default

H1 { border: solid }

Very simple isn’t it?

!important

Normally any command in CSS that is last is the one used when it’s called. However if we use “!important” after a command it will be used over any other command that is called after it, it becomes the default.

Example – Normal

H1 {
  BORDER-STYLE: solid;
  BORDER-WIDTH: 3px !important;
  BORDER-COLOR: #000000;
  }

Example – Short Hand

H1 { solid 3px !important #000 }

Notice the !important in the two examples above. If we were to use two call two classes and we had another class within our CSS that came after the above code, but had the same border width command but a different function, it would use the one with “!important” after it instead of the lowest one in the CSS file.

Note: This will not work in IE. All other browsers will honor this command except IE.

Image Replacement

Now let’s say that we have a nice site and we’d like to use a font that most people probable will not have. But the font matches the site perfectly and we’ve just got to use this font because it makes our site look so good. So the only option we’d really have to make this happen, would either be; make each user download the font and install it (They may not know how to do that) or use an image instead.

Ok, so it’s obvious that we’d have to use an image for this to work correctly. One most users wont know how to install fonts correctly to make them work and two that would just be way to much hassle for every user to have to do just to view our site correctly. So let’s use an image.

But there is one major problem with using images and that’s SEO (Search Engine Optimization). We can’t rely on alt tags on our images to be picked up correctly by search engines to be relevant keywords. So how do we use our images and still get the option of using normal text for SEO purposes?

That’s simple, we use an image replaced technique in our CSS file. This will allow us to us an image and still have our text be displayed. But that wont look right, will it? Yes, the only thing that users will see will be the image, but the search engines will see the text and the image.

Ok, let’s say we want to use “<h1>Keyword Here</h1>” for our SEO text. This is just fine and will work, but our image isn’t being displayed for users to see. This can be setup in CSS to display the image for the user and the text for the search engines, but we’re probable going to want to use this more then once within our web page. So let’s figure out a better way to do this, we’ll use a simple id command and assign a class to this.

So we’ll do something like this instead “<H1 ID=”Keyword1”>Keyword Here</H1>”.

Now we’ll add this to our CSS file.

Example CSS

H1#Keyword1 SPAN { 
  DISPLAY: none; 
  }

H1#Keyword1 {
  HEIGHT: 35px;
  BACKGROUND-IMAGE: URL("Keyword1.gif");
  BACKGROUND-REPEAT: no-repeat;
  }

Now the above commands will display an image on top of our text. So if the text is going to be the same size as the image then there is no need to worry. But let’s just say that it will be and we’d like to not have the text displayed at all. For this we’ll need to position the text somewhere else and the best place to put it is way off the screen where no one will see it but a search engine.

All we’ll need to do is add another command to our text within our web page. So we’ll still use the same “H1” tags but this time we’re going to add another tag to our string.

<H1 ID=”Keyword1”><SPAN>Keyword Here</SPAN></H1>

Notice the “Span” tags we added?

Now we need to add some commands to our CSS file.

Example CSS – With Span Tag

H1#Keyword1 SPAN { 
  DISPLAY: none; 
  }

H1#Keyword1 {
  HEIGHT: 35px;
  BACKGROUND-IMAGE: URL("Keyword1.gif");
  BACKGROUND-REPEAT: no-repeat;
  }

  SPAN {
  POSITION: absolute;
  LEFT:-2000px;
  }

Notice the addition of the “SPAN” commands. This will position anything within the <span></span> tags off the screen to the left 2,000 pixels away from its original position. This means that the text can’t be seen from any user, only search engines.