Now don’t get me wrong, this technique can be used for evil by hiding keywords to try to bolster search engine rankings on Google. I don’t know exactly how Google creates the ranking, but I do know that h1 headline serve as a key part in determining page rank for keywords. So who uses the negative text-indent trick? Google themselves use images for there main logo, but both Apple.com and Digg.com use negative text-indent to hide lot things. Apple hides their top navigation bar, and homepage featured items. Digg hides the h1 tag which states their name. (If you want to see for yourself, I’d recommend checking Apple homepage because you can see the relavent css directly in the source of the webpage. With Digg, you have to navigate your way through the file references.) Google doesn’t seem to penalize either of theses two sites. You might say that these guys are too big to be penalized, well in that case, this website, Tutorial Dog uses the negative text-indent and the site ranks on the first page for the keyword  “javascript image gallery”.

Inadvertent Discovery While checking out Digg.com to see if they use negative text-indent, I discovered that they combine all their images for the site into one large gif image. They then direct the CSS file to specific sections of the image to show different images using the ‘background-position’ attribute. Why would they imbed all images into one document? For a site like Digg, which recieves millions hits daily, by combining the images into one file, their servers receive less of a usage because many image files aren’t requested from the server. Once this large image file is requested and sent, the web browser can reference the file to generate the page. To further illustrate why this is better, think of moving a bunch of boxes. Digg likens the large image file to one large box. In this case, while this box may be bigger and weight more, you only have to move it once to get all of the required materials to the receiver. With a bunch of small images, you will have to move a bunch of boxes one at a time. This technique probably won’t be worth your while to implement for your web designs, because it will take more time for what its worth. Digg, because they deal with large traffic, finds that this technique optimizes their page serving ability.

Have you’ve been stuck on designing your site using Dreamweaver or some other WYSIWYG (What You See Is What You Get) web page maker? If you’re ready to step out of the shadows of table based layouts, and discover CSS design then this article is for you. This article doesn’t aim to give you CSS code that you can copy to put on your website, instead teach you about the nuances you wouldn’t find in a general CSS tutorial or code.

What exactly is CSS?

CSS stands for cascading style sheets. Ok, what does that mean? Look at it like this, XHTML contains the data/content to display, CSS decides how the content looks, and Javascript determines how the web page interacts. CSS provides not only structure to the web page like a table would but also stylization the content like background color and font size.
CSS goes hand in hand with HTML. If you’ve used Dreamweaver or a similar application, then just learning CSS won’t help you that much. While you might be able to fly by the seat of your pants, learning & knowing HTML will prove to be vital. Clean and valid HTML will not satisfy avid web designers, it will save you tons of time when your design breaks and doesn’t look right. This article won’t delve into each attribute, instead the best practices of implementing attributes to the elements of the web page.

How to apply attributes to different elements

Attributes are instructions of how elements in the HTML should look. Attributes can be anything from font-size to background-color, but this section describes how to effectively apply certain attributes to different elements.

• ID’s
  ID tags in HTML (<div id=”header”>) are tags which should only be used once per web page. Generally, you want to use an ID to denote the page structure, so you might have id’s for a web page of “header”, “content”, “sidebar” and “footer”, because you’re not going to have two headers or two footers for any one webpage. To assign a style to an ID tag in CSS, use:     

  #idtagname{
  /* assign attributes here */
  }

• Class
  Unlike ID tags, class tags can be used multiple times. This is great when you want different parts of the design to look the same.
  To assign a style to a class tag in CSS use:     

  .classname{
  /* assign attributes here */
  }

• HTML elements
  You can apply a style to a particular HTML tag with CSS without using an id or class. For example, if you wanted to change every list (ul) to change from a dot to a square, you could simply do:     

  li{
  list-style:square;
  }

  Generally you don’t want to apply a style to an element like this. One exception though would be the body tag because it only appears once. In the next paragraph though, you will see where using the general HTML element is appropriate.

• Combining All Three
  If you’ve played around with CSS before, you’ve probably created HTML like this:     

  <ul>
  <li class=”x”></li>
  <li class=”x”></li>
  <li class=”x”></li>
  <li class=”x”></li>
  </ul>

  If you have a lot of li elements, you’ll know it can get very annoying to type out class=”x” every time. But there is a way to simplify this. Instead use the following CSS,

  .y li{
  /* CSS attributes for class x here */
  }

  And your HTML can become this:

  <ul class=”y”>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>

  The CSS applies the attributes for define in “.y li” for the li elements embedded in class “y”. Thus you get a cascading effect where you can affect elements inside certain elements. You can use this cascading affect for any combination of ID’s, class and elements. For example, you might use:

  #content .post ul{ /* style attributes here */}

Print vs Screen

Believe it or not, you can create a CSS for when someone prints out a web page which is great for a visitor because usually if you print you just want the primary content. Generally, you want a very different style sheet as compared to the “screen” version. Using the attribute “display: none;” you can and should get ride of ads, a sidebar and any other information someone wouldn’t want to print out. You also want a black text on white background design, otherwise you’ll make people print too much ink.

You link to the print CSS file almost exactly the same except for the ‘ media=”print” ‘ part.

CSS Default

When you load your HTML file in any web browser whether it be Firefox, Internet Explorer or Safari, the browser will render the web page with certain style attributes already assigned. You can of course override these attributes with CSS, but if you don’t specify differently, the browser will render the page with certain attributes already applied. Each web browser has subtle difference in how they render a web page under defaults, but in general a web page will look the same.
For example, the dots for a list item or the font family is a default style of the browser. You have the power to make that dot into a square or that font from Times New Roman to Verdana. But if you don’t specify, the browser will assume it. Another default attribute that always fools a beginner is the body tag which has a margin.

Save lines of code, be efficient

From time to time, you’ll notice your coping and pasting attributes from one id or class to another. If you find yourself applying the same attributes to a few elements, then you can combine attribute assignments so that multiple classes, ids and elements share the attributes. Lets take the attributes for the left and right arrows on the javascript image gallery. I originally had this as the attributes:

#moveleft{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
	background: url('left.gif');
}

#moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
	background: url('right.gif');
}

This is silly though because the two are essentially duplicates of each other except for the background image. We can though apply one set of attributes to both ids (using a comma to include more elements) and set the background to their respective urls:

Conclusion

The mark of a good CSS designer is one that creates the CSS for the HTML. If you start designing your HTML around what you can do with the CSS, you still have more to learn. In the future, I’ll delve into the basics of taking a design in Photoshop into HTML web page. If you have any questions or sub-topics you would like me to discuss, please leave a comment below.

In this case, I want to create a header tag with a link that is an image.

The HTML :

<h1><a href=”/”>Your text here</a></h1>

This is how the HTML should look regardless of if there is a CSS or not.

The CSS:

h1 a{
display: block; /* Allows you to change the width and height of the image */
height: (Image height here);
width: (Image width here);
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
background: url(Your link here!) 0 0 no-repeat; /* The pathway to the image*/
}

You want to replace the height and width with the dimensions of the image. You can figure this out by getting info on the image you wish to place there. The background url links to the url of the image.
Reducing CSS Repeating
You can apply this trick to other parts of the website. For example, navigation is another good time to use this. This trick allows you to make the design better, while still conserving the search engine friendly html. So that you don’t have repetitive segments of the css, you can include multiple class and id styles in one block.

h1 a, #navigation li, #logo2{
display: block; /* Allows you to change the width and height of the image */
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
}

This segment of CSS applies these attributes to each class or id named. To simply name multiple elements, use a comma to separate each element. With each element, now you only need to add the background image, height and width attributes.