CSS Stylesheet Author Tips
revised 21 May 2010
Copyright © 2003–2010 by Stan Brown, Oak Road Systems
revised 21 May 2010
Copyright © 2003–2010 by Stan Brown, Oak Road Systems
Contents:
Want to set up a stylesheet without knowing CSS? The W3C Core Styles will get you started. On the other hand, Strange Banana will generate a random stylesheet each time you access it.
From Containing Floats by Eric Meyer:
div
div.clearer {clear: left; line-height: 0; height: 0;}
<div class="item">
<img src="w6144.gif">
Widget 6144
<br>$39.95
<div class="clearer"> </div>
</div>
"In most browsers, and as defined in CSS2.1, a floated element will
expand to contain any floated elements that descend from it." So if
you want to have a floated-left image inside a boxed div,
you can code it like this:
div.item {float: left; border: 1px solid; padding: 5px; width: 60%;}
div.item img {float: left; margin: 5px;}
Method 1: In the HTML:
<h3>Blabla left <span class="part2">blabla right</span></h3>
In the CSS:
h3 { position: relative; }
h3 .part2 { position: absolute; top: 0; right: 0; }
source: newsgroup article "Text aligned left and right on the same line" by Jukka K. Korpela (Xns937C95820D2E1jkorpelacstutfi@193.229.0.31, 2003-05-15)
Method 2: In the HTML:
<div class="lraexampletop">
<div class="left">Left aligned text</div>
<div class="right">Right aligned text</div>
</div>
In the CSS:
div.lraexampletop{text-align:right;margin:1em 0;padding:0}
div.lraexampletop div{display:inline}
div.lraexampletop div.left{float:left}
body>div.lraexampletop{display:table;width:100%}
body>div.left,body>div.right{display:table-cell}
body>div.left{float:none;text-align:left}
body>div.right{text-align:right}
source: <http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm>
See Centering Blocks with CSS and Centering Tables with CSS, both by Nicholas G. Theodorakis.
Stephen Poley provides these styles at <http://www.xs4all.nl/~sbpoley/webmatters/layout5.html>:
#outer { background: url(img/stripes_left.jpg);
background-repeat: repeat-y;
background-position: left;
}
#inner { background: url(img/stripes_right.jpg);
background-repeat: repeat-y;
background-position: right;
}
#content { margin-left: 75px; margin-right: 75px; padding: 1em; }
outer, inner, and content
are nested <div>s, in that order.
Set both margin-left and padding-left for
ul and ol elements. (Either set padding to 0
and margin to the desired indent, or vice versa. But you must specify
both to have a consistent indent amount across brosers.)
source: Consistent List Indentation by Eric A. Meyer
From Anne van Kesteren in (brpq5i$aqr$1@reader08.wxs.nl, 3002-12-17): "Small example with fixed width in px ignoring accessibility here for a moment. We have the following unordered list:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
</ul>
"That is the markup. Now it is time to style:
ul{
margin:0;
padding:0;
list-style:none;
width:600px;
}
ul li{
margin:0;
padding:0;
display:block;
float:left;
width:200px;
}
"
This can be useful in a print stylesheet, where links are no longer clickable.
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
source: CSS Design: Going to Print by Eric Meyer
From the stylesheet <http://ppewww.ph.gla.ac.uk/~flavell/style.css>:
/* put some air into the line-height, then scale-down the line-height
used for sub/sup. Supposed to reduce the higgledy-piggeldy effect.
(Suggested by Matt McIrvin - thanks! */
p { line-height: 115%; }
sub, sup { line-height: 0.1em; }
Jukka Korpela's thoughts are at <http://www.cs.tut.fi/~jkorpela/math/#subsup> — scroll down to "Uneven line spacing".
See Jukka Korpela's Page Layout Using CSS: a Very Simple Example, which even works in MSIE4.
Give each page <body> a different ID, and also give each link in the menu a different ID. See <http://www.porjes.com/pages/p1.html> for an example.
Mike Hall has a great tutorial and demo.
"Setting the border attribute in HTML sets a border both for the
table as a whole and for individual cells," according to Jukka Korpela
in (Xns940EEFDF02BA9jkorpelacstutfi@193.229.0.31, 2003-10-08).
"It would be conceptually best to set borders either in HTML only or in
CSS only, but ... to have some
fallback for non-CSS browsing situations, ... [u]se e.g.
<table ... border="2"> in HTML and
table { border-collapse: collapse;
border: none; }
th, td { border: grove 2px; }
in CSS."
Use overflow:auto, as in this illustrations,
downloaded 2003-06-19 from
here.
This works only in Gecko browsers at present.
| col 1 | col 2 | col 3 | col 4 |
|---|---|---|---|
| col 1 | col 2 | col 3 | col 4 |
| 0 | 0 | 0 | 0 |
| 1 | 1 | 1 | 1 |
| 2 | 2 | 2 | 2 |
| 3 | 3 | 3 | 3 |
| 4 | 4 | 4 | 4 |
| 5 | 5 | 5 | 5 |
| 6 | 6 | 6 | 6 |
| 7 | 7 | 7 | 7 |
| 8 | 8 | 8 | 8 |
| 9 | 9 | 9 | 9 |
This one claims to work in MSIE, Gecko, and Opera. (It's also stored locally.)
(updated September 2005)
Use an <li> element styled as display:block and floated left, with approprite width. It's explained in this thread, archived at Google.
In that thread, Jim Dabell said:
I don't think that you can achieve captions underneath each image without switching to block-level elements. Change over to{ display: block; float: left; width: [whatever]; }for each <li> element.
If you don't mind living on the cutting edge (of a specification that is five years old on Monday), use the title attribute:
img:after { content: attr(title); display: block; }Otherwise, you can put the text straight into the <li> element for each image.
Later in the thread, Evertjan offered this ready-made code:
<style>
ul {
display:inline;
margin:0em;
padding:0em;
}
ul li {
display:inline;
list-style-type:none;
}
ul li span {
width:200px;
text-align:center;
}
</style>
<ul>
<li>
<span>
<a href="url">
<img src="images/anne.jpg" alt="anne" border=0>
</a>
<br>
your text
</span>
</li>
<li>
<span>
<a href="url">
<img src="images/anne.jpg" alt="anne" border=0>
</a>
<br>
your text
</span>
</li>
</ul>
source: newsgroup article "Can thumbnails be aligned without tables?" by Jim Dabell (8-adnUmTaqWp_t-iRVn-hQ@giganews.com, 2003-08-19)
See Multiple linked stylesheets, which also refers to an article at A List Apart and of course the Specifying External Style Sheets from the HTML 4.01 spec.
Rijk van Geijtenbeek suggests in (oprzhyw1wiicz8n2@news.individual.net, 2003-12-01):
body, p, p *, li, li *, td, td *, font[face] {
font-family: tahoma !important;
}
body, p, li, td * {
font-size: 100% !important;
}
See <http://w3development.de/css/hide_css_from_browsers/>.
Sometimes Internet Explorer simply fails to display positioned content. See IE6 Peekabo Bug.
Use Firefox extension Dust-Me Selectors, suggested by Jonathan N. Little in “way to display (wysiwyg) a css style sheet” (h893h9$3ct$1@news.eternal-september.org, 2009-09-09)
But in “Is there a way to detect ‘unused’ CSS entries?”, (1954758.RbkFSEjSb9@PointedEars.de, 2010-04-01), C.A. Upsdell points out that Dust-Me 2.2 isn’t compatible with Firefox 3.6, Ed Mullen says it still works if you alter the version number in the install.rdf file, and Thomas ‘PointedEars’ Lahn says “Dust-Me Selectors does not consider CSS rules in the document. The CSS Usage extension for Firebug does that, and is [Firefox] 3.6-compatible by default: <https://addons.mozilla.org/de/firefox/addon/10704>
RichInStyle has a good checklist on organizing your stylesheet.