Hazen Consulting - CSS Part2

Navigation

An examination of the Windows Media Center package as it comes with the Windows 7 operating system

An examination of the popular Media Browser package that ads features and styling to Windows Media Center

Adding a TV Tuner card to your PC provides both Media Center and Media Browser with a whole new set of tools to work with

04 Recorded Tv

Setting the TV Tuner Card software to automatically record your favorite programs provides you with a library shows whether or not you were watching TV when they aired

05 Tv Series

The TV Card in combination with program data provided by your TV Station allows you to program a whole series with a single command - imagine an entire season of "The Simpsons" right there on your hard disk

06 Raid5

And speaking of hard disks - putting 3 or more together in an array attached to a RAID card can provide protection, performanace -- and maybe even both

07 Remote

Media Center component providers seemed to have come to a basic agreement on standards for their remote control - we look at a few of them

08 Extenders

Many of us gizmo guys have been forced to give up the dream of having a PC in the lounge. The spousal objections were just too strong. But help is at hand - using one of the many models of Media Center extenders we can enjoy many of the benefits of a media PC - now in the lounge as well

09 Filename Conversion

Although Media Center technology has expanded our entertainment horizons and at the same time made this diverse material easier to get, there still exist pockets of resistence where manual intervention is required. Re-naming files to confrom to the standard is one of those hold-out and we take a look at a techie way to automate the process

10 Ninite

And speaking of automating processes, here's a nifty little package to automate your next windows software installation

11 Last Filesystem

I've got quite a bit of disk space available on my home network, but I found out some time ago that it's no good having a bounty of space if you can't find what you've got. Tools like "Everything" are great (I use it at least once a day) but why not put it where you can find it as soon as you get it? In truth any filing system will do so long as you use it - and any system should be based on the way you use your computer, but I've offered up my own home-grown tried-and-true system for your consideration

12 Knowem

This is a fun little resource - type in your name and see how may social networks know who you are!

13 View Source

Here's one for the propeller-heads - it's a way to automate a download process using the raw text data from a web page. Pocket Protectors at the ready!

140Colors.Htm

