CSS notes
Cascading Style Sheets provide a powerful tool to separate content from presentation. The standard is defined by the World-wide Web Consortium. There's a good tutorial over at htmldog. CSS is much discussed on the web: see the links at the bottom of this page.Box model
The box model says that a block of text can have padding from the text to its border, then margin to space the border from other blocks or page elements. Each of these: padding, border and margin can have have different widths; any or all of them can be zero width:
<-margin-><-border-><-padding->TEXT<-padding-><-border-><-margin->
the Box Model Hack is used because IE5 -subtracts- border/padding from the width, whereas the W3C spec +adds+ it on.
Either set widths only on {padding:0; margin:0} containers, then set border and padding on the text inside
or use SBMh hack: /width. No, don't - see below
You'll often find another use for any extra containers anyway (eg background).
Tantek Çelik's voice-family hack is plug-ugly but works - for now.
NOTE on hacks
Don't use hacks to circumvent limitations in the IE browser. A lot of hacks that were dependent on IE not understanding some valid CSS constructs stop working at Internet Explorer 7, because it is better at recognising valid CSS when it sees it. If you want to present something different to Internet Explorer use conditional comments in HTML to present a different style sheet or rule:
<!--[if lt IE 6]>
<style>.someclass {width:120px}<style>
<![endif]-->
Font sizes
Sizing fonts across browsers is another CSS nightmare. Using the browser default tends to make text, especially fonts like Verdana, look too large. IE5 in particular sizes things differently than other browsers - even IE6.
Use a %font on the body, then ems (or %) in rest of stylesheet. 80 or 85% works well for sans-serif fonts. This technique means that the reader can scale the fonts with their browser controls. If white space (margins, padding) are sized with ems then it will remain proportional. Font sizes of less than 1em can cause problems in some browsers.
Alternatively, set the font size on body to small (x-small) on body and use font-size names.
Pictures that grow when window is resized
Scale a picture by giving it % size (as a percent of its container) in the stylesheet:
div {width:100%}
div img {width:50%}
works best with jpg, png. Lets you fill a %column with an image.
Dropdown menus
To create a dropdown menu from a bar (a la Suckerfish),
li {float:left}on top level items
ul ul {position:absolute}
on nested levels.
But some say don't use lists...
Pop-up menus
This works for a columnar pop-up menu:
#navigation {
background-color:#0066cc;
color:#ffffff;
position:absolute;top:0;
left:0; width:100%}
#navigation ul {
list-style:none;
padding:0;
margin:0;
}
#navigation li {
display:inline;
float:left;
white-space:nowrap
}
#navigation ul ul{
display:none;
border:1px solid #ffffff;
background:#0066cc;
z-index:100;
position:absolute;
}
#navigation ul ul ul{ margin:0 0 0 4em}
#navigation ul ul li{float:none}
#navigation a {
display:block;
color:#ffffff;
font-weight:bold;
}
#navigation a:hover {color:#ff6600;}
still to be explained in more detail...
Shorthand properties
It's nice to be able to use the "shorthand" properties for font and Background. But sometimes it does not work, especially in Internet Explorer.If something like
background:url(img/fade.jpg) repeat-y;does not work, try splitting it into individual properties:
background-image:url(img/fade.jpg);
background-repeat:repeat-y;
Useful sites
- Why tables for layout is stupid comic guide to using CSS sensibly
- CSS Sketchbook some good css example, including tabbed interface
- position is everything Css bugs and how to sidestep, lovely layouts
- applook.com tabs, with css but see also...
- alistapart ...the sliding doors technique for variable width tabs
- Listamatic style samples for single- and multi-level menus
- list-o-matic to generate (single level) menus
- layoutomatic to generate layout code
- cutting edge css, e.g. nice hover effects
- Eric Meyer CSS guru
- stu nicholls CSS playground with some interesting ideas
- Box Model Hack page discussing variations on the infamous box model hack
- CSS-discuss lots of stuff - all questions answered
- W3C provided most of these links