css

CSS: How to Style Perfect HTML Lists (<ul><li>, <ol><li>...)

Here is an example of a default HTML list with no CSS styling:
  • This is what I consider an ugly HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let's fix this.

Here is an example of a styled HTML list:
  • This is what I consider a beautiful HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let's look at the code, shall we?

Create "Printer-Friendly" Pages with CSS and the @media Type

There may be a time when a visitor wants to print a page from your website. It's worth spending five minutes to create "printer-friendly" pages using CSS. (Tip: navigate to "Print Preview" on your browser to see how this page looks when printed out.) Some of you may already know about the <link rel="stylesheet" type="text/css" href="print.css" media="print" /> directive, however, it's better to place your print CSS within your main CSS file. Instead of having a separate CSS file for printing (which can increase the initial load time since the browser must make an additional HTTP request to the server before rendering the page), place @media print {... } at the bottom of your CSS file. It must be at the bottom to override your previous declarations.

Syndicate content