A demonstration of what can be accomplished visually through CSS–based design. Select any style sheet from the list to load it into this page.

Download the html file and css file.

The Road to Enlightenment is Under Construction

Littering a dark and dreary road lay the past relics of browser–specific tags, incompatible DOMs, and broken CSS support. Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The UK CSS Users Group is endeavoring to learn CSS more thoroughly. To this end, we will use this page and site as our practice area and playground. The look and layout of this page will change as we test and grow in our skills. We acknowledge and thank CSS Zen Garden for their leadership in modeling good HTML and styling alongside of creativity.

Everyone in the group will have the opportunity to play with the CSS in this site and to contribute their spin on styling this page. You may add to the content and modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.

Download the html file and css file to work on a copy locally. We will be using Dreamweaver®, so this will involve checking–in and checking–out the files to and from the server. Once you have completed your masterpiece upload your .css file to this web server. Post to the listserv with the name of your CSS file (and please, don’t submit half–finished work), so that we can all see your handiwork and ask questions and make comments.

You may create as many CSS files as you wish. If you have any questions, contact Renée.

Newsletter FAQs

My site works great in all browsers, but things just don’t quite line up in Internet Explorer, any ideas?
Internet Explorer is just full of surprises. One of those is that it is two browsers in one. That is, it has two modes, a standards compliant mode and a more forgiving mode. This more forgiving mode is called Quirks mode. Essentially it allows IE to deal with poorly developed Web pages by making assumptions about how it was supposed to be designed. This is great for amateurs, but causes headaches for professionals.

The good news is that which mode IE uses is dependent on a simple bit of code at the top of the Web page. That is, the Web page determines the mode IE is in. IE will default to Quirks mode if the very first thing on the Web page is anything other than a properly defined DOCTYPE statement. So, if you just make sure you have a properly defined DOCTYPE statement as the very first thing on the page (even before the ‹ html › tag), IE will behave more like a mozilla type browser. Note, you cannot even put comments before the DOCTYPE statement for this to work properly.

Here is an example of a proper DOCTYPE statement and its associated html tag:
‹DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

‹html xmlns="http://www.w3.org/1999/xhtml" lang="en"›
My fonts do not increase now that I’m using CSS, how is this accessible?
It all depends on the fonts you use. I recommend using ems for your default values, although percents and relatives (e.g., x–small) are also okay. You should avoid mixing font types in a document unless absolutely necessary.

CSS Hints, Tips & Lessons

CSS Crib Sheet (Taken from The Zen of CSS Design)

When in doubt, validate.
When debugging, you may save yourself headaches by simply validating your code first. Improperly formed XHTML/CSS will cause many a layout glitch. Validation is an important tool for learning how to find and correct mistakes. The W3C hosts both XHTML and CSS validators, available at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ respectively.

Note that errors early on in the document may cause further errors elsewhere due to improper nesting and other reasons, which are often not true errors. We recommend fixing a few obvious errors and re–validating; you might find the total error count drastically reduced.
Build and test your CSS in the most advanced browser available before testing in others, not after.
If you build a site by testing it in an older browser, your code will end up relying on the less advanced and potentially broken rendering of that browser. You will likely be frustrated when a more standards–compliant browser renders it improperly, which is completely backward.

Instead, start with perfection and then test for the less able browsers. Your code will be more standards–compliant from the start, and you won’t need to go to great lengths to support other browsers. Today this means you should test in Mozilla (Firefox), Safari, or perhaps Opera first, and then correct for Microsoft Internet Explorer.

WIKI

Coming as soon as we can get this going! Patience, please.

People & Skill Sets

This listing shows knowledge, skill & comfort–level with various web design languages, software & computer hardware. This resource is to be used with the understanding that people may have gaps or “blind spots” in their knowledge base. The “levels” & skill sets shown are as listed by that person.

Cruser, Kristin, Development Office (257–1384)
HTML, XHTML, CSS; Dreamweaver, Photoshop, Illustrator; Mac, PC
Gaworski, Shamick, College of Agriculture (257–4736 ext. 488)
Expert: Dreamweaver
Very Good: ASP
Pretty Good: HTML, XHTML, CSS, RSS; FrontPage, Access, Flash, Photoshop
Comfortable/OK: XML/XSLT, C++
Basic Knowledge: ASP.NET, JavaScript, WAP; Illustrator; WCAG
Haralson, Mary, College of Fine Arts (257–9616)
Expert: Dreamweaver; Mac, PC
Pretty Good: HTML; FrontPage, Photoshop, Fireworks; WCAG
Comfortable/OK: Access
Basic Knowledge: CSS
Kerner, Kari, Student Affairs (257–1518)
Pretty Good: HTML, XHTML, CSS; Dreamweaver, FrontPage, Photoshop, Illustrator; WCAG; Mac, PC
Comfortable/OK: Flash
Basic Knowledge: PHP, JavaScript; Access, Fireworks
Siegel, Renée, Development Office (257–5846)
Pretty Good: HTML, XHTML, CSS, WCAG; Dreamweaver, Photoshop, Fireworks; PC
Comfortable/OK: Illustrator; FrontPage, Access; Mac
Basic Knowledge: ASP, ASP.NET, JavaScript
Southard, Chase, College of Medicine, Dept. of Pharmacology (323–2604)
Expert: Mac, PC
Comfortable/OK: HTML, XHTML, PHP, CSS, JavaScript, C++, Perl, Ruby
Basic Knowledge: ASP, XML/XSLT, Java, mySQL, RSS; FrontPage, Dreamweaver, Photoshop, Illustrator; WCAG