Cascading Style Sheets 3.0 Tutorial

Here a tiled background is used:

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

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

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: 5px 5px 7px rgba(0,0,0,0.5);
}

Document Heading

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.

disc circle square
  • number 1
  • number 2
  • number 3
  • number 4
  • number 1
  • number 2
  • number 3
  • number 4
  • number 1
  • number 2
  • number 3
  • number 4

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

decimal decimal-leading-zero lower-alpha
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
lower-roman upper-alpha upper-roman
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4

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
<< < [Page 13 of 15] > >>