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.