2005 August » TechBubble

CSS gives you the ability to control HTML presentation with a fair amount of granularity. However, if you take a peek at stylesheets from random websites, you will see that a vast majority of them define styles using Type, Class and ID selectors. This is fine, but only barely scratches the surface when exploring the capabilities of CSS. I’ll try and shed some light on the different CSS selectors and hope it will help you create cleaner, more-compliant HTML.

Let’s start with Type Selectors. These are the most basic of selectors as they require nothing more than an HTML element.

p { background-color: blue; } will change the background of all

elements on the page unless it’s overridden with a local style definition or a nested element’s style definition.

You can define the style attributes for multiple type selectors by separating them with commas, like this:

p, span, div { font-family: Verdana, Helvetica, Sans Serif; }

Take special note of the comma separator as it is often a hard to debug problem. In CSS, the comma is a separator for multiple selectors to which the style definition should apply, while the space character indicates a descendant selector which we’ll examine in a moment. So the following two are completely different:

p, span { font-size: 11pt; }

p span { font-size: 11pt; }

Class Selectors allow you to define style attributes based on the value of the “class” attribute. The most common use of the class selector is like this:

.BorderedBox { border: 1px solid black; }

This would make all elements with a class=”BorderedBox” attribute inherit this style. For example:

Some text

You can make this more interesting by keeping the class name the same, but varying the elements to which it applies. This gives you the ability to granularly define a style class based on the element to which it is being applied, like this:

p.Highlight { background-color: yellow; }
div.Highlight { background-color: yellow; border: 2px solid black; }

Some text

Although it is rarely used, CSS does have the capability to define hierarchical class selectors. I suspect it’s not used a whole lot because it is not very well-known. In the example below, although there is no style definition for the class “NewHighlight,” this class is used in a hierarchical class selector to define the appearance of a headline and body text.

