After I upgraded my dual-boot laptop’s Ubuntu from 7.04 to 7.10, I’ve noticed that the upgrade overwrote my GRUB settings, so when I boot my machine, I no longer have a choice for booting into WinXP. I know the partition is still there, because Ubuntu 7.10 comes with NTFS read/write capability, and automatically shows a ‘Windows XP’ drive in my devices.

So how do I restore my pretty GRUB menu, and give myself the option to boot into either WinXP or Ubuntu 7.10? Every once in a while, I have to write an install script for a Windows app, so I do need to set this up…

First of all, let’s have a look at the grub menu file. I click on ‘Places’ in my menu, and go to:

Filesystem/boot/grub/menu.lst

I see the file that gives me my menu when I boot! Now there are a lot of helpful comments here, but if I strip the comments out, I essentially see these basic options:

default 2
timeout 5
color cyan/blue white/blue
### BEGIN AUTOMAGIC KERNELS LIST
## lines between the AUTOMAGIC KERNELS LIST markers will be modified
## by the debian update-grub script except for the default options below

## DO NOT UNCOMMENT THEM, Just edit them to your needs

## ## Start Default Options ##
## default kernel options
## default kernel options for automagic boot options
## If you want special options for specific kernels use kopt_x_y_z
## where x.y.z is kernel version. Minor versions can be omitted.
## e.g. kopt=root=/dev/hda1 ro
## kopt_2_6_8=root=/dev/hdc1 ro
## kopt_2_6_8_2_686=root=/dev/hdc2 ro
# kopt=root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro

## Setup crashdump menu entries
## e.g. crashdump=1
# crashdump=0

## default grub root device
## e.g. groot=(hd0,0)
# groot=(hd0,2)

## should update-grub create alternative automagic boot options
## e.g. alternative=true
## alternative=false
# alternative=true

## should update-grub lock alternative automagic boot options
## e.g. lockalternative=true
## lockalternative=false
# lockalternative=false

## additional options to use with the default boot option, but not with the
## alternatives
## e.g. defoptions=vga=791 resume=/dev/hda5
# defoptions=quiet splash

## should update-grub lock old automagic boot options
## e.g. lockold=false
## lockold=true
# lockold=false

## Xen hypervisor options to use with the default Xen boot option
# xenhopt=

## Xen Linux kernel options to use with the default Xen boot option
# xenkopt=console=tty0

## altoption boot targets option
## multiple altoptions lines are allowed
## e.g. altoptions=(extra menu suffix) extra boot options
## altoptions=(recovery) single
# altoptions=(recovery mode) single

## controls how many kernels should be put into the menu.lst
## only counts the first occurence of a kernel, not the
## alternative kernel options
## e.g. howmany=all
## howmany=7
# howmany=all

## should update-grub create memtest86 boot option
## e.g. memtest86=true
## memtest86=false
# memtest86=true

## should update-grub adjust the value of the default booted system
## can be true or false
# updatedefaultentry=false

## should update-grub add savedefault to the default options
## can be true or false
# savedefault=false

## ## End Default Options ##

title Ubuntu 7.10, kernel 2.6.22-14-generic
root (hd0,2)
kernel /boot/vmlinuz-2.6.22-14-generic root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro quiet splash
initrd /boot/initrd.img-2.6.22-14-generic
quiet

title Ubuntu 7.10, kernel 2.6.22-14-generic (recovery mode)
root (hd0,2)
kernel /boot/vmlinuz-2.6.22-14-generic root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro single
initrd /boot/initrd.img-2.6.22-14-generic

title Ubuntu 7.10, kernel 2.6.20-15-generic
root (hd0,2)
kernel /boot/vmlinuz-2.6.20-15-generic root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro quiet splash
initrd /boot/initrd.img-2.6.20-15-generic
quiet

title Ubuntu 7.10, kernel 2.6.20-15-generic (recovery mode)
root (hd0,2)
kernel /boot/vmlinuz-2.6.20-15-generic root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro single
initrd /boot/initrd.img-2.6.20-15-generic

title Ubuntu 7.10, memtest86+
root (hd0,2)
kernel /boot/memtest86+.bin
quiet

### END DEBIAN AUTOMAGIC KERNELS LIST

Now that your eyes are glazed over, the important parts are at the top and the bottom. On the bottom of this list, we see the 5 entries that I’m seeing now when my machine boots.

On the top of the list, ‘Default’ says which of the 5 entries will be selected automatically. The entries are always numbered 0, 1, 2, 3, 4… etc. It starts with zero. So the defualt of 2 means that the third choice will be my default. I know, confusing, but that’s how it is.

