styling lists
Lists are one of the best setup for any CSS designer - very versatile and used for a good semantic page structure. We will have a look at the different types of lists - and set up a categorised menu structure.
lesson content
- using lists for menu and submenu structures
- styling lists (ol, ul, dl)
- list style images
- good working practices
lesson notes
- considering the box model - any list in itself should be understood as a box - with boxes inside, giving you access to extensive custom styling
- lists can not only be used to layout standard listed items but are also suitable for elements such as menus, galleries, tutorials and much more
- before deciding which HTML elements to use - consider carefully their context and meaning within the page and site
- navigational elements such as the main site menu are a list of site links, therefore using a list is meaningful markup
- ul = unordered list, ie each list item will be default be preceded a bullet
- ol = ordered list, ie each list item will be default be preceded a number
- dl = definition list, the only list which contains 2 list elements: dt = definition term, dd = definition description
- lists display slightly offset within your page by default - you will therefore need to use margin to bring the list inline with your overall page content
download PDF
net talk
- alistapart.com CSS Design: Taming Lists (by Mark Newhouse)
- simplebits.com
Styling Nested Lists - meyerweb.comLists and Indentation
net references
- w3schools.com CSS list properties
- tizag.com CSS Lists
- cssbasics.comList Style
No Comments »
No comments yet.
Leave a comment