Transforming My Site into a Blog

Over the last few days, I have transformed danielgreene.com into a blog. I resisted doing a blog for quite a while for several reasons. Blogs can take a lot of time to write and maintain— especially when there are a lot of comments to monitor. I didn’t know anything about the software I would need to create one. Most important, I was afraid that once I got started, there would be no stopping me from saying absolutely everything on my mind. I was afraid my candor might get me into trouble.

Then I had a talk with Will Pate, Community Ambassador for the Flock Browser, who said, “A professional blog is a great way to gain recognition in your profession.” It suddenly dawned on me— of course I don’t have to say everything on my mind! Of course it doesn’t have to be personal! A blog can be professional! Sure, why not? That one sentence from Will was all I needed to hear to open my mind. I had already been wanting a more interactive “Web 2.0” website. I wanted people to comment on my posts, comment on each other’s comments, blog about my blog, add me to their extended friends’ network, add “trackback” links to my blog, etc. Now the question was: what sort of blogging system will I use to “power” my blog?

Well, I noticed that Will had a web site with his name as the domain just as I do, and I noticed that his was “powered by WordPress.” I checked into it, and found out that my host, pair Networks, supports WordPress on its servers. Other than the few extra dollars I have to pay pair Networks per month to upgrade my account, WordPress is free. I also chose it because it allows me to have danielgreene.com host the blog natively, rather than having to host it somewhere else like BlogSpot or LiveJournal. I like the fact that it is customizable, and I don’t need to have any navigation bar at the top advertising the blogging system.

Now, when I go to YouTube or Flickr, I can actually click on those “Blog This” links and blog them. And I can right-click in Flock to “Blog This” anywhere on the Web!

CSS Font Properties Test

A Demonstration of CSS Font Properties

Property Value Display in Your Browser
Property Value Display in Your Browser
font-family serif The quick brown fox jumps over the lazy dog.
sans-serif The quick brown fox jumps over the lazy dog.
cursive The quick brown fox jumps over the lazy dog.
fantasy The quick brown fox jumps over the lazy dog.
monospace The quick brown fox jumps over the lazy dog.
font-style normal The quick brown fox jumps over the lazy dog.
italic The quick brown fox jumps over the lazy dog.
oblique The quick brown fox jumps over the lazy dog.
font-variant normal The quick brown fox jumps over the lazy dog.
small-caps The quick brown fox jumps over the lazy dog.
font-weight normal The quick brown fox jumps over the lazy dog.
bold The quick brown fox jumps over the lazy dog.
bolder The quick brown fox jumps over the lazy dog.
lighter The quick brown fox jumps over the lazy dog.
100 The quick brown fox jumps over the lazy dog.
200 The quick brown fox jumps over the lazy dog.
300 The quick brown fox jumps over the lazy dog.
400 The quick brown fox jumps over the lazy dog.
500 The quick brown fox jumps over the lazy dog.
600 The quick brown fox jumps over the lazy dog.
700 The quick brown fox jumps over the lazy dog.
800 The quick brown fox jumps over the lazy dog.
900 The quick brown fox jumps over the lazy dog.
font-size
<absolute-size>
xx-small The quick brown fox jumps over the lazy dog.
x-small The quick brown fox jumps over the lazy dog.
small The quick brown fox jumps over the lazy dog.
medium The quick brown fox jumps over the lazy dog.
large The quick brown fox jumps…
x-large The quick brown fox…
xx-large The quick brown…
font-size
<relative-size>
larger The quick brown fox jumps over the lazy dog.
smaller The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
non-scalable
values)
12pt The quick brown fox jumps over the lazy dog.
1pc The quick brown fox jumps over the lazy dog.
72pt The…
1in The…
10mm The quick…
1cm The quick…
12px The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
scalable
values)
1em The quick brown fox jumps over the lazy dog.
1.2em The quick brown fox jumps over the lazy dog.
1ex The quick brown fox jumps over the lazy dog.
1.2ex The quick brown fox jumps over the lazy dog.
font-size
<percentage>
(arbitrary
examples)
100% The quick brown fox jumps over the lazy dog.
120% The quick brown fox jumps over the lazy dog.
150% The quick brown fox jumps over the lazy dog.
225% The quick brown…
338% The quick…

Using the Shorthand font Property

{ font: 150% serif; }

The quick brown fox jumps over the lazy dog.


{ font: italic bold 100%/200% "Lucida Sans", Verdana, sans-serif; }

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. (Lines repeated to demonstrate the extra line-spacing, or “leading.”)


{ font: normal small-caps large Braggadocio, "Broadway BT", fantasy; }

The quick brown fox jumps over the lazy dog.


{ font: lighter x-large "Lucida Calligraphy", "Brush Script MT", "English 157 BT", cursive; }

The quick brown fox jumps over the lazy dog.

Daniel Greene originally published this page on danielgreene.com as fontprop.html in February 1998.

Bug in Backgrounds for DIV Elements

Results are shown when using the following embedded CSS declarations (now done with inline CSS because this blog doesn’t allow embedded CSS.):

code { font-family: Fixedsys, &amp;quot;Lucida Console&amp;quot;,
&amp;quot;Courier New&amp;quot;, monospace; }
.p { background: #CFC; /*lightest green*/
color: black; }
.v { background: #CFF; /*lightest blue*/
color: black; }
.d { background: #FCF; /*lightest purple*/
color: black; }
.samp { background: #FCF; /*lightest purple*/
color: black;
margin: 1em 3em;
border: thin solid black;
padding: 5mm; }
.test { background: #CCC; /*lightest gray*/
margin-bottom: 2em; padding: 1em; }

Here’s how it looks in your browser:

{ font: 150% serif; }

The quick brown fox jumped over the lazy dog.

