Andrew Maner in Week 8

Week 8 - Lists, Tables, & Forms

LISTS

BULLET POINT STYLES

With the list-style-type property, you can control the apperance of bullet points (also known as markers). It can be used with <ol>, <ul>, and <li> tags.

When used with unordered lists, list-style-type can take the values none, disc, circle, or square.

When used with ordered lists, list-style-type can take the values decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, and upper-roman. (The paragraphs below should read "ordered list" and not "unordered list.")

IMAGES FOR BULLETS

You can use list-style-image to specify an image to serve in place of a bullet point. You can use this property with <ul> and <li> elements.

MARKER POSITIONING

You can control the indent of a list's markers using the list-style-position property. With the outside value, you have the default positioning - markers to the left of the block of text. With the inside value, the marker will be inside the block of text (which is itself indented).

TABLES

TABLE PROPERTIES

You have already seen these CSS properties used to style other things (like divs, for example), but they are particularly useful when styling tables:

  • width - set the width of a table
  • padding - set the padding within table cells
  • text-transform - convert table headers to uppercase
  • letter-spacing and font-size - add styling to the table's cell and header contents
  • text-align - align the contents of cells
  • background-color - change the background color of a cell or row
  • :hover - highlight a row when moused over

Note that the example below shades alternate rows. This is a good practice, as is consistent padding, distinguished headings, and aligned numerals. All are illustrated in the example table.

BORDER ON EMPTY CELLS

You can use the empty-cells property to show or hide whether the borders of empty cells should be shown. It takes three possible values:

  • show - show the borders of empty cells
  • hide - hide the borders of empty cells
  • inherit - for nested tables, the inner table will take whatever rules the outer table has

GAPS BETWEEN CELLS

Browsers typically leave a small amount of space between each table cell, so you can use the border-spacing property to control this gap. Setting this value to zero (0) can have an unfortunate effect on cells with borders, though. Borders add (and thus double) when two borders meet, so you can use the border-collapse to collapse adjacent borders into a single border.

STYLING FORMS

STYLING TEXT INPUTS

The most commonly used CSS properties when styling forms are:

  • font-size - set the size of user-entered text
  • color - sets the text color
  • background-color - sets the iput background color
  • border - adds a border around an input box
  • border-radius - rounds the cornders of an input's border
  • :focus - this pseudo-class is used to trigger style changes that take effect when the given input is being used
  • :hover - used to trigger style changes that take effect when the input is being moused over
  • background-image - used to set a background image for an input element

In the example below, the second image shows the default state, while the third shows the apperance when the first input is active and the third is being moused over.

STYLING SUBMIT BUTTONS

The following properties can be used to style submit buttons. This example reuses the previous example's code, and simply adds a styled submit button.

  • color - is used to change the color of text on the button
  • text-shadow - is used to give a 3D apperance to the button's text
  • border-bottom - used in this case to make the bottom border of the button slightly thicker, giving it a bit of a 3D effect
  • background-color - used to change the button's background color (to a gradient in this case)

In the example below, a gradient has been applied to the submit button. It is reversed when the button is hovered over. This is a subtle effect, so it is easy to miss in the bottom screen shot.

STYLING FIELDSETS & LEGENDS

You'll recall that fieldsets are used to surround common elements of a form, and are useful to define the edges of a form. Legends are used to indicate what will be collected inside of the fieldset. The following properties are commonly used to style fieldsets and legends:

  • width - used to set the width of the fieldset (and can be used to force input elements to wrap, as is done in this case)
  • color - used to set the text color
  • background-color - used to set the background color of input items and, in this case, the legend
  • border - used to control the fieldset's border, and that of the legend (in this case)
  • border-radius - used to round the borders of the fieldset and legend borders
  • padding - used to add space inside form elements

ALIGNING FORM CONTROLS

As we've already seen, creating a form in HTML results in a poorly-aligned, jumbled mess. You use CSS to fix this. In the example below, we use the float property to move the titles to the left side of the page. We then use the width property to control precisely how much space the titles will take up (the same). Since the titles line up, so will their input fields. In addition, the text-align property is used to right align the titles, and padding is used to provide agap between the title text and the form controls. Additional styles are given to the divs and spans to clean up the form.

WEEK 8 HOMEWORK

Present what you have so far for your final project design, and discuss how you will proceed. (This will be done in the second half of class during week 8.) By week 9, have your HTML completely fleshed out and ready for discussion in week 9.