Home | Join! | Help | Browse | Forums | NuWorld | NWF | PoPo   
dave's ultimate blog!
Recently Added
dave's Reading Room


NuTANG Style Sheets Tutorial
by: dave (4/26/03)

After reading this tutorial, you should be approximately 1e-14% closer to controlling the universe.

The flexibility in NuTANG member page customization lies in cascading style sheets (CSS). With them, you can modify font faces, colors, sizes; widths, heights; borders, paddings, margins; and the list continues.

The brief rundown. Style sheets go in < style > tags, and are given names, called classes, preceded by a period (.). For example:

<style> .className1 {parameters} .className2 {parameters} .daveR0X0R {parameters} </style>

As you can see, each class has parameters, which go inside curly braces ({...}). Each parameter has a name, followed by a colon (:), then the parameter's specification. And here, my friends, are some of the magical parameters:

font-family: verdana, arial;
font-size: 12px;
color: red; (aside: color denotes font color)
background-color: white;
width: 600px;
height: 120px;
text-decoration: none; (other options: underline, overline, line-through)
line-height: 20px; (aka: line spacing)
margin: 4px;
padding: 3px;
border: 1px #00ff66 solid; (instead of solid, you can also use dotted, dashed, double, groove, ridge)
position: absolute; (or relative)
left: 20px; top:-23px; (these parameters go with position; note that negative values for the number of pixels is allowed)

Ok, so now what? You can attribute these classes to different parts of your page by adding a class=className in a tag. Wtf? Ok, I'm kinda sleepy; here's an example:

<style> .messed_up_look {border: 2px #006699 ridge; font-family: trebuchet ms; font-size:18px; color:white; background-color: #dddddd; padding:8px} </style> <p class=messed_up_look> Yea, so the other my face exploded off of my head. So damn painful. The output:

Yea, so the other day my face exploded off of my head. So damn painful.

Captivated? Check out these links for more depth:
http://builder.cnet.com/webbuilding/pages/Authoring/CSS/table.html
http://www.htmlgoodies.com/beyond/css.html
http://www.uoguelph.ca/~stuartr/

So, the extremely exciting part: NuTANG has most of its components defined by style sheets. So, all you need to do is define the parameters, and your page will look exactly—and I mean exactly—like how you dreamt them to be in your wildest fantasies. And here are the class names we use:

<style> .module_heading { } .module_content { } .nublog_title { } .nublog_date { } .nublog_entry { } .reading { } .profile { } .profile_topic { } .profile_answer { } </style>

Yea, I know what I said might be confusing. I shall revise this over and over again until my head spins with the ferocity of a nine-banded armadillo. But meanwhile, play around. Have fun.

dave's Weblog Site • NuTang.com

NuTang is the first web site to implement PPGY Technology. This page was generated in 0.111seconds.

  Send to a friend on AIM | Set as Homepage | Bookmark Home | NuTang Collage | Terms of Service & Privacy Policy | Link to Us | Monthly Top 10s
All content Copyright 2003-2047 NuTang.com and respective members. Contact us at NuTang[AT]gmail.com.