This is what it looked like in my browser (MSIE 4.72.2106.8 for Win95): (more…)

Screenshot of style.html

Style Sheets Demo Page

Style Sheets

The Easy Way To Stylize Your Web Pages

“CSS is an easy way to effect sweeping stylistic changes in your web pages without much effort.”

Finally, style separated from structure!

Have you ever come across a web page that was “stylish” to the point of illegibility? Of course you have. As a web surfer, have you ever wished you could turn off web author’s “style” and view content the way you please? As a web author, have you ever wished there were a way to stylize your web pages without having to resort to using hundreds of extended tags like all over the place? Haven’t we all! Now there is an alternative to all this nonsense: Cascading Style Sheets (CSS). CSS is an easy-to-use document formatting language developed by the The World Wide Web Consortium (W3C). CSS uses common terminology known to anyone familiar with typography, and was designed to give web publishers nearly as much creative control in their web pages as in printed material. The beauty of CSS is that it works right along with proper, structural HTML (HyperText Markup Language, used in writing web pages). Web pages written in proper HTML reveal the logical structure and outline of your document, and are guaranteed to display properly in any browser, regardless of platform or system configuration. Documents written in proper HTML enhanced with style sheets give viewers freedom of choice. CSS support can be toggled on and off by the user, so that, if your readers don’t like your style, but still want to read your content, they can turn off your “kewl” blue on black color scheme, and read your offerings in a more palatable palette. 😉 With style sheets, both web developers and web surfers have more control than ever. Developers have even more control with CSS than they had with extended HTML markup, and viewers finally have the freedom to view web content as they please, without having illegible styles forced upon them. This divorcement of style from structure is also a very good thing for the visually disabled, (including the color-blind!) who rely on text-to-speech synthesizers, and/or special color schemes and enlarged text to make Web content accessible. CSS allows for this by keeping out of the way of HTML.

“CSS takes style specification much further than extended HTML, kludges, and hacks ever could.”

Much more powerful than extended markup!

CSS takes style specification much further than extended HTML, kludges, and hacks ever could. With CSS, you can control not only the font face, size, and color, but also the line height, line spacing, and even letter and word spacing! You can create fancy effects like overlapping text. You can specify text color, background color (or image), border style, border thickness, border color, margins, padding, etc. for every single element of the document, not just for the body! CSS is an easy way to effect sweeping stylistic control in your web pages without much effort. Rather than inserting extended markup tags everywhere you want to change font face, color, size, etc., you make one declaration that applies to every instance of an element. For example, to achieve the level-three header effect on this page, I simply made a single CSS declaration for the H3 element in my style sheet, and every level-three header is affected the same throughout the document! Any time I change my mind, and want to change the style of my document, all I have to change is a line or two in my style sheet; I don’t have to touch the actual page at all! In fact, you can even create one style sheet to use for all the pages in your web site, which saves a lot of formatting time, reduces document size and download time, and brings design unity to your pages.

Some peeks at CSS…

You may look at the style sheet that’s stylizing this page. You will see how relatively simple it is to create a style sheet that determines the style of a plain HTML document.

Screenshot of an early version of this page as rendered in Microsoft Internet Explorer 3
Screenshot of an early version of this page as rendered in Microsoft Internet Explorer 3
Screenshot of how this page looked in my "Pretty" stylesheet in Opera 3.6
Screenshot of how this page looked in my “Pretty” stylesheet in Opera 3.6

Want to view this page in different “themes”?

If your browser supports user selection of style sheets, you can select from a number of CSS style sheets I’ve written. See the magic of CSS as the page transforms before your very eyes! (In Mozilla browsers, for example, you go to the menu bar and select View, Page Style…) [I actually wrote five different style sheets for this so that people could view the page and see the changes, but now I’m taking it easy and letting the nice people at WordPress.com do the CSS for me.]

What they say about this page…

  • “‘There are some really great improvements in CSS2,’ said Web developer Daniel Greene, who has been working with the style sheets since they were introduced.” —Chris Oaks, Wired News
  • “Besides Microsoft’s dubious CSS Gallery, Daniel’s pages were one of the first places to see Style Sheets in action, back in the early days. : )” —Sue Simms, CSS Pointers
  • “Esta es una de las primeras páginas que hizo uso real de CSS1, realizada por Daniel Greene.” —Juan R. Pozo, HTML con Clase [Translation: This is one of the first pages that made actual use of real CSS1, brought to you by Daniel Greene.]
  • “Daniel Greene’s Style Sheets demo page has a column of ivy down the left hand side of every page. He’s used this gif to create the effect.” —WestCiv, learn web standards :: side panels
  • “Naked Sites: Shedding tables and running free” —Donimo Shriver of Web Nouveau and meryl.net present…, css collection web sites without tables

They’re also talking about…

Bibliography

These are the resources I used to learn CSS and HTML, and to validate my documents:

Browser support

When I first wrote this page in 1996, only one browser (Microsoft Internet Explorer) supported CSS. As more browsers supported CSS, I maintained an updated list. Now, I don’t know of any browser that doesn’t support CSS! Browsers don’t all render CSS in the same way, however, and they never have. It’s no wonder I was one of the first people on the Web to publish in CSS; I was an amateur and I wasn’t going to lose any money or business if certain people couldn’t read some of my pages. It was all experimental! You can see how dangerous it was to publish with CSS by looking at the following:

The sad shape of this page in IE Mac
The sad shape of this page in IE Mac
Screenshot of how Netscape slaughtered this page in the early days
Screenshot of how Netscape wrecked my Font Properties Demo Page in the early days

A description of a Bug in Backgrounds for DIV Elements from the early days

Daniel Greene originally published this document on danielgreene.com as style.html in August 1996, making it one of the first few documents on the Web to use CSS.