Tag Archives: standards

Me Singing "I Concentrate on You"

This is me singing Cole Porter’s song “I Concentrate on You.” I used YouTube’s “Captions and Subtitles” feature to upload a subtitle file. I hand-coded the subtitle file in BBEdit using the subtitle (.sub) format. To view the video with captions, click the up-arrow button on the bottom-right corner of the screen and choose CC, English: English captions.

CSS Font Properties Test

[This page resided at http://danielgreene.com/fontprop.html from 1998–2010.]

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 Continue reading

Bug in Backgrounds for DIV Elements

[This page resided for many years at http://danielgreene.com/cssbug.html]

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, "Lucida Console",
"Courier New", 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*/
     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): Continue reading

Style Sheets Demo Page

[This page resided at http://danielgreene.com/style.html from 1996–2010 and is now presented for historical content rather than as the CSS demonstration it once was.]

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 <FONT> </FONT> 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. ;-) Continue reading