Cascading Style Sheets: Tutorial - Page 13

Here a tiled background is used:

#main {
	padding: 10px;
	background-image: url('backtile.png');
	background-repeat: repeat;
	background-position: 0% 0%;
}

Here are some example tiles. The contrast should be lowered before using them as background.

Box Shadows

For box shadows, use the box-shadow property. For example, to set a horizontal offset of 8 pixels and a vertical offset of 8 pixels and a blur distance of 7 pixels:

#header {
	border: 1px solid #000;
	border-radius: 25px;
	box-shadow: 8px 8px 7px rgba(0,0,0,0.5);
}

Or, to set a shadow all around (notice the border has been removed):

#header {
	border-radius: 25px;
	box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

See this article for more information on box shadows.

Modifying the Style of Lists

Unordered lists (<ul> tag) use round-solid, round-hollow or square-solid bullets. Specify for the list-style-type property either disc, circle or square, respectively.

Ordered lists (<ol> tag) use different numbering schemes. Specify for the list-style-type property one of these values:

To remove the indent from the lists remove the bullets with this code list-style-type: none; and set the <ul> to have no padding and no margin: margin: 0; padding: 0;. This, for example, is how CSS menus are created.

To customize the list bullets or numbers:

ul li {
	list-style-type: none;
}
ul li:before {
	content: counter(item, square) " ";
	color: green;
}
ol li {
	list-style-type: none;
	counter-increment: item;
}
ol li:before {
	content: counter(item) ". ";
	color: blue;
}

• number 1
• number 2
• number 3
• number 4

• number 1
• number 2
• number 3
• number 4

Comment