What are cascading style sheets (css)?
What is 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.
What this hub is not
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.)
How does styling work?
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.
Where does CSS come in?
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.
Styling makes a difference
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?
No embedded styles
Valid, standards compliant
sites keep the styling
and the content
Why does it matter?
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.
See how the experts do it - Enjoy, learn
- glish.com : CSS layout techniques
A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
- Community MX
Flash, Dreamweaver, Fireworks, ColdFusion, Freehand and Studio MX tutorials, articles and extensions.
- W3Schools Online Web Tutorials
CSS resources and tutorials for web designers and web developers
- css Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished visually through CSS-based design.
Feast your eyes on these sites - CSS styling
- CSS Beauty | Gallery
CSS Beauty focuses on providing its audience with a database of well designed CSS based sites, as well as news and happenings on the CSS Design Community. It showcases designers work and serves as inspiration for those looking to build CSS based webs
Showcasing the best in CSS web design and development.
Inspiration journey - All website galleries in one page
- CSS Design Awards Gallery
CSS web design finder
- CSS Import™ | The CSS Gallery
The CSS Gallery — just designs, that's all
- Gallery | Unmatched Style
- CSS Drive- Categorized CSS gallery and examples.
CSS gallery, code samples, tutorials, and more.
Like this hub? Tell us why...
© 2009 Jan T Urquhart Baillie