Tutorial Dog

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.

This entry was posted on Wednesday, May 28th, 2008 at 12:00 pm and is filed under CSS Tutorial. You can follow any responses to this entry through the RSS 2.0 feed.