As a web designer you're required to use color on your site (I don't believe I've ever seen a black and white site - something to think about) but if you're a guy you are more than likely to have some degree of color-blindless. Even if you don't you probably don't want to use words like "chartreuse" or "beige" or "passion pink". On top of that who can remember those stupid codes? (#00FFFF). Fortunately, the HTML people have provided us with "word equivalents" for 140 colors out of their 16 million possibles. This means that when we want red we can specify "red"

14 Css1

CSS is growing on me. I took a stab at understanding it several times before making this small initial step and I've made additional strides since that I hope to write about soon

15 Css2

One nice thing about using CSS over using tables in your HTML layout is that it's more flexible and (in my view) more attractive. Here's a little starter kit to get you going

16 Tv Setup

Returning to our roots, this piece is about fitting a TV card into your Windows Media Center setup. Even if you don't watch much TV, the technology is interesting in and of itself. If you do watch a bit of TV merging your PC technology with Broadcast functionality adds a new dimension to the mix and turns your PC into an intelligent DVR

17 Epg Setup 1

Taking TV technology to the next level, it's now possible to extract the Electronic Program Guide (EPG) right out of the air. Previously this information had been horded by the provider as a source of revenue, today the information can be freely available with a bit of software and some time to set it up

18 Epg Setup 2

Part 2

19 Epg Setup 3

Part 3

20 Call 4 Help

Tips and tricks for getting more information and faster problem resolution from your help desk.

21 Quick Edits

(The sections that follow ("in progress") are placeholder titles to remind me about the topics I'd like to cover but just don't have time to work on just now. This is a very short item to show you how to use the TAB key in Windows 7 to move between file names in the windows explorer window in "edit" mode eliminating the need to hit "F2" or the "right click", "rename", edit the file name, "enter" sequence.

22 Basic Setup

(In Progress) This section aims to describe the basic set of software tools that pretty much any computer user should and use. Included will be links to download the free or "free versions" of each.

23 Unix Help

(In Progress) Unix was my first operating system and I always keep a set of Unix tools on my PC for those times when Unix beats Windows 7 hands down. This article describes a few of these tools and the situations when they would be most useful.

24 Cmd

(In Progress) This article is the Windows Command Line counterpart to the Unix article just above.

25 Geek Zone

(Stalled) Can't really remember what I was going to do with this one.

26 Database 101

(In Progress) The next three items have been planned as a series of basic database training to describe what databases are good for, what they are not good for, how to design your database to fit the purpose, what to include, what to exclude, and how to design for expandability.

27 Database 102

(ditto)

28 Database 103

(ditto)

29 Raid Again

Proof-almost-positive that RAID hardware is the bee's knees.

30 Hot Win

Keeping your Windows installation cooler and cleaner by hiding those unslightly wires.

31 Cool Win

(InProgress) Tips and tricks to keep your windows installation running cooler

32 All My Movies

A cool little program to sort out your movie collection

33 Tmdb Api

(In Progress) a tutorial on how to link into the TMDb Movie Database - I hope this is going to turn into a stand-alone application one day.

Why Bother with CSS?

A Cascading Style Sheet is a set of instructions that control the layout, the color, and the fonts to be used on your web page.

Good News First:

Once you get the hang of it (and we'll get you started in part 2) Cascading Style Sheets (CSS) are a great tool to help your website look more professional. This is mainly because using Style Sheets limits your ability to mess things up. It forces consistency on your work, and consistency of design is a beautiful thing. I'm not an expert by any means but a clean consistent site that looks as though it were 'writ by the same hand' appeals to me more than a site that looks like it was done by a committee.

CSS forces consistency by providing a framework within which all three (of the four) essential page elements are defined - the spaces, the colors, and the fonts. Every time you think "Oh! I'll make this header purple!" you'll then have to think about the work required to add a purple header into your style sheet and whether or not you might be able to use that purple header elsewhere or if its just going to be a single odd-ball header on your site, and that consideration might be enough to put you off doing it.

A secondary benefit is that if all your pages are consistent, the global "search and replace" operations get very easy. At one point in the development of this site I had some 40 pages and I decided to put in a google search box at the top of each page - placement was important and if I had 40 different page layouts I would have had to do 40 updates by hand, but because the design was consistent and I knew I could count on the "head" tag being on line 27 in every page, the update took less than a minute.

The Bad News:

CSS looks like a bugger to master because it appears so complex - there are "classes" and "inheritance" and "attributes" and "elements" and all manner of weird things.

There are very many ways to do the right thing is CSS - too many in fact - so when you try to learn even the basics, you get a dozen opinions on how things should be done.

So if you want to learn CSS and you come upon material that baffels you more than enlilghtens you - walk on by. Reading that stuff didn't help me and I doubt that it will help you.

And now the Good News:

Turns out CSS is EASY! Forget about all that fancy carry-on - for a clean simple web page all you need are four basic elements. When I found out how completely easy CSS is I wrote this guide as a little pay-back for all the time I wasted reading material that tried to convince me that CSS was hard and complex.

Here are the four basic elements:

The Page

You need a page structure and the most common kind would be a content page with a sidebar on the left or the right or both, a header section, and perhaps a footer section.

The design here showing a couple of "em" springs are meant to suggest that the page design is flexible and can shrink or stretch depending on the width of the browser window.

I used this feature for the "container" and the "mainContent" boxes for this site, but I may switch back to fixed widths if I get some feedback on it.

Some HTML Editors:

CoffeeCup free trial
DreamWeaver free trial
Gizmo's list of free editors mostly free

The Colours

You need some compatible colors -- a color "Pallett" -- fortunately these are as plentiful as trees in a forest.

Here are 3 examples of what a palette looks like - it's a collection of colors chosen either by a designer or a computer that are meant to work together.

Me? I'm just a guy - what do I know about colour? As far as I'm concerned there are only 6 colors - the primaries - Red, Blue, and Yellow, and the secondaries - Purple, Green, and Orange.

Everything else is just lighter or darker shades of these colours.

Some Color Pallet Pickers

colorcombos.com tools and samples
Color Scheme Designer excellent on-line pallet generator
ColourLovers needs a login but it's free - interesting tools

The Fonts

You need a few fonts, and you need to combine those fonts with the colors to come up with a set of headers, links, and titles that you can use over and over to give your site that consistent look.

There may be rules for mixing and matching fonts the way there are rules for colours, but I haven't found them yet.

For this site we've devised the following set page headers, section headers, and a couple of specality headers thrown in:

=======

Trebuchet xx-large -white

Trebuchet in orange, small caps and italic

Trebuchet orange and x-large

Trebuchet in Blue - Large

Palatipo medium oblique - indented

Company Name
palatipo dark blue medium oblique - (this style is used only in my CV page to highlight company names.)

TOC Head - Trebuchet medium bold with red dotted outline

TOC body - Trebuchet small in off white

======

That's it -- you don't need many more fonts or styles than that, and it's quite possible to go overboard with too many variations so keep it simple.

The ArtWork

And lastly, you need some artwork - preferably free or something you can use with the artists permission.

I've found a couple of excellent free "Wallpaper" collections and I use portions of the whole image as the "Header" portion of each page.

I've written the artist about using the material but haven't heard back yet.

That's pretty much it - honest. The site you are looking at now is made up of just these elements and in our next episode I'm going to show you how to do it.

Click Here to continue on with Part 2.