Summary: What Is This?
One would think that a web page about CSS would be better looking. This is like 1998.
Yeah, yeah. I agree with you. This WAS put together in 1998.
This at the moment is an example of what NOT to do.
Then again, this is used as a playground. So this will get better ... eventually.
I sure hope so, for your sake ;)
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.
- Look through websites in my gallery to get an idea of what is possible
visually. Make notes of page design elements
you want and don't want in your website.
- 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.
- Resist the temptation to go back to
using tables to layout pages.
Separate content from presentation. Know
The Meaning of Semantics
Remember that
tables for layout is stupid.
- 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.
- Work to a list of what you want to fix or what you need to learn.
Examples:
A). Fix floated images that "stick out" of the bottom of previous div elements
B). How do I align text vertically within its box?
- 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.
- Validate your html and css files to spot errors using
these debugging tools
- 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?
3 column layout examples:
List Selectors
#listsep { list-style-type: none;}
#listsep li { background-image: url(checkbox.gif);
background-repeat: no-repeat;
padding-left: 18px;
background-position: 0px 2px;
}
The Looks I Covet
In priority of usefulness:
-
Wikiwand is the hands-down favorite of many people.
Litterally a million-dollar design.
It uses a Chrome plug-in to convert people from Wikipedia.
-
3 Rings has a clean, Euro look and breathing space for a blog.
-
BBC for its fast mobile
and text-only formats.
- mobile
BBC mobile for its questions: What do you get? How do you get it? What does it cost?
- Small arrow appearing when I mouseover a text link.
The Gallery List is a site listing
49 gallery sites, offering to submit your site to them for $1 each.
Templates and Working Examples
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.
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:
Among
Promising CSS Frameworks and others:
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.
CSS Frameworks + CSS Reset: Design From Scratch reviews CSS templates and their pros and cons.
5 Alternative and Tiny CSS Grid Systems
CSS Galleries
There are several basic industry-wide standards for templates:
- TemplateMonster offers many for sale, but not as part of a CMS.
I also find their most of their layouts too complex visually.
- CSS Zen Garden. This is good to admire the range of designs, and for one-page web sites.
But it's not appropriate for serious multi-page sites.
- Joomla CMS.
- osCommerce
- Drupal (PHP)
- DotNetNuke (MS.NET C#)
- FaceBook
- WordPress
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
Generate CSS code
Specific examples include:
Can HTML & CSS be used to create a printed book?
Docbook converts material from SGML/XML into HTML and press-ready PDF.
This css file uses the "boom!"
microformat
of class names for
creating a book-quality pre-presss
PDF file using the
-
$349 Prince software from YESLOGIC.COM reads
XHTML and CSS files with
SVG (Scalable Vector Graphics) XML text-based graphics language.
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.
Was his
2006 PhD thesis website created using the techniques he describes?
- 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.
-
XEP from RenderX does hypenation for print production.
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.
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
Photoshop Files
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.
Websites Laid Out Using Stictly CSS
What I Learned from Studying Other Sites
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:
<link rel="stylesheet" type="text/css" href="./css/printstyle.css" media="print">
<link rel="stylesheet" type="text/css" href="./css/pdastyle.css" media="handheld">
These are needed because IE5 incorrectly treats imported print/pda stylesheet as media="all".
Spreading CSS over several files is useful when several people are involved.
One can focus on each aspect:
- default.css to hold overhead CSS such as clear-block
- layout.css to define the layout for the structure of the main page
- color.css to define standard background and border colors of elements defined in other CSS
- nav.css to define navigation bars and sub-bars
- login.css to define the layout of the login page.
Alternate styles to override specific formats
and hide elements not appropriate:
- reverse.css to define high-contrast colors of elements defined in other CSS
- Mobile.css to define content for smaller Handheld screens
- print.css to define content for the printed page.
Block Names as Design Elements
Each CMS (Content Management System) has its own set of block names.
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
|
HTML5 introduced new header, footer, and associated blocks in the HTML markup.
Rules for Different Media
NN4.x only pays attention to style sheets that have a media value of "screen".
@media screen {
.popup { visibility: visible; }
}
@media handheld, print {
.popup { visibility: hidden; }
}
Although the following media types are defined:
| Media Type | Used for output to ... |
|---|
| all | all media type devices (the default) |
|
aural | speech sound synthesizers |
| braille | braille tactile feedback devices |
| embossed | paged braille printers |
| handheld | mobile devices |
|
print | printers (static) |
| projection | projected presentations, like slides (static) |
| screen | computer screens |
| tty | media using a fixed-pitch character grid, like teletypes and terminals |
| tv | television-type devices such as WebT |
List of CSS recognition
by User Agent (browser) and
by handheld device using HTMLDog's
CSS test page and
Lachlan Hunt's CSS Media Type Tests
Web Hypertext Application Technology
For print, it's better to set body { font-size: 12pt; }
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.
<style type="text/css" media="all"><!--
@import "./css/ie4hacks.css";
// CSS comment line
/* CSS comment block */
//--></style>
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.
CSS stylings defined as attributes in the <div> tag are
applied to values between <div> and </div> tags.
For example:
<div class="my_hr"><hr /></div>
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.
Styling declarations for this are defined in the "my_hr" style rule
such as:
.my_hr { color: #f00; background-color: #f00; height: 5px; }
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:
<div style=" color: #f00; background-color: #f00; height: 5px; ">
Such declarations are bounded by quotes.
This is discouraged due to the general approach of separating content from formatting code.
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.
Important
TIP: A tag marked as !important cannot be changed by updating its style value.
element.style.setProperty("display", "inline", "important")
does not work in IE.
This article suggests:
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;
This article suggests:
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.
JavaScript Override CSS
element.style.cssText += 'display:inline !important';
TIP: The += operator adds rather than overwrites the property.
Cascading Order and the !Important Directive
There is a consequence to where a style is specified.
Assumptions about style cascade down from each level in the document hierarchy:
- Declarations hidden as default browser styles cascade to
- User style sheet declarations cascade to
- 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.
- 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.
Selector ID and Class Names
-
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."
# (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 selector which can be used many times.
. (period/dot) precede the definition of
class selectors.
<p class="authid">
Selector names starting with a number are ignored in Mozilla/Firefox.
Bug vs. Bug - Underline Hack
CSS HACK:
Selector names beginning with an underline, such as "_forieonly".
are ignored by modern browsers but recognized by IE6 and earlier.
So this example below has IE6 and below using 'courier new' since it is the only browser needing it:
pre, code, kbd, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
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.
* { padding:0; margin:0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button { display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
Sprites, Concatenation, Hover Rollovers
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.
#sidebar img.icon{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#sidebar img.icon:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
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.
WARNING: Hover effects are not relevant on touch-screen mobile browsers.
John Resign can
make iPhone default buttons in CSS
Tabs For Navigation and other jQuery Effects
Rounded Corners with Border Radius
Prior to CSS3, there are two approaches: one for fixed width boxes such as navigation bars
and a more complex one for variable width boxes.
DEMO:
Solar System by Alex Giron
illustrates the movement of planets and moons around the sun
using CSS3 code such as this (starting from upper left and moving clockwise):
-webkit-border-radius: 5px 200px 30px 50px;
-moz-border-radius: 5px 200px 30px 50px;
As of this writing, this works only for Chrome and Firefox, not Safari nor IE.
Styling Forms
Movin' on up (to XHTML Strict)
| From HTML 4 ... | Design | XHTML ... |
|---|
| <b> | Bold
| <strong> |
| <br> | Line break
| </br> or CSS |
| <font> | Font
| CSS |
| bgcolor | Background table color
| CSS |
| <u>x</u> | Underline
| <span style="text-decoration:underline">x</span>
or structural markup. |
| <img src= ... > | Image
| <img src= ... /> |
Tables
CSS purists say that tables "should" not be used for formatting.
But
some point out that a table is better for putting a side nav bar the whole height of the page.
points out that this use of HEADERS and ID suggested in
The Elements of Design
For a semantic table, use these styles:
#t1,td[headers~=t1] { background:yellow }
#mc,td[headers~=mc] { background:yellow }
td[headers~=t1][headers~=mc] { background:#ffA500 }
<table>
<tr><th></th>
<th id="gu" axis="location">Guthrie</th>
<th id="mc" axis="location">MacFarlane</th></tr>
<tr><th id="t1" axis="time">1.30pm</th>
<td headers="gu t1">Brett, John, David</td>
<td headers="mc t1">Roger</td></tr>
<tr><th id="t2" axis="time">2.15pm</th>
<td headers="gu t2">Dean</td>
<td headers="mc t2">Lisa, Peter</td></tr>
</table>
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.
Background Images
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; }
Text Effects
Before CSS3,
mothereffingtextshadow.com showed the way.
Inset #CCC colored text with with a minus one-pixel y-radius and one-pixel blur radius:
text-shadow: 0px -1px 0 1px #000;
Embossing with text-shadow:
-1px -1px 0 #CCC,
1px -1px 0 #CCC,
-2px -2px 0 #555,
2px 2px 0 #555;
Clearing Floating Divs
<div class="clear-block"></div>
This approach is adopted in file default.css within Drupal's system module, which contains this code:
.clear-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
/* Holly Hack Hides/Overides CSS from IE5-mac \*/
* html .clear-block {
height: 1%;
}
.clear-block {
display: block;
}
/* End hide from IE5-mac */
The CSS Box Model
margin:20px;
20+5+10+30px=65px
|
There are three bands of space surrounding any text within a div.
The width set for an element refers only to the space occupied by the text.
Margins, borders, and padding add to that width.
Hiding objects trips up the behavior of the margin property on some browsers:
- Internet Explorer applies all margins properly when the object is rendered,
but if an ancestor container is ever hidden (using CSS 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 are not honored.
Otherwise, 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.
The CSS Box Model Voice-family Hack
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 than
being added to the width: as W3C specifies.
So
Tantek Celik found this way to prematurely close a style rule in IE5x PC
by taking advantage of a bug in how IE5x parses the voice-family tag (in a 'screen' style sheet).
Only IE5 would cut the block short when it sees the end-braces character within the string.
.test {
width: 500px;
padding: 50px;
voice-family: "\"}\"";
voice-family: inherit;
width: 400px;
}
So IE5 ends up invoking 500px while other browsers invoke the second width of 400px.
CSS Tag Reference
| Selector |
Property |
Default
value |
Alternative
values |
Note |
| body { |
background: | - | white | Shorthand for setting all background properties in one declaration. |
| background-color: | - | color-rgb, color-hex, color-name
transparent | |
| background-image: | none | - | Not printed by browsers, so use a transparent gif for print. |
| background-repeat: | repeat forever up and across | no-repeat (shown only once),
repeat-y, repeat-x | y=Vertically
x=Horizontally |
| background-attachment: | - | scroll (with the rest of the page)
fixed | relative to the rest of the page. |
| background-position: | - | top left, top center, top right,
center left, center center, center right,
bottom left, bottom center, bottom right,
x-% y-%, x-pos y-pos
| |
| - | width: | - | I prefer more future-proof "auto" over "100%" | |
| h2.x { | - | position: | relative | absolute | |
| - | left: | 0 | 2px, -2px | space from left of normal |
| - | top: | 0 | 2px, -2px | space from top of normal |
| - | visibility: | visible | hidden | |
| a { | - | text-decoration: | none | overline, line-through, underline |
| - | color: | black | #123456 | hex (3 words, 6 letters) |
| - | text-shadow: | none | color
length | |
| p { | - | text-transform: | none | uppercase, lowercase, capitalize |
| p { | font: | below | - |
| font-style: | normal | italic, oblique |
| font-variant: | normal | italic, small-caps |
| font-weight: | normal | bold, 900 |
| font-size: | 100% | - |
| font-family: | times | sans-serif, courier |
| p { | border: | | medium double rgb(250,0,255) |
| border-style: | none | dotted, dashed, solid, double, groove, ridge, inset, outset
| 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.
-
CSS2 Test Suite: Prototypical Pages by Eric Meyer
-
CSS1 Test Suite at W3C
Unlike HTML 4 Transitional, XHTML markup must:
- be in lowercase
- use proper nesting and ending tags
- ampersands (&) in URLs must be written as &.
Web pages on proper XHTML semantics:
Search engines rank keyword weight based on semantic structure.
Compatibility Among Rendering Engines
�hasLayout� by Sttzansatz gives a thorough explanation.
Thoughts on IE hack management
Controlling Presentation with Measurement and Location Properties
(removed from MSDN but still available in the Internet Archive).
MSHTML Editing Platform in Internet Explorer 5.5 (removed from MSDN but still available in the Internet Archive).
CSS Mastery: Advanced Web Standards Solutions
(OReilly, 2004)
by Andy Budd, Simon Collison, Cameron Moll
Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
(friends of ED, February 13, 2006)
by Dan Cederholm of
simplebits
Also by Dan Cederholm:
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)
and
companion website
by
Charles Wyke-Smith
His blog
Accessible XHTML and CSS Web Sites: Problem - Design - Solution
(Wrox Press, 2005 (480 pages)
by Jon Duckett
5 Tips for Organizing Your css
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".
Readings
50 CSS Tricks You Can't Live Without
- CSS was defined by
this W3C document
to separate structure and behavior coding
(such as FONT color)
from text and graphic content.
-
W3.org on Cascading Specificity
-
Table of CSS compatibility (stops at IE5).
-
Semantics, HTML, XHTML, and Structure
-
CSS and Lists at WebsiteTips.com
Books and Websites By CSS Rock Stars
- Charles Wyke-Smith, author of
Stylin' with CSS: A Designer's Guide
- Eric Meyer of
Complex Spiral Consulting, authored
Eric Meyer on CSS and
More Eric Meyer on CSS
W3 Schools on CSS
Cascading Style Sheets: The Definitive Guide, 2nd Edition (Paperback)
(OReilly, 2004)
by Eric A. Meyer, the best-known expert on CSS.
But this more of a good introduction than a comprehensive how to.
- Dan Cederholm, author of
Bulletproof Web Design and
Web Standards Solutions,
offers stock web icons with customizable color.
- Jeffrey Zeldman, author of
Designing with Web Standards
- David Sawyer McFarland, author of
CSS: The Missing Manual
-
Owen Biggs
-
quirksmode.org by Peter-Paul Koch has a list of JS techniques and scripts.
Communities
-
css-discuss.org/ also has a wiki.
CSS (Cascading Style Sheets)
Here are notes on how to figure out CSS to format web pages.
In one page are practical advice, links, and examples.
Transcending CSS: The Fine Art of Web Design (Voices That Matter) (New Riders, Nov 15, 2006)
How to Create Your Own CSS Zen Garden Design is an example in how to analyze a website for its design.
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)
