Things I Learned from Learn to Code HTML & CSS, Lesson 8

Here are some things I learned from Lesson 8: Creating Lists of Learn to Code HTML & CSS by Shay Howe.

Ordered Lists

Start Attribute

The start attribute defines the number from which an ordered list should start (default: 1).

The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.

Reversed Attribute

The reversed attribute allows an ordered list to appear in reverse order.

The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. False is the default value; the value becomes true when the attribute name reversed appears on the <ol> element.

Value Attribute

The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. The number of any list item appearing below a list item wih a value attribute will be recalculated accordingly.

Description Lists

Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.

The description list, <dl>, requires two block-level elements: the description term element, <dt>, and the description element, <dd>.

A description list may have multiple terms per description, as well as multiple descriptions per term.

The <dt> element must come before the <dd> element.

By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements. Additionally, the <dd> element includes a left margin by default.

Nesting Lists

Every list may be placed within another list. However, lists should still be reserved specifically for where they hold the most semantic value.

The only element we can place as a direct child of the <ul> and <ol> elements is the <li> element.

Once inside the <li> element, the standard set of elements may be added, including any <ul> or <ol> elements.

List Item Styling

List Style Type Property

Any list-style-type property value can be added to either unordered or ordered lists. In other words, it’s possible to use a numeric list item marker on an unordered list and a nonnumeric marker on an ordered list.

List Style Type Values
List Style Type Value Content
none No list item
disc A filled circle
circle A hollow circle
square A filled square
decimal Decimal numbers
decimal-leading-zero Decimal numbers padded by initial zeros
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numerals
lower-greek Lowercase classical Greek
lower-alpha / lower-latin Lowercase ASCII letters
upper-alpha / upper-latin Uppercase ASCII letters
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering

Using an Image as a List Item Marker

We can place a background image on each <li> element within a list.

The process includes removing any default list-style-type property value and adding a background image and a padding to the <li> element.

List Style Position Property

The list-style-position: outside default property value places the list item marker to the left of the <li> element and doesn’t allow any content to wrap below the list item marker. The inside property value (which is rarely used) allows content to wrap below it as needed.

Shorthand List Style Property

For example:

ul {
  list-style: circle inside;
}

Horizontally Displaying Lists

Displaying List

The quickest way to display a list on a single line is to give the <li> elements a display property value of inline-block (or inline).

The list item marker is automatically removed.

Floating List

If the list item marker is needed, floating each <li> element is a better option.

When floated, the list item marker will sit on top of the <li> element. To prevent this, a horizontal margin or padding should be added.

Remember to clear the floats with clearfix.

Leave a Reply

Your email address will not be published. Required fields are marked *