So no entry here for Windows XP! You can see that the entries have a fairly standard layout though, so let’s put it back in. the grub file already has a helpful guide listed:

# examples
#
# title Windows 95/98/NT/2000
# root (hd0,0)
# makeactive
# chainloader +1
#
# title Linux
# root (hd0,1)
# kernel /vmlinuz root=/dev/hda2 ro

You can look up more info on GRUB works here, but what I’m most interested in is the ‘root (hd0,0)’ line. What this line says is that the root of whatever entry I’m doing is located on (drivenumber/partition). Since I only have one hard drive, I know my entry has to be something like this:

title Windows XP Professional SP2

root (myharddrive,somenumber)

makeactive

chainloader +1

(That last entry lets GRUB pass off the boot process to Windows’ native booter.)

So if I want to list all the partitions on my hard drive, I can give the console a: sudo fdisk -l

And I get this:

Device Boot Start End Blocks Id System
/dev/sda1 * 1 3823 30708216 7 HPFS/NTFS
/dev/sda2 3824 4119 2377620 f W95 Ext’d (LBA)
/dev/sda3 4120 4864 5984212+ 83 Linux
/dev/sda5 3824 4078 2048256 b W95 FAT32
/dev/sda6 4079 4119 329301 82 Linux swap / Solaris

Well this makes sense… I have my first partition as NTFS, that’s Windows XP. I can see I have a few other partitions, mainly a 2GB FAT32 partition that I use as a play area, and my Linux partitions. I only have one hard drive, so my ‘root’ listing has to be (hd0,xxx). Since I want the first partition, I’ll make it root (hd0,0)

So my entry will be:

title Windows XP Professional SP2

root (hd0,0)

makeactive

chainloader +1

I’ll add that entry in, as well as partition out some of the other entries I don’t use. I’ll also name the Ubuntu menu choice something nicer than ‘Ubuntu 7.10, kernel 2.6.22-14-generic’. Now my choices read:

title        Please choose an Operating System
makeactive

title        ———————————
makeactive

title        Windows XP Professional SP2
root        (hd0,0)
makeactive
chainloader     +1

title        Ubuntu 7.10 Gutsy Gibbon
root        (hd0,2)
kernel        /boot/vmlinuz-2.6.22-14-generic root=UUID=d403f712-7e72-4bc4-af12-0549fbc1624f ro quiet splash
initrd        /boot/initrd.img-2.6.22-14-generic
quiet

Now one very important thing: my default is still set to ‘2′, which means the title = 0, dotted line = 1, WinXP = 2, and Ubuntu = 3.  I changed my default to 3, so Ubuntu automatically boots up.  You might want to have WinXP boot, it’s your choice, just get the number right.
Also, if you want a shorter boot time, you can change ‘timeout’ to 5 like me, or leave it on 15 seconds or whatever grub’s default time is.

