Further CSS Properties

Menu
Menu

List Styles

In CSS, lists have their own set of properties that control the styling of both ordered (using <ol>) and unordered lists (using <ul>).

We can use list-style-type to change the bullets with values of:

circle
Hollow circles for unordered lists.
square
Solid squares for unordered lists.
decimal
Numbers (1, 2, 3, ...) for ordered lists (ie the same as <ol>.
decimal-leading-zero
As above but with leading zeros (01, 02, 03, ....)
lower-alpha
Lowercase letters (a, b, c, ...) for ordered lists

The shorthand list-style:none will remove any form of bullets. Be aware this will leave the default padding-left of the <ul> so when applied is done so with a padding reset.

float

Prior to Flexbox and Grid one of the main techniques used for layouts was float. These days float has been relegated to its original intended role, of moving / 'floating' content to the left or right of other content. The main use case for this is the positioning of images to the left or right and allowing text to flow around them.

Note: Content is 'floated' left or right. There is no float centre option. Use other techniques like margin:auto or Flexbox to align content to the centre.

See the Pen Float and Images by Martin Cooper (@mustbebuilt) on CodePen.