Pin Me

Why Should You Use CSS?

written by: Jennifer Wingard•edited by: Linda Richter•updated: 4/2/2010

CSS has been a major player in web development since its introduction in 1993, yet many new web developers continue to code their websites using HTML and tables to display information on their web pages. CSS offers an easier way to develop your websites, and it is relatively easy to learn as well.

  • slide 1 of 5

    What is CSS?

    Before you understand the need for CSS, you must first understand what it is. CSS is a stylesheet language designed to dictate the display properties of the structured elements in an HTML or XHTML file. CSS uses properties in conjunction with HTML elements to define the way a web browser should render an HTML document and it fulfills the goals of HTML developers to separate the style of a web page's design from its structure.

    HTML was designed to give authors define the structure of documents by placing segments of their document within tags that declare "this is a heading", "this is a paragraph", "this is a quote", as well as other divisions of the text. HTML defines these elements of a document with tags placed around the segments such as <h1>, <p>, and <q>. HTML was not intended to define the way the document was displayed; it's purpose is simply to define the structure of the document. As browsers were developed each browser's developers added additional elements to the HTML definitions to change the way the documents were displayed. The ability to change font colors, sizes, background colors and more were added by browser's developers but each browser had its own supported elements and there was no standardized styling format for HTML documents, requiring developers to write styles into their HTML documents and make hacks for the different browsers because each browser handled styles in their own way.

    To solve the problem of a lack of standardization in both HTML and style, the W3C (World Wide Web Consortium) was formed. The goal of the W3C is to set up standards for coding and scripting languages used for the web. CSS was adopted and implemented by the W3C and the consortium convinced browser developers to support the standards defined by CSS to create a more uniform way to display and develop web pages and documents. Currently, all browsers support CSS, although each browser differs slightly in their rendering of elements and styles. With the adoption of CSS standards, web developers can design and develop web pages that are displayed nearly the same in every browser.

  • slide 2 of 5

    Why Use CSS?

    Are you still wondering why you should take the time to learn a new language for writing web pages when what you're doing seems to work just fine? The following list contains some of the most advantageous reasons to begin using CSS to style your web documents, and we'll go over them in more detail.

    • Gain more control over the display and presentation of your content
    • Design without jeopardizing the structure of your page
    • Reduce the likelihood of validation problems and errors in your HTML code
    • Make site-wide changes with ease
    • Minimize download times and bandwidth usage
    • Enable screen readers to deliver the content of page in a preferred order
    • Allow users to change the styles they see
    • Reduce time and frustration of coding
    • Make your pages accessible to a wider variety of devices
    • Improve site usability and readability
  • slide 3 of 5
    Save Time by Using CSSUsing CSS can save you a lot of time when building a web site, making your work much more productive. Find out more about the benefits of using CSS.CSS, why use CSS, web design with css
  • slide 4 of 5

    Save Time and Increase Productivity

    By separating style from structure in your web documents, you reduce the amount of time needed to code your web pages. Most HTML-only documents are displayed by arranging everything within tables. You could have many tables nested within each other, creating a staggering amount of code to not only write, but also to wade through when errors are discovered that must be fixed. Changing the layout, design, or even the colors of your pages and elements can be overwhelming and frustrating when there could be hundreds of code snippets to change for just one web page. Removing the style from the HTML and styling with the use of CSS can cut out most, if not all, of the structural changes needed to change the design of a page. With a stylesheet, you can declare a new value for a property on just one page (your stylesheet) and it will apply the change to every page of your site. You've effectively changed an entire site with just a few keystrokes and minimal searching for the correct field to change.

    Not only will you decrease the amount of time needed to code your website, but you'll also lessen your chances of making an error or accidentally changing the structure of your page. The more you have to type into your pages, the higher your likelihood of typing the wrong thing or accidentally deleting a necessary tag, element, or property.

  • slide 5 of 5

    Improve Usability

    Not all web users are created equal. Some visitors to your web page will have poor eyesight. Some will have to use screen readers. Some users will have problems such as colorblindness. Each of these users is as important to your website's success as any other user. By creating your web pages in a usable, accessible manner, you will enable all of your users to view your pages in a way that is best for them. By using CSS to organize your site's design, you allow yourself to create pages that flow in a preferred sequence. Using tables to design your page, breaks up information into disjointed segments that will be difficult to understand when read by a screen reader. Taking the time to learn and use CSS will enable all users who visit your site to receive the information in the intended order, or to view it in a way that suits their needs. By allowing a user to change the way they view a page, you're increasing the value of your website to those users who struggle to view information at many websites and setting your website apart from many others who do not cater to the needs of users with special needs. Formatting your design with CSS enables users to edit the way pages are displayed in their browser and each time they come back to your website, those changes they made will show up for them, enabling them to view your content with ease.

    In addition to users with special needs, a web developer must also consider users who are not viewing their website on a typical computer screen. With the growing popularity of internet-enabled mobile devices, many users surf the internet via PDAs and cell phones. Using CSS enables you to create specially designed stylesheets tailored to display your web pages on mobile devices, enable simplified print views, and more.

    Perhaps the most immediately advantageous reason to use CSS is the decreased amount of work involved in coding even the simplest pages, but the other reasons are no less important. Complying with web standards will ensure that your web pages are suitable for your entire audience to view with ease.