…and that’s it!  When I boot my machine, I get a nice, clean menu that looks like this (except the dotted line is exactly the same width as the ‘Please choose…’ line:

Please choose an Operating System
———————————
Windows XP Professional SP2
Ubuntu 7.10 Gutsy Gibbon

Ubuntu is selected by default, and if I don’t do anything for five seconds, Ubuntu boots.

So one of my New Years resolutions was to learn Ruby, and make a website in Rails. Actually, I’ve challenged myself to make a new site every 2 months in 2007. I’m not doing too well for Jan-Feb, but I’ve made my first website project my class final for the Database Design grad class I’m taking. The class ends at the end of Feb, so I guess I’m going to have to be on time!

I’m using Ubuntu Edgy Eft (6.10) and have no prior knowledge of Ruby or Rails. I figured I’d post here and let all you other want-to-be-ruby/rails developers how to get started, based on my experience on what hasn’t worked in my last 2 weeks of learning Ruby and Rails.

There’s a lot of tutorials out there, and most of them are difficult to understand. Unfortunately, genius programmers sometimes have a difficult time explaining complex subjects in human-ese. So here’s my attempt to point you in the right direction:

1. Get Ruby installed. If you’re on Windows, go grab the installer. If you’re on Linux or OSX, you can throw a command or two at the terminal:

• Linux: sudo apt-get install ruby irb rdoc
• Mac (MacPorts): port install ruby

2. OK, so we have Ruby and we have Rails, time to jump in, right?  Not exactly.  Ruby takes Object Oriented Programming to the extreme, so you’d better be very, very familiar with the ideas of OOP, Classes, Objects, Inheritance, and so on.  If you’r not, keep reading Wikipedia until you are.  You might want to look into data types (string, integer) and other concepts like arrays.

Ruby isn’t hard, the concepts behond Ruby are hard.  If you’re a CS or IS major, you probably has a semester or two to figure this stuff out, but I found it a good reminder just to read through the Wikipedia article on OOP anyway, Ruby is severely into objectification.  (even an integer, like “1″ is considered an object - yeah, I know…like I said…crazy objectification)

3. OK, so now we’re ready to get started.  The best tutorial I found, and the only one that seemed to clearly describe Ruby from the ground up is Learn Ruby on Rails: the Ultimate Beginner’s Tutorial by Patrick Lenz.  It just came out about a week ago, and just in time.  Read through it.  Slowly.  Do the examples in your own Ruby shell.  (for me, I got in the Ruby shell by typing ‘irb’ on Ubuntu’s command line).  Do the examples along with the tutorial.  Did I mention the examples?

If you have previously programmed in C/C++, Java, Perl, PHP or Python, you might want to have a look at how Ruby compares to those languages to get a better understanding of why (or why not) you might want to switch over.

4. Alrighty, so now we’re all official Ruby Newbies.  Where to go from here?  I mean the examples in the tutorial were good, but the tutorial definitely didn’t tell us everything you can do to a text string, for example.  And what about all the weird stuff you can do to an array? Well, Ruby comes with a manual, and the download over at ruby-doc.org has a bunch of other great stuff too.  The manual is for version 1.4, but it still will serve you well.

Good luck!

Have fun getting started and playing with Ruby, I’ll be posting my experiences as I go along.

On July 20, 2006, I submitted the following idea to the Cambrian House community. I thought it was a good idea, but the community decided instead that there are more worthy projects. Now, the whole reason I signed up for Cambrian House is because I already know I have great ideas, but don’t have the time or money to act on them. CH suggests that they will take the ideas in as a community, and help you make a success out of them if you’re in a position like mine.
Here was my idea, submitted 7/20/06:

The Idea:
Implement an eBay-like feedback system for other drivers. The idea here is to make the person’s individual score an indicator of how considerate they’ve been, penalize those who aren’t, and publish their standings to the public.
Subject to abuse, so there would probably have to be some sort of normalizing mechanism where all your scores move one point towards zero every day or week. This would mean that you would have to be consistently good (or bad) to maintain any score.
You also would be able to look back and see historical monthly scores, to see if the person is consistantly bad or just had a bad month.
Also, the police would have the ability to see this ranking too, since it’s public knowledge. If someone was -50 in a week, they might take a closer look at addressing the issue.

I thought of this idea when I was…
While waiting in traffic, I watch people bypass the entire line of cars waiting to exit the highway and cut in front of everyone. Following closely behind are the people who just drive on the shoulder past everyone.
I’m looking for a way to promote driving courtesy. This is an embarrassment-based system, which usually works pretty well as a deterrent. Plus the fact that anyone (police, spouse, employer) can look up your plate #…that would be a fairly large deterrent as well…

…and what do you know, WIRED magazine posts this up in their RSS feed a few days ago:

Online service PlateWire lets motorists, pedestrians and cyclists keep tabs on the good, the bad and the ugly behind the wheel. In Autopia.

I went over to the platewire site, not believing my eyes. It’s a horrible implementation of my idea, but in surfing the founder’s blog, I found something more interesting: platewire.com launched on July 29, 2006… 9 days after I posted my idea. What’s worse is that the guy is on CNN and WIRED with this bag of crap.
Now, at first I was pissed, because I assumed some visionless hack stole my idea and implemented some junk site based loosely around it. I felt a little better when I noticed that the domain name had been registered in May.

Of the few ideas I’ve posted to Cambrian House, this is one of my favorites, and I hate to see it bastardized like this. I’ve got a whole lot of ideas about how to improve the service and make it workable and profitable… all I need is some help developing the site.

We’ve already seen the idea is good, I know how we can make it great. If you think you can handle making a clean, database-driven site (preferably with MySQL, CSS, PHP or Ruby), shoot me a message and let’s hop on this gravy train and blow platewire out of the water.

edit: I’ve had to close commenting, due to OT posting and spam.

I’m trying out the service from Snap. Hover over any links here and tell me what you think. Not bad functionality for a single line of script in the header…
Snap

EFF

via Natalia Menezes

Digg This 

This might be a viable alternative to my recent struggles with Ruby on Rails… (or I might just need to take it slower than a 4-hour marathon of tutorials). I’m looking forward to seeing the functionality added to this toolkit by the open-source community.

What functionality do you think might be added by the community that would make this the “next big thing” in framework-based development?

If you’re not familiar with GWT:

“Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don’t speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript’s lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.

GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.”

Here’s a sample widget written with the GWT, seems simple enough…

public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX");
}
});
RootPanel.get().add(b);
}
}

