Lists and more CSS

webdesign 6

General text structuring · Lists · Example · Changing the display of the list · Homework · Links

General text structuring

  • Headers: <h1></h1> (to <h6>)
  • Paragraph: <p></p>
  • Force line break: <br/>
  • Force no line breaks: @...@
  • Non-breaking space: &nbsp;
  • Word may be broken here with hyphen: &shy;
  • Optional word break without hyphen: @@


Unordered List: <ul></ul>
Ordered List: <ol></ol>

List element: <li></li>



Changing the display of the list

li 	{
	display: inline;
	border-right: 1px solid;
	padding: 0 0 .33em;

li:first-child {
	border-left: 1px solid;


Create your own stylesheet for your project which should contain at least 3 definitions. Reference this stylesheet from your HTML pages, one of them containing an ordered list.


Using CSS (German): http://
Embedding in HTML (German): http://