How Modern Websites Use CSS - dummies

By David Karlins, Doug Sahlin

External style sheets are files outside of (but linked to) HTML pages that supply style and layout to web pages. Cascading style sheets are one example of external style sheets. The following are reasons why including external style sheets in your web pages is a good thing:

  • CSS styles are much more powerful than older, HTML-based tools for page design. For example, the layout with HTML tables requires designers to contort table rows and columns into containers for content. With HTML, you have little control over parameters like the spacing between and within those table cells, or the specific borders on the top, bottom, or sides of the table cell.

  • CSS, on the other hand, can turn a rather generic HTML tag — a DIV tag — into an almost infinitely formattable container for any kind of content.

  • CSS classes and IDs are special styles that are at the heart of modern page design. These CSS classes and IDs have replaced HTML tables as the standard technique for laying out web pages. Tables used cells, created by the intersection of rows and columns, as placeholders for content. This technique was clumsy and limited, compared to the freedom available with ID- and class-defined page layouts.

  • External style sheets, such as CSS, allow for global styling, which has common elements across all the HTML pages in a website. Need to change the color scheme on 17,412 pages in 5 minutes? No problem with an external style sheet — you simply update the CSS file, and all the HTML files that link to that style sheet instantly update in browsers.

When using CSS, you can

  • Easily make global changes to how your content is presented. If styles are applied using external style sheets, they can be used to instantly change the appearance of every page to which they are linked. This is an indispensible productivity tool in large websites.

    Imagine having to find all the font tags and change them in an extensive website. Using a simple Find and Replace effort often doesn’t work because of the inconsistent way tags are coded. It’s possible to have hundreds of variations of the font tags — that all look the same on the web page but are coded differently — which makes using Find and Replace utilities useless.

  • Easily discern the original meaning of your content. When working with older, “anything that makes it look good” type techniques that employ HTML tags for formatting and design, you often can’t tell what the different parts of the page content are just by looking at it.

    Old-style HTML allows for using tags improperly, such as applying properties to a font tag that makes a paragraph tag display as though it were a heading. Not easy to fix. If you manage to strip out the old font tags, you also strip out the visual cues that can help you to re-code the page properly.

    For example, if you set up your page as a block of content with <br> tags to separate it visually into paragraphs and <font> tags to make headings look different, it’s difficult to figure out what it was if the tags are disrupted or deleted.

  • Make your site friendly to all who visit — no matter where they are or what their situation is. Increasingly, people using the web don’t use a traditional computer. Instead, they use tablets, smartphones, and other digital devices. With CSS and HTML, you can detect a visitor’s browsing environment and provide different style sheets that display content in a form appropriate to the visitor’s media.

  • Relying on CSS and HTML also makes sites more accessible to hearing- and vision-impaired users, who have reader software or other special tools that work better if you avoid using HTML tags for formatting.

    Again, some users will have customized style sheets so they can use the Internet. Someone might need to enlarge font sizes or to specify how a screen reader aurally signals different parts of a document to compensate for visual impairments. Information about aural style sheets can be found on the World Wide Web Consortium (W3C) site.