Looks like those of you who already use Java/Javascript might have a new option out there for rapid web development.

		

Here we are, my last XHTML/CSS tutorial. To recap, we’ve moved from cave-painting HTML to flying-car XHTML. Then we learned how to dynamically style our XHTML with CSS. Then we found out how to style any little element we wanted using div, span, id and class. Now we’re going to grab those elements by their div handles and throw them around like a whacked-out rock star in a four-star hotel.

When you’re done with this tutorial, you’ll be able to lay out and style any site your imagination can dream up. (a litle graphic design skill helps here)

Let’s look at a demo page. This one is going to be slightly different than the demo page we used in the previous tutorials, because I want to really show what CSS positioning can do. Here is the XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<HTML xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta HTTP-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>

<div id=”title”>
<h1>Hello World!</h1>
</div>

<div id=”logo”>
<img xsrc=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” mce_src=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” alt=”logo” />
</div>

<div id=”main”>
<h2>Welcome to my site!</h2>
<p>
This is my page. There are many like it, but this one is mine.
</p>
</div>

<div id=”sidebar”>
<h2 class=”sidebar_title”>About</h2>
<p>
This is the site I made to demo CSS positioning.
</p>
<h2 class=”sidebar_title”>Links</h2>
<p>
<a xhref=”http://www.geeklimit.com” mce_href=”http://www.geeklimit.com” class=”sidebar_links”>GeekLimit</a><br />
<a xhref=”http://www.wc3.org” mce_href=”http://www.wc3.org” class=”sidebar_links”>W3C</a>
</p>

</body>
</html>

…and here is the CSS, as it is now. Not that I have changed the backgrounds of my different div’s to gray so I can see how the XHTML’s box model is laid out. This will come in handy in a moment:

/* Text Styling */

body {
color: white;
background-color: black;
margin: 0px;
}

#title {
background-color: gray;
}

#logo {
background-color: gray;
}

#main {
background-color: gray;
}

#sidebar {
background-color: gray;
}

h1 {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 {
text-decoration: underline;
}

h2.sidebar_title {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thin;
}

a.sidebar_links {
color: yellow;
text-decoration: none;
}

This makes a page that looks like:

Okay, not bad, but you can see that we need some help with the alignment. (also not that I took the screenshot before I made the title background gray. Just imagine it looks like the others.)

CSS Spacing

First of all, before we start resizing things, we need to decide what we want. I’ll hop into photoshop and make a crappy box diagram of what I want my text/images to do:

A few things to note:

• all boxes have 6px between them
• all boxes have 6 px on the inside, to keep text off of the borders
• the header and main boxes will expand to fit the screen
• the header is 100px tall
• the sidebar is on the right, and is 200px wide
• the logo is covering the intersection of all 3 boxes

OK, now that I know what I want to do, I need to figure out all of the coordinates I need to draw the boxes.

Margins and Padding

If you’ve ever made an HTML table, you know about margins and padding. Think of them this way: you’ve got your kitchen table. That’s the web page. You’ve got a few boxes. Those are your XHTML elements. And you’ve got a few items. This is your text, images, etc.

Think of margins as the distance between the boxes. Think of padding as the distance between an item and the inside wall of its box. Simple, right?

OK, so back to our page, I’ve decided that I’m going to use the top-right corner of the page as my reference point. All of the elements on the page (the boxes) will be defined as starting xx pixels to the left of that point, and yy pixels down from that point. It’s important to note that we are defining the top-left corner position of the boxes.

Let’s define the title box first, and you’ll see what I mean:

The title box

I don’t need to specify much here. The title box is touching the top, left and right of the browser window, so I can fix that by changing #title to:

#title {
background-color: gray;
margin: 6px;
padding: 6px;
height: 100px;
}

There. The title box has the appropriate space between it and the browser window, and the text in the title box has the appropriate space between it and the walls of the title box. Such is margins and padding. (Also, the title box is now the correct height.)

The main text box

For my main text box, I know I’m going to have a problem. I need to to be expandable so that my page stretches across the whole screen, just like my title bar. But I also need to make sure that the right side of the box has enough room for the sidebar. How much room? Well, the sidebar is 6px from the right side, is 200px wide, and has 6px of space between it and the ‘main’ box. So that’s 212px of padding I need open to the right of the main text at all times. Easy enough, I’ll just tell the main text to have 6px padding like everyone else, and then tell it to have a 212px right padding:

#main {
margin: 6px;
padding: 6px 212px 6px 6px;
}