.NewHighlight.Headline { background-color: yellow; font-size: 14pt; }
.NewHighlight.BodyText { background-color: http://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.net#efefef; font-size: 10pt; }

this is a kicker

This is the headline

This is the body text

This hierarchical class selector technique is very useful for defining zones within your page. You can have a series of standard class definitions used in your markup and completely change their appearance simply by changing the class label of the outermost wrapper element (“NewHighlight” in the example above).

While on the subject of hierarchical selectors, let’s tackle the three selectors reserved for applying styles based on an item’s position. The selectors are Descendant Selector, Child Selector and Adjacent Sibling Selector.

A descendant selector allows you to apply a style attributes to an item based on its order in a hierarchy. “Descendant” is often incorrectly interpreted to mean “direct descendant.” In CSS, this is not the case. An item is selected as long as it is a descendant of the item before it, regardless of whether the relationship is child, grandchild, great grandchild etc. But, I’m getting ahead of myself. Let’s first see an example of a descendant selector style definition:

.DescendantExample div a { background-color: red; }
.DescendantExample div span a { background-color: yellow; }

[Note: The DescendantExample class in the hierarchy exists merely to facilitate displaying examples in this blog. If I did not use it, all instances of the hierarchy on the page would be displayed in the style I have picked for the example. This would make the page look quite ugly.]

Recollect that earlier I cautioned against using a space where a comma was intended (i.e. for multiple items). As you can see from the above example, the space character is used for defining a hierarchical relationship. Using a comma would have completely changed the intended definition.

Here’s how the above appears in practice:

This is a link

This is another link

The overall definition is controlled by the wrapper

element with a class of “DescendantExample” which is the first in the hierarchy. Then a match is made based on the order of descendant element. For the first

, the match is

; for the second it’s

and it’s the same for the third. Alert readers might notice that the

hierarchy also applies for the second and third examples, however it is ignored in favor of the

hierarchy. This is because of how CSS computes specificity. The rules for this, although not very complex, are not simple to understand, so I’ll leave it as the topic of a future blog post.

Child selectors are a specialized form of descendant selector. While descendant selectors could care less about what a descendant items level is in the hierarchy and how many intermediate items appeared before the descendant item, child selectors are pickier. In order to match a child selector, the items in the hierarchy must have a direct parent-child relationship without any intervening elements. Child selector hierarchy items are separated by the > symbol.

div.ChildExample > a { background-color: red; }
div.ChildExample > div > span { background-color: yellow; }

Here’s how it appears:

This works

This does not work because is not a child of

This works, too

(Note: Your mileage with the above example will vary since not all browsers implement this correctly.)

That’s it for Part I. In Part II I will explore the remaining selectors: Adajcent Sibling Selector, Universal Selector, ID Selector, Simple Attribute Selector, Exact Attribute Selector, Partial Attribute Selector and Language Attribute Selector. In Part III I will explore pseudo-classes and pseudo-elements. Stay tuned.

Baby Edutainment System (continued)

Blog, Personal No Responses »

Aug 042005

I am pleased to report that the Baby Edutainment System is now operational and works as expected.

I went against my geek instincts and ended-up getting an eMachines computer. I always viewed eMachines as complete garbage, but it appears that since Gateway bought them, the quality has improved significantly. Here are the specifications of the machine I purchased…nothing phenomenal, but not a wimpy machine either.


CPU:	AMD Athlon™ 64 3200+ Processor (512KB L2 cache, 2.2GHz, 1600MHz FSB)
Operating System:	Microsoft^® Windows^® XP Home Edition SP2 ¹
Chipset:	ATI RS480
Memory:	512MB DDR (400MHz) Expandable to 2GB
Hard Drive:	160GB ²
Optical Drives:	16x DVD±RW multi-format double layer
Media Reader:	8-in-1 Digital Media Manager Secure Digital (SD), Smart Media, Compact Flash, Micro Drive, Memory Stick, Memory Stick PRO, Multimedia Card, USB 2.0
Video:	ATI Radeon^® Xpress 200 (PCI-Express^®) 128MB DDR shared video memory
Sound:	AC ’97 audio, Dolby 5.1 (6-channel)
Modem:	56K ITU V.92 ready Fax/Modem
Network:	10/100Mbps Integrated Ethernet LAN
Peripherals:	Standard multimedia keyboard, 2-Button wheel mouse, amplified stereo speakers
Dimensions:	14.125″H x 7.25″W x 16″D
Ports/Other:	7 USB 2.0 (2 in front; 4 in back; 1 in Media Reader), 1 IEEE 1394 port (in back), 1 VGA external connector, 1 Parallel, 2 PS/2 (keyboard and mouse)
Pre-Installed Software:	Microsoft^® Works 8.0 ¹, Microsoft^® Office 2003 Trial (60-day complimentary subscription), Microsoft^® Money 2005, Microsoft^® Encarta Online, Adobe^® Acrobat^® Reader™, Microsoft^® Windows Media Player 10, Microsoft^® Internet Explorer, RealNetworks RealPlayer^®, CyberLink^® PowerDVD, Nero 6 Suite, Napster 3.0, Quicktime, AOL 9.0 (w/3 months membership included), Google Toolbar, Norton Internet Security™ 2005 (90-day complimentary trial)³, McAfee Anti-Spyware 2005 (30-day complimentary trial), eMachines BigFix^®

I neglected to check the floor model of the machine thoroughly at the store and only after unpacking it as home did I realize that some bean counter at eMachines had decided to save a few pennies by not attaching the composite and S-video connectors on the video card. The card supports them…it just has empty spaces where the connectors should appear. Arrgh…why do companies do that…penny wise and pound foolish. Well, I pretty much could not have the BES without being able to output to the TV, so this was a problem. I saw this as an opportunity in disguise. I wasn’t too happy with the video performance of the ATI Xpress 200, so I ended up getting an ATI Radeon X700 Pro PCI-Express video card on eBay. I like its performance much better and it has every kind of output I would need, including DVI. Nice.

I have grown to really dislike new computers because I have to deal with uninstalling all the garbage software that comes pre-installed. Come on folks, seriously…enough of the free AOL hours and gazillion anti-spyware utilities and photo editors already. Just put a hardware switch on the box OK…two settings…(1) GEEK and (2) CLUELESS. Set the default to (2). If I choose (1), just put the barebones OS and then leave my computer alone. Anyway, where was I…so after messing with the hardware and seeing all the junk that came on the drive, I decided that there was only one way in which I could keep my sanity. Yes, I booted with the Windows XP Media Center Edition 2005 CD, blew away all the partitioned and installed the OS from scratch. Much better. BTW, if you are going to use Media Center Edition, use 2005…everything prior is crap.

After spending a few hours tweaking and tuning things, I finally had the system ready to go. So I ripped out all the electronic components from my entertainment center and dropped in the media PC. I hooked up my WinTV USB2 external TV tuner with DVR support (integrates seamlessly with Media Center Edition). I added the RF receiver for the SnapStream FireFly remote I purchased (Amazon…overnight). This is a sweet piece of hardware. Not only does it control all the MCE features without line of sight (thanks to RF), but it also has a cool mouse emulation mode. Not something I’ll use all the time, but nice for the occasional mouse click. What I really like about it is that all the button macros are configurable by editing an XML file. Very well-engineered hardware, intuitive software and extremely usable. Finally, I added two receivers for the Dynex Wireless Keyboard and Optical Mouse. Why two receivers you ask? Well, as I mentioned in my original BES post…the Berchet keyboard overlays a standard keyboard. It basically straps on with some velcro bands. Not the best situation and I hope to someday cleanly attach it to a keyboard, but for the moment, that’s what I have. Now, I figured it would be a big pain to attach/detach the overlay each time I wanted to use the regular keyboard, so I added a second keyboard and mouse (I don’t use the mouse with the receiver on which the Berchet keyboard runs). Now, I have the best of both worlds…keyboard for baby and keyboard for daddy. When the baby is using the keyboard and messes up, I can co-pilot and fix things on-the-fly.

So the BES is more or less operational with this hardware. Of course, I still have to deal with the display issue since I have this wonderful, hi-resolution output going to my crappy analog TV, but it’s OK for the moment. I am still having to fix the occassional glitch, so I’m not sure that the hardware is quite there yet, but I iam ready to tweak the software. In my next BES blog, I’ll tell you more about the software setup.

It’s all coming together quite nicely and baby is taking to the system quite well as you can see here (will work much better once I can get her to stop sucking on her fingers when using the system) —

Giaberchet