What are cascading style sheets (css)?

Cascading style sheets are special rules that web browsers understand. Known as CSS for short, these rules tell the browser how to display parts of a web page, such as the headings, the links, and the colours for the 'look' of the page. If we still wrote web pages like we did when I started, we would have either really slo-o-ow to load pages or text-heavy pages with little visual impact like those that were common at that time. I used one single image on my first site (left), with colour in the text. The page was laid out using tables, which needed a great deal of code.

It's NOT a tutorial on using CSS

It IS a few explanations about how styles are called into a page by the browser.

The information here is just to explain to non-designers or fledgling websters what CSS is about, and why web designers need to know how to use it.

Included are some links to excellent sources of CSS tutorials and books for self-education.

(That's how I did it, along with much experimentation.)

for web pages.

All web pages are composed of words (text) and pictures (images).

While you can change the look of words on a page by highlighting a paragraph and changing the colour to something other than black, and a different size of text, this makes for more code.

Each time you want to change another paragraph to use that same colour you need to do the same thing all over again.

This is called inline styling.

That's how we have to do it here on Squidoo.

Instead, you can write some rules for the way the paragraphs should look and apply those rules to any paragraphs on the page. You put these rules in the code at the top of a web page — the head — and then each time you want to use those rules, you call them up.

This is called embedded styling.

An example of this is where a page has headings throughout, level 1, 2 or 3 down to 6. If the rule you write is for level 2 headings, then each time you make a paragraph as a level 2 heading, even if it is many times over, all of them look the same.

Another way to call upon rules for the styles of your page is to include them in a text file that the page can be linked to instead of writing the styles on the page.

This is called external styling.

All or some of the pages in a website can be linked to the file, making all of them appear similar. Consistent site appearance and layout, but the pages have no extra code for the styling.

And that's what CSS styling is all about.

A page with no style sheet link

A style sheet is a text file — the file extension is .css — that contains all your style rules for paragraphs, headings, image spacing, link formatting, and much, much more.

The file is kept on your server and any pages that have been linked to it can read the rules and the browser applies the styles.

Browsers have default styles and if for some reason, the style sheet can't be found, or has not been uploaded, or styles are turned off the page will still render.

The picture shows my quilt website with styles turned off. There is much more text not showing in the picture.

Same page linked to a stylesheet

All my website construction uses external CSS, making the pages very 'lightweight' and fast loading.

The picture shows the page as it usually looks, with styles turned on in the browser.

The content is all visible, because I have styled the page to have three columns, and small news items with headings styled with a pale blue background.

How much more user friendly is that than the one above?

Standards compliance says it's important

If a site visitor has vision impairment, for example, he/she would be using a screen reader. The screen reader doesn't need to see how pretty the page is, just read the content.

What has developed then, is a set of standards for web page construction. Although many persons who make web pages are unaware that standards even exist, professional web designers should be.

Content needs to be separated from the layout, and semantically correct.

Fast loading, content rich pages that are styled by linking to style sheets elsewhere on the server give the best user experience to your site visitors.

Like this hub? Tell us why...