note: this is called shorthand. Basically, you specify ‘padding: 6px 212px 6px 6px’ instead of multiple lines saying ‘left-padding, etc.’. Just make sure you go to the W3C site and double-check that your numbers are in the correct order! (clockwise, starting at the top)

The logo

Here is where positioning gets really cool. Not only can you move elements around, you can place them on top of each other. My logo is 100px by 100px, so I’m going to make the box it’s in the same size. While I’m at it, I’m going to get rid of this box’s background color. And here is the setting that will knock your socks off: absolute positioning!

Sounds boring, I know, but it’s not! This setting allows me to grab any box and throw it anywhere on the page, as if it were on a transparency sheet. With this, we can put the box wherever we want, and not disturb the rest of the page.

The exact middle of the intersection is 109px down, and 209px from the right of the screen. To finish the CSS for the logo, we need to center the image on it. The top of the image needs to be 59px down (109px down to the intersection - (100px image height / 2). The right of the image needs to be 159px in (209px to the right - (100px image width / 2).

The image is now centered on the intersection. I’ll add a property called a ‘z-index’ to make sure that the logo never gets a box on top of it. (The ‘z-index’ specifies which box gets to go on top of each other when you have multiple boxes by using a score up to 99, with 99 being the highest)

#logo {
width: 100px;
height: 100px;
position: absolute;
top: 59px;
right: 159px;
z-index: 99;
}

The sidebar

Since we’ve already resized boxes and have done absolute positioning, the sidebar is a snap. Just combine the properties of the main and logo boxes, and change accordingly.

#sidebar {
background-color: green;
padding: 6px;
width: 200px;
text-align: right;
position: absolute;
top: 124px;
right: 6px;
z-index: 98;
}

note that i turned the sidebar green to see what i was doing. Let’s have a look at the final product (click to enlarge):

…and what happens when we resize the browser?

…and the final product, when we take away the background coloring?

The final code:

XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<HTML xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta HTTP-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>

<div id=”title”>
<h1>Hello World!</h1>
</div>

<div id=”logo”>
<img xsrc=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” mce_src=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” alt=”logo” />
</div>

<div id=”main”>
<h2>Welcome to my site!</h2>
<p>
This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.
</p>
</div>

<div id=”sidebar”>
<h2 class=”sidebar_title”>About</h2>
<p>
This is the site I made to demo CSS positioning.
</p>
<h2 class=”sidebar_title”>Links</h2>
<p>
<a xhref=”http://www.geeklimit.com” mce_href=”http://www.geeklimit.com” class=”sidebar_links”>GeekLimit</a><br />
<a xhref=”http://www.wc3.org” mce_href=”http://www.wc3.org” class=”sidebar_links”>W3C</a>
</p>
</div>

</body>
</html>

CSS: (note that I’ve made corrections where the spacing wasn’t quite right)
body {
color: white;
background-color: black;
margin: 0px;
}

#title {
margin: 6px;
padding: 6px;
height: 100px;
}

#logo {
width: 100px;
height: 100px;
position: absolute;
top: 59px;
right: 159px;
z-index: 99;
}

#main {
margin: 6px;
padding: 0px 224px 6px 6px;
}

#sidebar {
padding: 0px 6px 6px 6px;
width: 200px;
text-align: right;
position: absolute;
top: 124px;
right: 6px;
z-index: 98;
}

