the beauty and flexibility of css

redyarn
pin

Just say "NO" to table-based design!

This page demonstrates how one can use Cascading Style Sheets to make beautiful, functional web pages. Through the use of only CSS and HTML, I and others in my class designed web pages that show the variety of options available when writing standards-based code. I hope you continue to read to discover why CSS is important and why all web designers should use it to create a more user-friendly web experience.

pin

why css?

Style sheets exist, above all, to enable the following principle to be put into practice: Web pages should separate content from appearance.

As a developer this means that the information in your web site should go into your HTML files, but HTML files should not contain information about how that information is displayed. And you've probably guessed by now that information about how the pages should appear goes into CSS files.

You might wonder what advantages this conveys. Why go to all of this trouble? Just a couple of advantages might give you an idea about why this approach has long been considered beneficial in areas of document management that have been around a lot longer than the world wide web.

The traditional HTML approach was to "hardcode" all of the appearance information about a page. So you want all your headings in courier, and at different point sizes to the sizes built into browsers? Then, for every heading, in every page, set the font size and face properties. You've got more than 100 pages?

That is a lot of editing, and a lot of re-editing if you decide to modify the appearance of your pages later. And with all of that editing there is plenty of possibility for introducing errors.

With CSS, you can decide how headings should appear, and enter that information once. Every heading in every page that is linked to this style sheet now has that appearance. Want to make every heading of level 3 more obviously different from those of level 2? Edit the style sheet, and every such heading now has the altered appearance. How many hours' work (and potential errors) have you just saved?

Another major advantage involves the management of large, sophisticated sites. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.

back to top

pin

there are more reasons as to why this is good.

Far more styling options

With HTML formatting, there isn’t really much you can do. But when you discover the options available to you with CSS, it’s reasonably simple to create elegant Web pages that look the way you want.

Usability

CSS allows individual HTML tags to be styled, which means, for example, all of your <h1> tags can be a specific size and colour. It also allows for the HTML class attribute, which can style a specific HTML element – giving further customisation abilities. The sames can be used for the ID attribute.

File size

Keep Web pages small in size by keeping all formatting in a seperate file. This way, the browser only has to download your Website’s styling/formatting codes once, as it is stored in the browser’s cache afterwards. This point applies especially to pages with a lot of similarly formatted content.

Flexibility

If your site uses one stylesheet and you need to change something, modifying the CSS makes the change visible on all pages. For example: if all the pages on your site used the Arial font and you wanted to change it to Verdana, using an external stylesheet would mean just changing the font once, and the change would be made across the entire site.

Compatibility

Future proofing your Website is also a must. All the latest browsers support CSS and CSS is also a W3C Web standard. In new XHTML standards, the HTML <font> tag has been removed – which means CSS must be used instead to format text.

SEO

The amount of traffic to your website will increase with the use of CSS, as search engines have an easier time crawling your site and determining its content. Structural organization is greatly improved by using h1, h2, h3 tags, ensuring that the Search Engine Spiders know what you’re trying to show them.

back to top

If you’re at all concerned about the performance of your website, accessibility, usability, hosting costs, having complex and unique layouts, quick website-wide updating, and clean, simplified, structured markup, then CSS-based layouts are your only option. If you don’t know CSS, then learn it. It isn’t that difficult. Just like anything else, it takes time. Your website will be a better place for everyone to visit, and you will more than likely reap additional benefits not possible when using table-based layouts.

green yarn