It’s aimed at people who run a business or are responsible for their company’s site or application and who have a basic grasp of the technologies involved:
An introduction to CSS—and 5 good reasons why you should use it on your web site.
Here’s one of those things that sounds too good to be true—a simple, web-based language, which, if applied correctly, can save you money and enhance your website or your web application.
A bold claim, indeed. But what is it?
Cascading Style Sheets (CSS)—it’s not an expensive technology, which has to be licensed for use, or complex programming language, but rather a way of ordering HTML in web pages, and any competent web designer or developer should be able to apply it. We’ll look at the benefits to be gained by using it and see how it can be used to reduce expenses in both web development and support.
To understand the role and impact of CSS, we quickly need to discuss HTML. HTML is essentially a code, a set of instructions which underpins all web pages and instructs the browser how to display text and other content. The user doesn’t see the HTML code, but sees the formatted text, for example, on a web page as a result of these instructions.
At its most basic level, the “instructions” in HTML are contained within angled brackets, “< >”, called “tags”, and with them, developers can tell a browser which text should be formatted and they can be used to control just about any aspect of the text you can think of: colour, size, font, position, etc.
Sounds good, doesn’t it? Developers and designers can just specify how they want content displayed, can’t they?
In theory, yes, but there is no standardisation on how exactly that text should be represented, largely because specific browsers are implemented in different ways and these differences mean that content is often displayed differently depending on which make of browser you use.
Furthermore, probably the biggest disadvantage with simple HTML—controlled content is that if you want to change something on a site, even one with just a few pages, you’ve got to delve into the HTML code and change it manually.
And if you have a number of changes to make on your site or in your application—say you want to change the colour of certain headings to match your new logo—the designer will have to go through the code, line by line, and make the change to the headings wherever applicable – and that’s going to take time, even on a site or application with multiple page templates.
To solve this problem, CSS was developed. A CSS file is a collection of styles, which the designer wants to apply consistently to all relevant HTML tags on a web site (for example, heading colors). The HTML code references the CSS file (or the CSS styles, which can be embedded directly within the HTML itself); either way, when you need to change the format of text with similar properties, you need only change one line in the CSS file or the CSS-specific code. The browser will then read the changes from the CSS and present them on a web page accordingly.
Essentially, the people behind the web standards, which strive to simplify and streamline the use of web technologies, have come up with a solution which separates the actual content from its presentation. Content is information on the page; presentation is the way users see the information – and since CSS is responsible only for design and HTML pages can be instructed to read the design code from a CSS file, that goal is met.
Change the CSS file and you change the way the content looks. And it can be quite dramatic. To see just how different CSS styles can be applied, visit www.csszengarden.com, which exemplifies the principles of CSS—although the web pages share the same HTML, you get different designs, just by implementing a different CSS file.
Already, we can see that use of CSS will save your web designer time (and you money); and what about the other benefits we mentioned? Read on…
1. Speed up development time
A customer needs to change the functionality (add or remove some web site functions). CSS makes it easy for developers to do that due to the transparency of the HTML (the content). Since presentation is handled by CSS, it’s unaffected by any changes to the functionality. Thus, programmers can work faster, as they don’t have to worry about their changes affecting the design of the web site.
2. Ensure compatibility of output
When CSS files are separate from the HTML, it’s easier for developers to ensure compatibility when outputting the page content to equipment like printers, sound devices, etc. CSS allows you to view one thing on the screen, but to print the page in a different, reader-friendly format, for example, without printing out a colour-saturated background as it appears on the web page, thus saving you ink.
3. Make it easier to adjust your site to new browser versions
Separating web design in this way also makes it easier to adjust a site to new browser versions. When a new browser or a version of browser appears, developers need only make changes to the CSS to see their web page displayed the same way as before.
4. Overcome differences in screen resolution
If a web page has not had CSS applied, the presentation can be affected by screen resolution—a web page may not fit on narrower screens or there may be a lot of free space on wider screens. CSS allows content to be resized along with the window, which helps maintain a universal presentation.
5. Level the playing field for users
Users with specific operating systems tend to use specific browsers to view web pages: e.g. Safari on Macintosh operating systems; Firefox on Linux; Internet Explorer, Opera or Firefox in Windows. When you use the CSS technology, you level the playing field and can avoid the variations in display rendered by the different browsers.
In conclusion, CSS helps you simplify the structure of you site or web application by keeping the content and presentation separate. Thus, when changes need to be made, they can be made quickly and more easily, without impacting on other areas of the site – saving you time and money.