COM271, Week 4
Styling Links and Lists
Pseudostates and lists within lists
Syllabus | Table of Pages | Assignments | References and Useful Links
Links
Underlined Links: The default underlining of links (<a>) can be removed with text-decoration:none.
Link States: Links provide important feedback to users, depending on their past history or current use, referred to as states. Each state can be styled using CSS pseudostates:
- Normal—a or a:link
- Visited—a:visited
- Hover (mouse over but not being clicked)—a:hover
- Active (in the process of being clicked on)—a:active
Each state can be styled uniquely to provide users a visual response to state. Feedback should be limited to color, background, and border effects. Do not alter font weight, size, family, etc., as changes in the size of the content box will make the link and surrounding page elements appear to jump.
When setting link pseudostate rules, do them in this order:
- a:hover comes after a:link and a:visited
- a:active comes after a:hover
Use LoVe-HA! to remember the order, link>visited>hover>active.
Project 5 in our text Eric Meyer on CSS and projects 5 and 6 in More Eric Meyer on CSS emphasize styles for links, links embedded in list items, and use of CSS to style drop down menus made of nested links.
Lists
List Margins: The list elements (ol and ul) and list items (—) each have default spaces and indents. These can be controlled by setting appropriate margins on each element.
List Item Styles: Lists are ordered (<ol>) or unordered (<ul>) text rendered with indents and markers. The attribute list-style-type can turn off or change the markers, including symbols and counting systems. Marker values include disc | circle } square | decimal. Numerical values include decimal (1,2,3)| decimal-leading-zero (01, 02, 03) | lower-roman (i, ii, iii)| upper-roman (I, II, III)| lower-greek (classic greek symbols)| lower-latin (a, b, c)| upper-latin (A, B, C). The value none displays no marker.
List Item Images: If the regular style markers won't do, you may substitute images, using the attribute list-style-image with a value url(directory path).
Positioning List Items: Markers are usually placed outside of the list. You may move it inside using list-style-position:inside:
- This is a normal position
- This is list-style-position:inside
- This is a normal position again
Combining List Styles: The single attribute list-style can take the values of the other three list attributes. For example,
li { list-style: url(left_arrow.gif) disc inside; }
Spacing: Different browers may indent or assign lines above or below lists in various ways. To attain control, set both margins and padding on both list and list item elements.