CSS Styles Without IDs And Classes


CSS Styles Without IDs And Classes

Many designers feel like they have to add an ID or Class to every HTML element they want to apply a style to. Fortunately, with CSS, you don’t have to. CSS can apply styles to HTML elements without using an ID or Class.

Styles can be applied to any HTML element, including the BODY, TABLE, TD, P, and LI elements. Here’s an example of the type of styles you could apply.

  • body { margin: 0; }
    Controls the margin of the viewable page
  • body,p,div,li,td {font-family:arial,sans-serif;}
    Sets the font for all of the elements listed
  • td {vertical-align:top;}
    Makes all table data vertically align to the top
  • h1 {font-weight:normal;margin-bottom:.4em;}
    Modifies the default header settings
  • ul { padding: 0; margin: 0; }
    li { list-style-type: none; margin: .6em 0 .6em .5em;font-size: 75%; }
    Controls how lists appear

Why should designers do this? First, it’s just good design. It’s always ideal whenever a designer can harness the power of a technology, and find a simpler solution. Second, it makes pages thinner. Thinner pages mean better SERPs, and quicker pages. Third, there’s less to update. You’ll no longer have to update and rename IDs and Classes in your HTML documents. Instead, you can just update the CSS document.

Comments are closed on this post