Category: WebTeacherTips

This week I’ve been sharing some material I wrote as handouts for a CSS class at UNM Continuing Ed. Here’s the one about styling lists.

Styling Lists

Lists are probably the most useful element on the web. They make things easier to read and they are great for navigation.

Bullet/numeral styles

For list-style-type on an unordered list, the options are square, circle, disc and none.

For list-style-type on an ordered list, the options are lower-alpha, upper-alpha, lower-greek, upper-roman, lower-roman, none, and a few other language types besides English.

With list-style-image you can replace the bullet in an ordered list with an image.

li {list-style-image: url(bullet.gif);}

Position

You can set the list as inside or outside with list-style-position.

ul {list-style-position: inside;}

Lists for navigation

Here’s how to style a list that will display horizontally. First set the list-style-type to none to remove the bullets.

#nav ul {list-style-type: none;}

Next, make the list items display inline and float left. This will make the list items line up horizontally rather than going down the page vertically. You can also add background colors in this step. A little padding between the items is helpful so they don’t run together. You can also set a width here so the menu fits the width of your container.

#nav li {display: inline;
float: left;
padding: 2em;}

Finally make the link (a) elements display as block. You can also add borders, padding, colors and other styling in this step.

#nav ul li a {display: block;
text-decoration: none;}

See also: Selectors 101, Styling Text 101.

Here’s another of the handouts I prepared for a Continuing Ed class in CSS at UNM.

Styling Text

There are many ways to control the typography on your HTML pages.

Fonts

Fonts are chosen in font-families. Usually pick more than one. Pick fonts that are all serif fonts and then end the list with the generic ‘serif’ for good measure.

h1 {font-family: Georgia, "New Century Schoolbook", Times, serif;}

Font names that include spaces need to be quoted. For sans-serif fonts, do a similar thing.

h1 {font-family: Arial, Helvetica, Verdana, sans-serif;}

Font-Weight

The choices for this property are normal, bold, bolder, lighter.

Font-Size

There are a few keywords such as small, medium, and large but generally it is best to use a relative measure such as % or em.

h1 {font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 1.35em;}

Line Height

Line-height can be expressed as a separate value, or in shorthand, given in the font rule immediately after the font size.  To add to the rule above and change it to a shorthand font rule with line-height, we’d get:

h1 {font: 1.35em/1.4em Arial, Helvetica, Verdana, sans-serif;}

Indentation and Alignment

The text-indent property will indent the first line of a paragraph.

p {text-indent: 3em;}

Horizontal alignment uses the text-align property. Possible values are left, center, right, justify and inherit. (For left to right languages)

blockquote {text-align: center;}

Vertical alignment uses the vertical-align property. Possible values are baseline, sub, super, top, text-top, middle, bottom, text-bottom, or a value in % or pixels. These properties only apply to text in table cells and inline. It doesn’t affect vertical alignment within a block level element.

Text Transformation

The text-transform property can change text to uppercase, lowercase or capitalize. Capitalize only affects the first letter.

Text Decoration

The values for text-decoration are none, underline, overline, line-through, or inherit. This property is frequently used to remove the underline from links.

a:link {text-decoration: none;}

Text Shadows

The CSS3 property box-shadow can be used to add drop shadows to text or other elements such as images. It’s a nice effect on heading elements. In shorthand, you first give a horizontal offset, then a vertical offset, then a blur distance (if you want blur) and finally a color.

Add this to your stylesheet to see how it works.

img {box-shadow: 4px 5px 3px #999999;}

See also: CSS Selectors 101

I’m preparing some handouts for an 8 hour continuing ed class in Cascading Style Sheets I’ll be teaching at UNM. The class doesn’t get a book so I have to write everything up myself. I thought I’d share some of the handouts here. The first installment: CSS Selectors.

CSS uses rules to apply styles to selected elements in your HTML documents. A rule consists of a selector and a declaration block. The declaration block is composed of pairings of properties and values.

h1 {color: red; background: yellow}

In that rule, h1 is the selector. The declaration block contains two declarations, one setting the color to red, the other setting the background color to yellow.

Types of selectors

• Element selectors: These are HTML elements (or tags) such as h1, p, blockquote, li, img.
• Grouped selectors: You can select several HTML elements or classes at one time using a comma separated group of elements.
  h2, p {font-size: 1.4em;}
• Class selectors: These selectors let you target items that are independent of the HTML elements on the page. You create the names for these yourself. A rule for a class is preceded by a period in the stylesheet.
  .danger {font-weight: bold;}
  The class is then applied to an HTML element on your page:
  <p class=”danger”>Don’t drink Mercury.</p>
  More than one class can be applied to an element. Classes can be applied more than once on any given HTML page.
• ID selectors: These selectors are also independent of any HTML element on the page and use names you create yourself. An ID selector is used only once per page. In the stylesheet, it is preceded by a pound sign:
  #lead {font-weight: bold;}
  It is applied to an HTML element on your page.
  <p id=”lead”>What a great lede.</p>
• Attribute Selectors: These selectors allow you to choose elements based on some attribute they may have. For example, anything with the file extension .pdf or anything with a title attribute or anything with an href attribute. Here’s an example that selects something with a particular src attribute:
  img[src="img/students.jpg"] {border: solid 1px black;}
• Descendent Selectors: These rules apply in certain structural or contextual circumstances based on parent-child relationships in a document. For example,
  p em {color:red;}
  Would apply only to em elements that were nested in (or descended from) p elements.
  li.sidebar a:visited {color:blue;}
  Would apply only to visited links in list items that were within an element with the class sidebar.
• Adjacent Sibling Selectors: These select an element that immediately follows another element.
  h1 + p {margin-top:0;}
  That selects only p elements that are immediately after h1 elements.
• Pseudo-Class Selectors: These basically apply to the states that anchor (a) elements may have and include a:link, a:visited, a:hover, a:active, and a:focus. A few other elements can accept pseudo classes, but they are not supported in all browsers.
• Pseudo-Element Selectors: These insert “fictional” elements into a document .
  p:first-letter (font-size:3em;}
p:first-line {color:purple;}
h2:before {content: "]]"; color:silver;}
label:after {content: " *";}

Resources

Attribute Selectors: They’re Unicorns and Rainbows