Web Terms: CSS Explained

In the world of web, there are all kinds of acronyms and new words that many aren’t familiar with – especially if they’re on the other side of the table from the developer.  Our series of posts will take some common web terms and break them down for those of you looking to expand your knowledge of websites and their integral parts.

This week’s topic is CSS, otherwise known as Cascading Style Sheets.  CSS is a  format which serves as an overall styling guide for the website.  Formally, it’s a set of rules which are then incorporated via XHTML or HTML into output on the web.  In layman’s terms, it’s a way to define layout, spacing, colors and other styles for your website.  For example, you could use CSS to easily define that all links should be bold, hot pink and underlined throughout the site, and turn neon green when the user hovers over them.

There are several benefits of using CSS to define the style for your websites / web pages:

  1. Separation of content from styling.
    CSS styling rules separate the actual content of your site from the information/rules on how that content should be displayed.  Because the two are separated, it makes it easier to change both. The separation also results in cleaner, less cluttered code, presumably reducing future maintenance costs.
  2. Consistency
    Your website should certainly be considered part of your ‘brand’… and when it comes to branding, consistency is very important.  Consistency also makes for a more user-friendly environment.  For example, having a consistent color scheme / output for links helps users understand what is a link (and what is not) throughout your website.  Without consistency, it’s easy for users to be confused.
  3. SEO
    Search engines like to cut to the chase as fast as possible, so they don’t like to sort through a bunch of code that has nothing to do with the actual content / information being displayed to the users.   Prior to CSS, web pages were designed using a bunch of tables to “map” out the layout.  As each table, row and cell had to be defined in the process, there was a lot of extra code search engines had to sift through.  With CSS (often contained in separate files), the amount of code is cut down considerably making it easier for search engines to “read” (or index) the content.

  4. Time to load
    Because CSS requires much less code to accomplish the layout and styling rules needed to layout a web page, the actual pages can load faster (for the browser or search engines).
  5. Precise control
    CSS, especially with its ongoing additions / improvements allows for precise control (down to the pixel) of most elements in web pages allowing designers to dictate exactly where these elements should be located.  While browser compatibility is always an issue, techniques can be used to ensure that consistency in control can be utilized across all browsers.
  6. Efficiency
    Because styling rules are defined in one place, design and layout changes can be made relatively fast.  Using the same example we used above, if we wanted to change the color of all of the links throughout our entire website from hot pink to orange, we could do so by changing one line of code.

  7. Multiple outputs
    CSS is a great tool for identifying types of output (screen, mobile, print) and offering different style rules for each so the content can be displayed in a format that’s useful for the users needs, without having to create duplicate content formatted in different ways.

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments are closed.