What are Cascading Style Sheets (CSS) in Website Design?

What are Cascading Style Sheets (CSS)?

Style sheets are a way to define and style the look of website pages. Style sheets allow web developers to separate the content code and design code. This allows the HTML to be used for the markup (programming) of the content and not the website design and layout. It also helps reduce code duplication.

The “cascading” part is where things start to get interesting.

The best way to explain CSS is to visualize a waterfall. Imagine the water is cascading down over the all sorts of rocks, both big and small on its way to the bottom. Along the way, several rocks help guide the water, but only the ones at the very bottom determine how it flows into the lake or river.

When multiple inter-connected style sheets are used instead of a single style sheet they are referred to as cascading style sheets. This means the information flows freely from one style sheet to another.

Cascading style sheets are used:

• On the surface to define the look and style or design of websites and web pages
• Behind the scenes to style the XHTML and XML markup
• For use offline to define how the site should look when printed

Cascading style sheets give web developers and website owners advantages such as:

• Consolidated Design Information
  CSS files contain all of the website’s style code everything to do with the look of your site can be found in one place. They are linked to the appropriate pages with the HTML tag.
• Better Stylistic Control
  CSS allows for control over many aspects of the website appearance that cannot be controlled with pure HTML.
• Semantic Content Markup
  When using CSS to define the design elements and appearance of a website (aesthetic markup/programming), the HTML code is then used for content (semantic markup/programming). This makes it easier to understand the code and find information when you need to make a change.
• Search Engine Optimization
  With CSS, your website page code is cleaner and easier to navigate. That means there is less non-content related code for the search engine spiders to scan while analyzing your site. This also helps your website’s keyword density.
• Increased Accessibility
  Cascading style sheets help make your website more accessible for the visually-impaired. Using CSS almost eliminates the audio trash generated by aesthetic code that has nothing to do with the page content. An aural browser, used by the visually impaired ignores the visual properties defined in the CSS.