h1 {
color: yellow;
border-bottom-color: ;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 {
text-decoration: underline;
}

h2.sidebar_title {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thin;
}

a.sidebar_links {
color: yellow;
text-decoration: none;
}

OK, so last time we got into basic use of CSS. However, at the end of the last CSS tutorial, we were only able to change blocks of text that existed inside of tags like ‘h1′, ‘h2′ and ‘p’. But let’s say that I want to have, for example, a paragraphs inside of my ‘p’ tags styled by CSS, but then have certain text styled differently with CSS?

This sounds like something you’d never run into, but it comes in handy later. Let’s take a look at my old example of how to use CSS to style XHTML 1.0, and we’ll see if we can use CSS to change only one sentance of a paragraph yellow. Here is our XHTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” />
This is my page. There are many like it, but this one is mine.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

OK, and here is our CSS:

body {
color: white; /* This will define the text color for all text on this page */
background-color: black;
}

h1 { /* Cool dotted-line effect */
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 { /* Underlining the h2’s… text color was inherited from the ‘body’ specification, since h2 is inside ‘body’ */
text-decoration: underline;
}

At this point, you might be asking yourself: “Boy, I sure wish there was some kind of AJAX-y tool out there so I can do some rapid prototyping with XHTML and CSS”. Rendur.com has done exactly that! Go ahead and replace his instructional text and CSS with the XHTML and CSS listed above. (Note that the image won’t render. We don’t have one. It will just display the alternative text. This is OK for our demo purposes, or you can put in the address of an image.)

You should now be looking at my road-styled page. Before, we said that we wanted to define a tag in CSS, that when wrapped around a single sentance, would turn the sentance yellow while leaving the rest of the ‘p’ text white. To do this, we have 2 options: ‘id’ and ‘class’. They sound complicated, but they really aren’t, they’re just two ways of making your own tags to format whatever you wish.

id

The ‘id’ tag is special, in that it can only be used once per page. ‘id’ will come in handy later, when we start moving text around using CSS. Because each element has its own unique name, it’s easy to direct a single element of code and do something with it. The limitation is, of course, that you can only use it once per page. Because of this, you usually see ‘id’ being used with names like ‘header’, ’sidebar’ and ‘footer’, because these items are used only once per page.

Defining an ‘id’ in our CSS is easy. Just put a pound sign (#) and the name if the id you are defining. in this case, I will make an id called ’special’ and define the id with the property of having red text:

#special {
color: red
}

class

OK, so id is good and all, but what if I want to use it over and over on several sentances on my page? I can’t, it’s an id, so I can’t use it on my example page. But classes can be used over and over.

Classes work exactly the same way as id’s, but can be used over and over. Just think of it like this: if you have a classroom of people, and they all have an ID tag, applying CSS to them by ID is a good way to narrowly style them, but by defining a class, the style can be applied to each individual person. Let’s make a ‘cool’ class that turns text yellow:

.cool {
color: yellow
}

But how do we apply it to the text?

Well, that’s where ‘div’ and ’span’ come in. Before we get to div and span, however, it is critical that you understand how XHTML, and therefore CSS, see themselves. XHTML sees every element as a box. This is called the box model.

It really is quite simple: XHTML sees every opening tag as the top-left corner of the box, with every closing tag being the lower-right corner. (Oh, that’s why it’s so important that all the tags are closed!) Everything between the tags is inside of that box. That’s it. It’s not any more complicated than that.

When CSS gets applied, it applies itself to everything in that box. Even other boxes! What this means is that (on our example page) I have a ‘body’ box, and inside of that box are five other boxes: ‘h1′, ‘p’, ‘img’, ‘h2′ and another ‘p’. Notice that the ‘img’ tag is inside of the first ‘p’. This means that anything we apply to the first ‘p’ will apply to ‘img’, and anything we apply to ‘body’ applies to both the first ‘p’ and ‘img’. We talked more about this in the last tutorial.

Here’s where ‘div and ’span’ come in. They are both ways to apply CSS format to something, an image, text, etc.

div

The ‘div’ tag is what we call a ‘block level’ tag. Basically, it makes a new box. (Remember the box model?) Anything between the ‘div’ tags gets put into the new box. This is something to consider, because it can either make or break you, depending on whether or not you want a new box. In the case of CSS positioning, you want to use ‘div’, because it makes a nice little box you put stuff in and move around.

Of course, if I just want to turn some text yellow, like in our example here, I don’t want to use ‘div’ because it will wreck my paragraphs with its box-making goodness.

span

here’s just the tool I’m looking for. Instead of making a new box, ’span’ is like taking a highlighter to my text. Basically, ’span’ works the same way as the ‘b’ or ‘em’ tags - it just applies itself to whatever is between the ’span’ tags, and leaves the layout alone. ’span’ is what you call an inline element: it doesn’t participate in the box model like ‘p’ or ‘div’, it just sits there, making its content available for styling.

Making the magic happen

OK, so I have a class called ‘cool’. I’ve thrown away the id called ’special’, because I can’t use an id here; I’m using it more than once per page. Now all I have to do is change my text from this:

This is my page. There are many like it, but this one is mine.

to this:

<span class=”cool”>This is my page.</span> There are many like it, but this one is mine.

Looking at our test page, we can see that the white text is still being inherited from the style of the tags above it, but our little sentance is being styled according to the class we made. Nice.

At this point, we can make fully functioning id, class, div and span declarations. Next time we’ll see how this newfound knowledge will let you position the elements on the screen, and open up a whole new world of design possibilities!

One quick note before you go

Have fun playing with these, but you should know that there are things such as ’sub-ids’ and ’sub-classes’ you can use. Basically, what this means is that I can go into the CSS sheet and say, ‘OK, XHTML. I want you to turn some text red, but only when the text is inside of some h1 tags AND is specified to be the ’special’ class. Otherwise leave it alone. I would specify this as follows:

h1.special {
color: red
}

Let’s see this in action. I’m going to add that to my CSS file, and change my h1 text from this:

<h1>Hello World!</h1>

to this:

<h1 class=”special”>Hello World!</h1>

ALSO - I will change my second ‘p’ from this:

<p>
Paragraph text
</p>

to this:

<p class=”special”>
Paragraph text
</p>

Now when I go back to my demo page, the h1 title has been turned red, while the second ‘p’ is still white. That is because the CSS I entered is called ’special’, but is a sub-class of ‘h1′, not ‘p’. Therefore, the h1.special class is not available to ‘p’, only to h1. If I wanted a class available to anyone, I would just leave off the front part and call it ‘.special’.

In my last article, I got a little into the basics of CSS, and how to link many web pages to a single CSS file. To recap, we added this to the XHTML web page, in the ‘head’ section:

<link rel=”stylesheet” type=”text/css” xhref=”style.css” mce_href=”style.css” />

and in the css file that is referenced, I was turning the text red whenever it was inside ‘p’ tags:

p {
color: red;
}

Pretty useless, but it demonstrates that by using CSS I was able to style several parts of the page with a single line in the CSS file. Let’s do something a little more useful with the CSS file, and find out what the ‘cascading’ in Cascading Style Sheets means.

So I’ve got my CSS file, and I’m just going to delete the contents. When I’ve got an empty CSS file, I need to decide how I’m going to want to style the different parts of my web site. Since I’m making a master CSS file for the entire site, I’ll want to make sure it looks pretty on the entire site, not just on the front page, order form, etc.

So let’s start out with a fake site that sells transportation items, and pseudo-code the layout:

• We Roll U Transportation Shop website
• Home page with company news
• Cycles
• Unicycles
• Bicycles
• Footwear
• Rollerblades
• Old-school roller skates
• Contact Us

OK, I’m going to stop there, becaue I don’t want to make this too complex.

Now I would recommend either bookmarking a site or buying a book that has an index of all the CSS commands available. There are a lot of them. I’ll just do a couple:

1. Make the background of the entire pages black
2. Make any ‘h1′ items yellow
3. Underline any ‘h1′ items with a yellow dotted-line (like a road stripe, get it?)
4. Make any other text white so I can read it.
5. Underline any ‘h2′ items with a solid white line

The first thing I need to do is make sure I know what components of the page I’m dealing with here. Items 2, 3 and 5 are pretty obvious. For 1 and 4, I’ll use the ‘body’ tag for my background assignment. That will set a default of black background and white text, unless specified otherwise like in my ‘h1′ tags.

This brings up an important point. My text is inside of the ‘p’ tags, not sitting inside of the ‘body’ tags, so how can the body tags format my text? Welcome to inheritance. Any CSS setting you make to any tag gets automatically filtered down to any other tags that are inside of that one. So for example, if I define a setting in my body tag in the following example, it gets applied to the h1 and p text:

Heading

text

This is how the browser sees the code, and when you look at it this way, you can see how a CSS setting for ‘body’ would also affect h1 and p. Let’s fire up the W3C CSS Spec and see what settings we need to turn the background black and the text white in ‘body’

By looking up the Background Properties specification, I can see that there are many options. The one I want is called ‘background-color’, so I’ll add that as the first entry in my CSS file:

body {
background-color: black;
}

Good. But I also want to specify a text color, so again I turn to the ‘colors and backgrounds’ section of the W3C spec and find the value. This one is fairly obvious, but note that I’ve already defined a ‘body’ section, so I can just add the new setting:

body {
background-color: black;
color: white;
}

Cool! OK, since all of the pages are linked to this style sheet, the entire site is now back with white text, just with those two settings. And because of inheritance, all of the text is white, h1’s, h2’s, text…everything. Now we have to go back in and make the yellow h1’s with the line, and over-ride the ‘body’ color setting. The color is easy, but the line underneath is a little more complex.

Something to understand about CSS is that it regards everything as having a box around it, just like an html table’s ‘td’ tag. Images, text blocks, h1’s, etc. Everything has a box tightly wrapped around it, with no padding on the inside of the box.

You’ve seen this before when a blue border gets put on a hyperlinked image. Except the borders around everything in XHTML/CSS are invisible. What I want to do is just show the bottom line of the box around all of the h1’s by turning it yellow, make it a little thicker than the default, and add some padding so it’s not touching the text. Oh, and turn the text yellow too.

Note that I don’t need to specify the background color, it’s being inherited from the ‘body’ tag, because my h1 tags are inside my ‘body’ tags.
Sounds hard, but with the W3C’s reference guide, it’s not too bad, once you find all of the elements you need.:

body {
color: white; /* This will define the text color for all text on this page */
background-color: black;
}

h1 { /* Cool dotted-line effect */
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 { /* Underlining the h2’s… text color was inherited from the ‘body’ specification, since h2 is inside ‘body’ */
text-decoration: underline;
}

Sweet!

Looks like it’s all working like I planned. But what happens when I want to format, say, a single word inside of some ‘p’ tags? Welcome to ‘div’ and ’span’, and we’ll talk about them tomorrow.

Oh, and we’ll also make some more style sheets for the separate sections of the Trasportation site, and watch as they cascade through each other…!

Last time we got caught up on our XHTML, so now we’re ready to start playing with CSS. The easiest way I can explain CSS is this:

CSS is to web pages what tagging is to del.icio.us. What I mean by this is that I can have a generic web page, but instead of tagging the text as color=”red” by using the ‘font’ tag on every line of text, I leave the text unformatted, inside of its little XHTML ‘p’ tags, with no color specified.

Then I go up to the header of the page and tell the browser to “tag” everything in the ‘p’ tags to be the color red. Boom! With one line of code in the header, every bit of text that is in ‘p’ tags turns red, even on the longest pages.

Lets take a look of this in action. You remember our sample page from last time:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

Let’s say I want to make it so that any text in the ‘p’ tags turns red. With CSS, this is easy, and since we’re using XHTML properly, the CSS will be able to use our good code.

In the header of the page, we’ll tell the page that we’re giving it a CSS command and then put in our ‘p’ tag request:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
<style type=”text/css”>

p {
color: red;
}

</style>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

You’ll notice that the CSS stuff looks different. It is. It’s not HTML or XHTML, CSS has its own language. That’s right, to do this stuff you need to know 2 languages, XHTML and CSS. Since it’s nearly impossible to know all of the tags/specifications available in XHTML/CSS, I’d recommend bookmarking a few sites that have a directory of things you can do to text, images, etc with CSS, as well as all of the neat tags available to you in XHTML.

At this point, our page will automatically turn any text inside of the ‘p’ tags red. However, if we really want to use CSS efficiently, we can make a whole new file, maybe called ’style.css’, and put the ‘p’ specification in there instead. That way, no matter how many pages we have, even if we have 10,000, we can change the color (for example) of every single paragraph of text on the entire site, because all of the 10,000 pages reference our single style.css file to decide how to display ‘p’ text.

Let’s look at what we put in the ’style.css’ file:

p {
color: red;
}

simple enough…and back in our page, we’ll change the ’style section from this:

<style type=”text/css”>

p {
color: red;
}

</style>

to this:

<link rel=”stylesheet” type=”text/css” xhref=”style.css” mce_href=”style.css” />

Now our ‘Hello World’ page, and an unlimited number of other pages, are linked to a single stylesheet file. One change in the stylesheet file, and all pf the pages that link to it will automatically show the changes.

Cool!

Next time, I’ll get a little more into intermediate-level CSS. Until then, have fun, and get each like-designed group of your pages linking to a central CSS file! While you’re at it, you can have the W3C double-check your CSS code to make sure it’s compliant with the standard, too.

This weekend I’m brushing up on my web design skills, so I thought I’d share. This tutorial will help someone who knows HTML to start writing XHTML. More specifically, if you’re capable of writing HTML 4.01, it’s not a stretch to write XHTML 1.0. Writing standards-compliant code ensures that all browsers will display your page properly, assuming you’re using a standards-compliant browser.
If you don’t know HTML, but want to get in on all of this XHTML/CSS/Web 2.0-type styling goodness, there are some very good articles on how to write HTML available from W3C. They’ll have you making a basic circa-1999 web page in no time. Then come back here and we’ll get you caught up to 2006. (although technically, XHTML 1.0 was last edited in 2002)
Hello World: HTML 4.01

If you know HTML, you probably know how to make a simple page. If you write it correctly and declare it as HTML 4.01 compliant in your code, then most browsers will regard it as valid HTML 4.01 and display it consistantly.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image”></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

…and it’s just that easy. That’s a generic HTML 4.01 page, like you should know how to make. If you just came out of an HTML class or something, and don’t recognize some of the markup here, it’s because you learned a pre-1999 way of making web pages. Let’s see that same page I just laid out in XHTML 1.0:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

It’s basically the same. The only differences are that it declares itself to be a different standard, XHTML 1.0, and that this code handles non-paired tags differently. You’ll notice that on tags like the img tag, the last bracket looks strange. XHTML is picky about every element being closed, so for tags like the img tag that don’t normally have a closer tag, that is how XHTML closes the tag out.