CSS FAQ

work is slowly underway to update and finish this, particularly since it got googled last week.

If you found it useful, by all means let me know at [email protected].
Equally, if you didn't find the answer to your question, mail me anyway and I'll see if I can help.

Cheers.

How do I remove/set page margins?

To remove page margin with css use:

body{
	margin:0;
	padding:0;
}

margin:0 works for both ie5+ and ns6+, padding:0 works for opera. This will replace the leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" attributes on the body tag

Can that be done in netscape 4?

Contrary to popular belief it can, you just need to use:

body{
	margin:-10px 0 0 -10px
}

html body{
	margin:0;padding:0
}

(found on http://www.mark.ac/help/)

Removing indent on bulleted lists

To remove the indent on bulleted lists use:

ul{
	margin:0;
	padding:0;
}

again, both margin and padding are required to be set since mozilla uses padding and IE uses margin.

Examples

Bulleted list with a left margin of zero.

Bulleted list with a left padding of zero.

Styling bullets

To change the style of bulleted lists use the following:

li{
	list-style-type:square;
}

Example

disc
circle
square
decimal
upper roman
lower roman
upper alpha
lower alpha

Further styling bullets

If those styles aren't enough you can also do the following to use an image inplace if the normal bullet:

li{
	list-style-image:url(/images/yourimage.gif);
}

Example

smiley
rolleyes
shocked
grin
wink

How do I add coloured scrollbars

Use the following

body{
	scrollbar-3dlight-color:;
	scrollbar-3dlight-color:;
	scrollbar-arrow-color:;
	scrollbar-base-color:;
	scrollbar-darkshadow-color:;
	scrollbar-face-color:;
	scrollbar-highlight-color:hotpink;
	scrollbar-shadow-color:magenta;
	scrollbar-track-color:purple;
}

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm

I did that but it doesn't work

Its only supported on IE 5.5+. If your site uses a doctype that puts IE into strict mode you'll have to adjust your css to:

html{
	scrollbar-3dlight-color:;
	scrollbar-3dlight-color:;
	scrollbar-arrow-color:;
	scrollbar-base-color:;
	scrollbar-darkshadow-color:;
	scrollbar-face-color:;
	scrollbar-highlight-color:hotpink;
	scrollbar-shadow-color:magenta;
	scrollbar-track-color:purple;
}

Why? And should I add them at all?

When in strict mode, IE interprets you document as being the HTML tag, not the BODY tag.[[need better explanation]]

Scrollbar CSS isn't part of the css spec YET. Whether it should be or not is open to some debate. Read some points of view here <<list of url's>> and make your own mind up. Just because something isn't in the spec doesn't mean it shouldn't be or won't be.

Whats the difference between classes and ID's

Simply put a class can be used multiple times in a document whereas an id is only meant to be used once. Classes are denoted with .classname, id's by #idname.

Classes should be used where more than one element requires the style to be applied to it., ID's are more commonly used to 'group' content together to give it a more logical structure.

[links to id vs class threads]

CSS selectors

Some selector basics

.classname means 'apply this style to any element with the class'
p.classname means 'apply this ONLY to paragraph tags with this class'
.classname p means 'apply this style to <p> tags WITHIN an element with this class'
p.classname span means 'apply this class to any span tags within a paragraph that has classname applied to it.

Styling tables

To give tables a single pixel border use the following:

table{
	border:1px solid #000000;
	border-collapse:collapse;
}


td{
	border:1px solid #000
}

Some Examples

unstyled table

No styles applied in css and html attribute left as per browser defaults

column 1	column 2	column 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

table border

The table tag only has a 1 pixel black border applied

#table1{
	border:1px solid #000
	}

#table1
column 1	column 2	column 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

table and cell border

The table tag has a 1 pixel black border applied, each of the table cells have a 1 pixel red border. The header cells are left unstyled. The second sample has the cellspacing="0"

#table2{
	border:1px solid #000
	}
	
#table2 td{
	border:1px solid #f00
}

#table2a
column 1	column 2	column 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

#table2a
column 1	column 2	column 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

1 pixel cell border

The table has a 1 pixel black border applied to it and its border-collapse property is set to 'collapse'. Table cells have a 1 pixel blue border set.

#table3{
	border:1px solid #000;
	border-collapse:collapse;
}

#table3 td{
	border:1px solid #00f;
}

#table3
column 1	column 2	column 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

Styling forms

Css and form elements is very browser specific, most will give unusual results in netscape 4.

Textareas and textboxes can have most attributes set including borders, margins, paddings and colors.

textarea{
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-bottom:1px solid #555;
	border-bottom:1px solid #555;
	background-color:#ccc;
	font-family:"comic sans"
	color:#fff;
	font-weight:bold;
}

dropdowns

dropdown boxes can also be styled to a certain extent depending on browser. To change the appearance of the items in a dropdown, apply the css to the <option> tag. The <select> tag still resists most attempts of styling.

need some research

Checkboxes and radios

Need some research

styling 'input type=file' elements

These are particularly impervious to attempts to style them via css or indeed any other means [security reasons, needs research/links]

Removing form margins

Don't do this:

<table>
	<tr>
		<form>
			<td></td>
		</form>
	</tr>
</table>

to remove the space around forms, it's invalid html.

Try adding:

form{
	margin:0;
}

downside: it won't work in NS 4

CSS and units

Units are required in css although most browsers will work without them. 0 however is 0 is zero. You do not need to write 'margin:0px' or 'padding:0em;' but it does no harm if your testing values.

Link or @import??

Both are valid methods of applying css to a document. @import is more flexible because it can be used within other stylesheets in a similar manner to serverside includes.

It's other advantage is that it is not supported by netscape 4 and can therefore be used as a means of 'hiding' css that could cause this browser grief.

Downside: not much, opera supports @import but doesn't support a few useful pieces for css such as overflow:auto; meaning that traditional javascript or server-side browser detection is still required.

<<link to threads on @import vs Link>>

Correct order of :link etc.

	a:link{...}
	a:visited{...}
	a:hover{...}
	a:active{...}

a:hover doesn't work in NS4 and opera

Multiple link styles

	a.myclass1:link{...}
	a.myclass1:visited{...}
	a.myclass1:hover{...}
	a.myclass1:active{...}
	
	a.myclass2:link{...}
	a.myclass2:visited{...}
	a.myclass2:hover{...}
	a.myclass2:active{...}

applied like so:

	<a class="myclass1" href="#">link one</a>
	<a class="myclass2" href="#">link 2</a>

Spacing between heading tags

This can be adjusted using the margin property:

h1{
	margin:0;
}

doesn't work in NS4

Dotted border style doesn't work in IE for a 1px border

IE will interperate it as dashed if the width is set to 1px. No workaround at present, just don't rely on a dotted border.

other ideas

print style sheets
any well known borwser/platform problems/workarounds worth mentioning
css layout techniques (difficult to keep things short and to-the-point)