[Skip to the Main Content]

How Things Change

Or, Whatever became of the CSS Tutorial?

I believe it is an appropriate time for a CSS viral marketing campaign by the Web Standards community.

The novelty and excitement of CSS passed last year. Everyone’s waiting for CSS3 modules. Google any CSS [keyword] and most of the names I read several years ago are gone from the first ten pages for tutorials or explanations or examples of best practices, Web Standards CSS coding. And, those that remain are decent but not ones I would suggest to CSS beginners nor intermediate designers.

What about continuing fundamental Education?

Did you ever meet someone who knew some CSS and decided that absolute positioning was the ideal method for constructing a three column layout? Though their CSS and HyperText Markup Language construction may be odd.

Whilst in Austin, several programmers cited several sources that made me cringe. Even though everyone with which you discuss CSS may know about CSS, not everyone knows how to use it. The programmers answer for CSS was something like,


<div>
<table>
<tr>
<td><div></div></td><td><div></div></td><td><div></div></td>
</tr>
</table>
</div>

It’s a simple three column layout, isn’t it.

Basic, fundament CSS tutorials are usually missing from search results. I searched Google for representative sites but I couldn’t find—in those particular phrases—the Little Boxes tutorials: so I did Little Boxes and found it. However, how many developers (and, programmers) do not know of The Noodle Incident.

Ingo Chao’s Authoritative “On having layout — the concept of hasLayout in IE/Win”

See below and see if you would recommend any of the pages returned in search results:

EchoEcho CSS Tutorial

CSS allows you to customize the lists that can be made with HTML.

The good news is that there are many powerful properties for doing so.

The bad news is that Netscape and Internet Explorer often support these properties in different ways. Both browsers have limitations in their support of list styles.

Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.

Internet Explorer’s support of CSS with relation to lists is only fully supported for browsers on the Windows platform.[Elementary emphasis.]

Microsoft Developer Network (MSDN) Tutorial

How to Manipulate Text Effects in Response to Mouse Events


<STYLE>
    BODY  { background-color: black;color: gold;font: 24pt sans-serif; }
    UL.ActivateTextEffect  { color: orange;letter-spacing: 2; }
</STYLE>

How to Fly Text in DHTML

This article demonstrates both ways to implement flying text through the marquee element and through Cascading Style Sheets (CSS) positioning. To better understand positioning in Dynamic HTML (DHTML), as well as the CSS object model in Internet Explorer 4.0


<MARQUEE WIDTH="700" STYLE="position:absolute; top: 180" 
    ... DIRECTION="left">
<UL>
    <LI class=yellow>Use the Document Object Model (DOM)<br>
    to create interactive documents.
</UL>
</MARQUEE>

http://www.google.com/search?q=css+layout+tutorial

Little Boxes and CSS Layout Techniques: for Fun and Profit

There appears to be a disconnect between blogs and static sites. I have not found why but it’s there nonetheless. Static sites have pages in the search results; blogs very seldom. And, please note that just because a blog page has significant Page Rank, it may very well fall because visitor traffic will fall. Page Rank is good for short term effects, e.g., top ranking in Google for a brief time period when an article may displace an historical, authoritative page; links are best for the historical, authoritative effect, i.e., that authoritative page will shift in the search rankings due to Page Rank machinations but it will remain after that upstart albeit very popular article falls.

I’ve got this suggestion. All of the well-known and often read authors repost their original articles. Or, at least revisit an original article and link internal to that article. [Note: Suggested reading does not seem to work in Google.] Or, write an original review of an old tutorial by a different author.

Perhaps, if A List Apart were to issue a retrospective of the most influential CSS articles. Or, W3C Schools were to rewrite their tutorials.

Google any phrase that you like. If you believe that the first ten (10) results represent acceptable representation of Web Standards authority sites, try a different phrase.

Or, link to an article that you like when writing your own article.

Curious thing, really.

Most developers and programmers don’t know proper CSS practices. Though, most heard about Web Standards. How do we continue to advance Web Standards if new users cannot find those CSS tutorials.


Sean Fraser posted this on February 29, 2008 08:26 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/css/how-things-change.html
  • furl: http://www.elementary-group-standards.com/css/how-things-change.html
  • reddit: http://www.elementary-group-standards.com/css/how-things-change.html

Comments

Comment Author Gravatar
ray ray wrote this at March 19, 2008 07:20 AM

I'm so glad I saw this post. I can't remember how many times I have searched for a good CSS tutorial and always resorted to w3schools for help.

Are there any sites out there that actually give best practices in using CSS? the only one that I have found so far is http://www.elementary-group-standards.com.


Comment Author Gravatar
Sean Fraser wrote this at March 19, 2008 08:41 AM

Ray Ray,

An excellent page is Dezwozhere's CSS, Accessibility and Standards Links. The sections "CSS: Tips & Techniques" and "CSS: Layouts & Templates" are recommended reading for fundamental understanding and practice.

Some of the methods employed in those various pages may be ignored, e.g., IE5.5/Mac hacks.

Some of the advanced methods are terribly exotic for most sites, e.g., negative margins + floats + absolute positioning.

All of the methods are worth reading, however.


Comment Author Gravatar
Jordan Clark wrote this at May 16, 2008 08:00 PM

I agree: some of those tutorials that you quoted are atrocious! A good list of links is available at the UMD website - see: http://www.d.umn.edu/is/support/Training/Online/webdesign/css.html


Comment Author Gravatar
Sean Fraser wrote this at May 27, 2008 02:45 PM

Jordan,

That University of Minnesota Duluth Cascading Style Sheet link list is fairly exhaustive (and authoritative), isn't it. The order by which the articles/tutorials are presented make for fundamental understanding after all are read.

I like the content found from the left-hand navigation, too.

Thank you.


Comment Author Gravatar
Jordan Clark wrote this at May 27, 2008 05:11 PM

No problem!


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.


Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2008 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i