Transcending CSS: The Fine Art of Web Design (Voices That Matter) (New Riders, Nov 15, 2006)
by Andy Clarke and Molly E. Holzschlag
has a lot of "wasted" space, extraneous photos, and chatty text.
But all that makes sense because in this book CSS is presented in the context of excellent web design.
Like a conversation with an eccentric artist, there are enough gems of wisdom among the cryptic text and images
that makes the exchange interesting,
such as its comments on CSS3 support by Firebox 2 and IE7.
Advice on Getting Started With CSS
Do some reading before diving into CSS.
You need to be prepared for quirks, especially with IE browsers.
Examine the templates that already incorporates the
various hacks to work around bugs in various versions of internet browser user agents.
It is not cost effective to go through extra trouble to accomodate those who ignore the
security threats that have forced almost all computer users to upgrade to versions of operating systems
that have more modern (and less buggy) internet browsers.
But to accomodate the needs of mobile internet phones, we need to make web pages
flexible. For example, the internet browser within Microsoft Pocket PCs identifies itself as "IE4".
Take a picture of websites that you like. My list of sites I covet.
Save the page as "Complete" so you can analyze it later, even if the site is changed.
Arrange for tutoring before you need it.
I found a tutor by putting ads on Craigslist and various boards.
I also looked through galleries of CSS work and contacting the person
who created the format I liked the best.
We installed VNC and Skye VOIP so we can see each other's desktops
and talk at the same time.
Mock up the "look" you want by moving elements around.
If you're comfortable with a graphics layout program such as Photoshop, Microsoft Powerpoint, or Visio,
use it so you can save various versions.
If you're a kinesthetic learner, have individual elements you want on paper,
cut out them out and move them around the paper as if you're arranging furniture in a room.
Take photos of various arrangements.
The advantage of using Photoshop is that it has transparaent layers so that
in the mock-up, you can note commonly used position locations such as column locations
(4 column designs need them).
Work first on positioning, then on fonts and colors.
Work outside, in; top, down.
This way, you can catch unintended effects of cascading
as soon as it can be observed.
When debugging CSS, make only one change at a time.
If you approach your time learning CSS as an experiment -- a learning process --
you'll be less frustrated with the journey.
Backup often. Every time you get it working,
It helps to use a text editor that saves changes incrementally
so that you have an unlimited number of undos. But even then occassionally
zip up file sets to a different (preferrably sequential) archive file name.
Keep a diary of what you tried and the identification of the backup file associated with each variation.
Test each change to see what happens.
Expand and contract the window to see if the text flows the way you want.
Enlarge and reduce font sizes.
If your site supports it, switch css files to set different color schemes.
Look at the page in various versions of several other browsers.
Code first within a standards-compliant brower like Firefox,
then add work-arounds for Internet Explorer browsers.
Backup often. Better yet, get a text editor that saves every variation automatically.
Did I mention the importance of backing up data often?
Most expert CSS coders make use of a template.
Using templates is a good idea because one can spend months messing around.
There is definitely an "art" to attractive placement of items, selection of fonts,
and picking pleasing colors that all look good together.
And not everyone is a good artist.
There are a lot of little "tricks" to remember to make CSS work well across browsers.
An element works one way in one browser, but another way in another browser.
It's maddening.
Templates come with features that you may haven't thought about on your own
without experience.
If you come up with your own design, eventually you'll have to do "open heart surgery" to
add features that templates already have from the get-go.
Free (but usually unattractive) templates are available when you sign up for hosting.
I like the designs from JoomlaShack.com, who charges $40, plus $70 if you don't want their name to show on your site.
These prices are per site. So you if you have 4 sites to do, you pay them 4 times.
You can often start with a free template and then
trade up to a professionally designed template later.
Even using a template still means you have to learn CSS and graphics manipulation tools.
So some prefer David Hellsing's GPL
Tripoli (from Australian ) to reset browser defaults, such as 1em to 10px.
It doesn't have a fluid layout.
Start with proven (tested) cross-browser compatible CSS in reusable
templates that can be used in CSS frameworks such as:
YAML ($160 from Dirk Jesse in Germany) has an unassuming name ("Yet Another Multicolumn Layout")
belies its powerful foundation of structured flexibility with thorough documentation.
The trouble with CSS frameworks: They use generic names
(such as span-6) which do not have semantic web meaning
(such as main-content or logo-line).
With YUI CSS, source is bloated by classes not needed.
QUESTION TO YOU: Is there a set of templates that presents the same look and feel across a
constellation of applications, such as blogs and wiki's for Joomla
It includes the WebArch document from www.yeslogic.com
HTML-XML-utils/ from Bert Bos at W3C includes the "multitoc" XSLT tool that
generates a Table Of Content from HTML.
CSS does not do the auto-hypenating needed for finer line alignments on paper documents.
The author, Håkon Wium Lie (CTO at Opera) noted that he used perl script to add soft hyphens entities (­) in the right places.
MS Word DOT file is to MS Word precisely what CSS is to HTML. It only controls a lot more (like headers and footers) a lot better for print – because that’s what it was designed to do.
CSS2XSLFO converts an XML document, together with a CSS2 style sheet,
into an XSLFO document, which can then be converted into
PDF, PostScript, etc. with an XSLFO-processor.
It has special support for the XHTML vocabulary,
because that is the most obvious language it would be used for.
The tool has a number of page-related extensions.
It also comes with an API in the form of an XML filter.
Turn-Key's TopLeaf rendering system
provides the facilities of professional quality typesetting using a simple intuitive interface.
The pages have no corner trims and no bleed; the black text separates into CMYK leaving the black at only 90%. We would not be happy to go to press with this file, which highlights the pitfalls of using unsuitable tools for the job.
Most publishers want LaTeX formatted text.
An alternative is to create a XML file with xhtml markup tags and a XSL-FO (the formatting part of XSL)
to make the pdf.
The preferred format of template files are .PSD
Photoshop files which are proprietary to Adobe.
These layered graphic files are popular
because they enable the designer to add, edit, or remove image layers.
Most of all, Photoshop enables graphics to be sliced
so that interet browsers can download several files at once rather than
one big graphic file.
Such manipulates take several hours to learn and several days to master.
Adobe Photoshop is rather expensive.
However, several less expensive programs can open and edit PSD files:
Paint Shop Pro from
Jasc and
PhotoImpact from
Ulead.
With Drupal, in the .engine file regions are assigned with a PHP function such as
drupal_set_content('left','Hello');
Blocks
Regions
Navigation
Primary links
Recent comments
Syndicate
User login
Who's new
Who's online
left sidebar
right sidebar
content
header
footer
Cascading
Spreading CSS over several files is useful when several people are involved.
One can focus on each aspect:
Defaults (to hold overhead CSS such as clear-block)
Layout
Color
Styles (such as navigation bars)
Mobile / Handheld
Print (which requires override)
Debugging technique:
to see where a div begins and ends, and also whether or not any nesting is occurring,
temporarily give each div a border by temporarily changing CSS to include:
div {border: 1px dotted gray; padding: .5em}
This mark-up change is done automatically by the ___ FireFox plug-in.
Default Style Reset
If one types text between standard tags such as <H1> without specifying any
style, the browser's hidden default styles are applied. That's why a blank line
precedes large lettering of whatever is between <H1> and </h1>.
This is why, in the past, many webmasters begin headings with <H2 tags.
However, content search engines such as Google look to <h1 tags as names to display
to googlers. So it's now a good idea to use them. Just style them to your liking.
A commonly used technique is to eliminate the browser's default styles for
margins and padding specifications:
* { margin: 0; padding: 0; border: none; }
The star (or asterisk) is the CSS universal selector. Think of it as a wild card. Used on its own, it represents every element on a page.
This is smart to do because each browser has its own setting.
This global style resets defaults on all browsers.
Concatenation of images onto a single file is an important way of minimizing
client response time and load on servers becuase each file specified
requires a client-server negotiation on every call.
Borkweb recommends that a 1x1 transparent gif be specified in the img tag within html.
The actual image to be display is then specified as the
background image within a img.icon subclass within a css class.
Then, other sub-classes are specified to position the desired graphic
with css code such as:
background-position: -32px 0px;
Hover CSS is used to change the opacity.
Note the extra -moz tags for Mozilla browsers.
The image is specified in both the outer element (the hover position) AND
the inner "outer a" (base position)
to avoid the flickering that occurs when
Windows IE is too slow in reloading the background image.
Tabs For Navigation
-
Rounded Corners
There are two approaches: one for fixed width boxes such as navigation bars
and a more complex one for variable width boxes.
We use spaces to separate declaration code from the braces to make them easier to locate using
ctrl-left and ctrl-right keys provided by text editors.
Such rules are defined either in-line at the top of the html file where they are referenced,
or in an external cascading style sheet file with a suffix of ".css".
Embedded styles such as this are embedded along with text content:
Declarations authored in external style sheet files cascade to
Declarations embedded (internal) in authored between <style tag
(within the <HEAD tag) cascade to
inline styles authored within <div style=" ... " declarations
If the same property for the same tag is defined in more than one place,
style display follows this hierarchy.
Declarations
CSS code formats content using declarations.
Each declaration contain "property: value" pairs such as color: #000;
Commas separate styles which share the same rule.
Spaces separate the definition of greater selectivity, such as <div p { ... }
Multiple declarations can be specified within a rule.
External Style Files
CSS declarations can be placed within a separate file usually have an file extension of .css.
External css files have the advantage of being cached on client machines.
On subsequent retrievals, caching means faster access because the HTTP protocol
has a "304" return code which means that the file does not need to be downloaded again.
Thus, Visitors see faster page loads.
The css file does not need to be retrieved by any other page that references that css file.
A css file is specified with a LINK tag within the <HEAD> section:
These are needed because IE5 incorrectly treats imported print/pda stylesheet as media="all".
In-line Styles
Even though it's nice to promote code reuse,
CSS code applicable only to a single HTML file is placed within that file
as in-line coding placed between HTML comment block <!-- and -->
to keep them from being displayed as content text by older browsers which don't know about CSS.
This hack is possible because Navigator 4.x ignores @import.
An example is margin rules for standards compliant browsers
because Netscape 4 misinterprets margins.
We also use @import only for workarounds to IE bugs which are correctly handled by NN 4.x.
Selector Names
# (pound sign/octothorpe/hash mark) precede the definition of
ID selectors such as #authorid.
<p id="authid">
Even though browsers haven't been complaining,
each ID selector is supposed to be used only once on a page.
That's why in some situations they carry more "weight" than class selectors.
. (period/dot) precede the definition of
class selector which can be used many times:
<p class="authid">
Selector names starting with a number doesn't work in Mozilla/Firefox.
IE doesn't recognize selector names beginning with an underline, such as
"_forieonly".
selectoracle translates CSS2 and CSS3 coding into English or Spanish
sentences. Very cool.
One commenter at the
DaniWeb IT Discussion Community on CSS said
"My biggest problems with CSS arise when I get caught up in how I think it should work, instead of trying to find out how it actually works."
The <table "summary=" property is not display, but vocalized by screen readers.
The <caption> tag displays the table's title above the table itself.
For simple tables:
<th SCOPE="colgroup" is added to designate column labels
which spans across several columns.
<th SCOPE="col" is added to designate column labels.
<th SCOPE="row" is added to designate "stub" labels
running down the left side of the table.
headers are used because text to speech engines recognize them better.
The AXIS= property is specified for future filtering capabilities.
"<tfoot>" must be specified between "<thead>" and "<tbody>"
(not after <tbody>) because, as the HTML specification says
"so that user agents can render the foot before receiving all of the (potentially numerous) rows of data."
.sub1, .sub2, and .sub3 have been defined using CSS margin-left:
for use by markup code such as
<div class="sub1"> entry </div>
Footnotes are marked using the CSS <SUP> supertext markup.
They go to the right or text and to the left of numbers.
IE6 does not support the "abbr" attribute (defined in the W3C standard)
to display an expansion of the abbreviated text on mouseover.
However,
this workaround uses javascript to read through the whole document looking for "abbr"
to add a "span" tag which has the same intended behavior.
My CSS
Two versions of CSS are used in this site.
The first approach has a single "global.css" file.
Pages referencing the "all.css" file which imports several css files (with the css at the bottom
taking precedent): mambo.css, custom.css, white.css, black.css.
Use of white.css and black.css alternate depending on user selection.
The same will be true of print.css and mobile.css in the future.
All content is within div id="content_area" (id="container" in csszen).
The background image for the whole page:
html { background: transparent url(htmlbg.jpg) repeat-x; }
Styles marked with !important override non-important styles.
Author styles override user styles, which in turn override user agent styles.
Important user styles override important author styles,
which in turn override important user agent styles.
Rules whose selectors have higher specificity
override those with lower specificity (see below)
Lastly, rules that have been specified last override previously specified rules.
Rules in imported style sheets are considered to have been specified before rules
in the style sheet that imported them.
This is why @import rules are always placed at the top of a style sheet;
it makes it easy to remember that the rules in the style sheets they import
are not as "strong" as the rules in the style sheet after the at-rules.
Bug vs. Bug
IE5x PC mis-implements the "box model" prescribed by the W3C standard that other
browsers follow.
IE5x PC puts padding and box borders WITHIN its stated width rather being added to the width
as W3C specifies.
IE5x PC does not support the CSS2 child selector.
So
Tantek Celik found this way to prematurely close a style rule in IE5x PC
by taking advantage of a bug in IE5x CSS parsing.
Earlier versions of the W3C CSS validator incorrectly flags 'voice-family' property as errors in a 'screen' style sheet.
There three bands of space surrounding any text within a div.
Margin
Border
Padding
text
The width set for an element refers only to the space occupied by the text.
Margins, borders, and padding add to that width.
The behavior of the margin property varies by browser as follows:
Internet Explorer applies all margins properly when the object is rendered,
but if an ancestor container is ever hidden (display:none), the left margin is no
longer honored when redisplayed.
Firefox applies all margins if the object does not specify an overflow property
(overflow:hidden, overflow:auto, overflow:scroll).
If the object uses overflow,
the top and bottom margin settings aren’t honored.
In summary, margin properties are honored as follows:
The only margin setting that is honored by all browsers in all situations is
margin-right.
The margin properties, margin-top, margin-bottom, and margin-right, are
honored in all browsers
if the object does not specify an overflow property of hidden, scroll, or auto.
The margin properties (margin-top, margin-bottom, margin-left, and margin-right),
are honored in all browsers if the object does not specify an
overflow property (hidden, scroll, or auto)
and no ancestor of the object ever has its display property toggled between none and block.
CSS Tag Reference
Selector
Property
Default value
Alternative values
Note
body {
background:
-
white
Shorthand for setting all background properties in one declaration.
border-width" doesn't work alone, only after border-style.
border-width:
none
medium
border-color:
normal
#0000ff
-
border-top-width:
-
15px
-
border-right-width:
-
15px
-
border-bottom-width:
-
15px
-
border-left-width:
-
15px
td {
padding:
shorthand
8px 8px 8px 8px
Needed for Opera browsers
padding-top:
5cm
padding-right:
5cm
padding-bottom:
5cm
padding-left:
5cm
p {
margin:
shorthand
1cm 2cm 3cm 4cm
Top Right Bottom Left (TRBL as in "trouble")
margin-top:
8px
2cm
margin-right:
8px
2cm
margin-bottom:
8px
2cm
margin-left:
8px
2cm
p.x {
line-height:
0.4cm
"dimension" space between lines
a:first-child
pseudo-class special style for the first child of another element.
p:first-letter
pseudo-element adds a special effect to the first letter of a text block.
q:lang(no) {
-
quotes: "~" "~"
pseudo-class defines exception when text is between <q lang="no"> and <
div {
-
overflow:
-
scroll
puts large text in a scroll box
-
z-index:
0
-1
Lower numbers go behind the bus.
-
display:
none
hides
-
inline
no space between divisions
-
text-align:
center
lists {
-
marker-offset:
auto
length
CSS2
-
background-image:
repeat
no-repeat
outside indents but is not compatible with list-style-image:
-
list-style-position:
inside
outside
outside indents but is not compatible with list-style-image:
ul.xx {
-
list-style-image:
url('arrow.gif')
CSS2 offers no mechanism to change the size of the embedded object, or to provide a textual description, like the "alt" or "longdesc" attributes do for images in HTML.
-
list-style-type:
disc
circle, square, none
unordered lists
ol.xx {
-
list-style-type:
decimal
decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ordered lists
img.xx {
-
float:
left
right
-
vertical-align:
text-top
text-bottom
puts image on top or bottom of inline text.
<a
accesskey="b"
For Alt+b keypress
<span
-
style="cursor:
auto" >
Default
auto
text
wait
help
Crosshair
Pointer
Move
e-resize
w-resize
n-resize
s-resize
ne-resize
sw-resize
nw-resize
se-resize
Cross-Browser Issues
We never have spaces between the property value and the units (such as "2 px" instead of "20px")
because only IE recognizes spaces. Mozilla/Firefox or Netscape don't recognize it.
Search engines rank keyword weight based on semantic structure.
Position Is Everything.net by John and Holly Bergevin
explain obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors,
and show how to "make it work" without using tables for layout purposes.
centricle.com provides a comprehensive list of CSS hacks and
which browsers are affected by each hack.
With IE5.5 PC, Microsoft introduced the
"hasLayout" script property as a proprietary internal flag which quietly gets set automatically
by IE when various CSS declarations are made. Its state value can be determined by
typing in the IE Address bar:
javascript: alert(eid.currentStyle.hasLayout);
A true value is reported as "-1". A false value is reported as "0".
Within Javascript,
if the clientWidth property is zero then the element does NOT have layout.
(The clientWidth/clientHeight properties always returns zero for elements without "layout.")
This is different to how Mozilla browsers behave.
It's not a CSS property because there is no "layout" property.
It cannot directly be assigned using CSS declarations.
But for debugging purposes you can trigger hasLayout by using the IE tool to edit "zoom (css)"
(the attributes of a node) to "1".
Practically, having layout basically means an element is rectangular.
Internally within IE, having layout means that an element is responsible for drawing its own content.
MS IE6 "hasLayout" behavior is "non-standard."
Using the MSHTML Editing Platform
Live editing, sizing, and dragging of layout elements are enabled with
<body contenteditable="true">
But IE Mac has a different rendering engine which doesn't have the "hasLayout" ecentricity.
Specifying CSS Only for IE Mac Using The Holly Hack
The
Holly hack (named after its inventor, Holly Bergevin)
is used to hide CSS code which IE Mac does not recognize, but other browsers do.
from IE Mac within comment block "/*" and "*/",
This holly hack for IE5.01 Windows keeps items from jumping around when you hover
over them.
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
The height can be any value other than 'auto'.
A better alternative are conditional comments
(MSDN article) within a HTML comment:
<!--[if lte IE 6]>
<SCRIPT LANGUAGE="Javascript">
alert("Congratulations. You are running IE5 or later!");
</SCRIPT>
<P>Thank you for closing the message box.</P>
<![endif]-->
"lte" in the code means "less than or equal".
Rules for Different Media
NN4.x only pays attention to style sheets that have a media value of "screen".
For print, it's better to set body { font-size: 12pt; }
http://www.alistapart.com/articles/alaprintstyles
always un-float large elements, especially long elements containing things like article text. As a general rule, when a float runs to multiple pages, you’re just asking for trouble
body { float: none !important;
http://www.alistapart.com/articles/goingtoprint/
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
CSS (Cascading Style Sheets)
CSSPlay lists experiments with CSS
Transcending CSS: The Fine Art of Web Design (Voices That Matter) (New Riders, Nov 15, 2006)
Even using a template still means you have to learn CSS and graphics manipulation tools.
So some prefer David Hellsing's GPL 
Start with proven (tested) cross-browser compatible CSS in reusable 
CSS Mastery: Advanced Web Standards Solutions
(OReilly, 2004)
Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
(friends of ED, February 13, 2006)
Web Standards Solutions: The Markup and Style Handbook
(Friends of Ed, 2004, 318 pages)
Stylin' with CSS : A Designer's Guide
(New Riders, April 26, 2005)
Accessible XHTML and CSS Web Sites: Problem - Design - Solution
(Wrox Press, 2005 (480 pages)
Deliver First Class Web Sites: 101 Essential Checklists
(SitePoint, July 10, 2006)
Cascading Style Sheets: Designing for the Web
(Addison-Wesley Professional; July 13, 1999)
Cascading Style Sheets: The Definitive Guide
(O'Reilly; May 15, 2000)
Cascading Style Sheets: The Definitive Guide, 2nd Edition (Paperback)
(OReilly, 2004)
