The old way of making some text look a particular way is with a tag like this:
<font size="+3" face="Helvetica" color="red"> red text </font>
The question is, what does this mean other than the stylistic information? Nobody can do anything with this other than make some red text. You might be thinking "so what", so let me list a few other uses for the web page content that are prevented by the above:
- It reduces the possibility to make web pages accessible to people with disabilities. For example blind people rely on screen readers to read to people what's on the screen. With the above all the screen reader could do is say "red text" whereas the author may be intending that to be a book title.
- Directly displaying information from XML files rather than translating the XML to HTML. XML is a data format related to HTML, and widely used in the computer industry for raw data files. It is possible to use CSS to declare how to present the tags in a given XML file, thus making XML more viewable.
- It's easier to maintain the look of a site by localizing the style declarations in a central file.
- You can easily switch the look of a site on the fly simply by using multiple CSS files.
- End users can specify their own CSS files to gain a little control over how the web looks to them.
What can CSS do?
- CSS can redefine the presentation of a given tag from its defaul. Also, for tags which don't have a default presentation, it can make the tag visible.
- CSS can define style information for a block of text.
- CSS can declare a style "class", and all elements having that "class" take on the given style.
- CSS can import style declarations from external files, centralizing the style information for a whole web site with ease.
- Because CSS "cascades", styling can be given for the same element multiple times, and it is the most recent style declaration that prevails. Say what? If you have a centralized CSS file for your whole site, and then want one page to look different, then what? Simple, make a second CSS file for that special page, the definitions that only appear in the first CSS file will remain as declared, while any definitions made in the second CSS file will override ones from the first.
- CSS can control the layout of information on a web page. Thus, CSS can end the abuse of the TABLE tag.
How do you use CSS?
Attached to a given tag: You can use style information on a given tag like so:
<p style="style: declaration">Some text</p>
The style= attribute is what carries the style information, and can be attached to any tag.
Attached to a group of tags: Two new HTML tags, DIV and SPAN, have been defined which act as the parent of a section of content. One use for these is simply to attach style, with style=, to that section of content. For example the red text example is more useful as so:
<span class="BookTitle">
Messages from the Water
</span>
This way the text "Messages from the Water" is knowable to be a BookTitle. The class= attribute will refer to a CSS declaration made elsewhere. Instead of class= we could have done style= as well.
Attached to a whole page: You can declare CSS style definitions in a page, and they will apply only to that page. This is done with the STYLE tag.
Held in an external file: You can declare CSS style definitions in a separate file. In each page where those style definitions are to be used, you use a LINK tag to refer to the CSS file.
The latter two are handled automatically for you by both GoLive and Dreamweaver. In addition both of them provide dialogs to aid you visually with creating CSS definitions.
Resources
CSSZenGarden: The concept is simple: see how many ways designers can take the exact same HTML code and produce completely different looking pages. As you browse through the various designs, you will find that the only thing changing the way each page looks is the CSS file.
The Web Developer's Network An extensive set of web development resources that delves into areas of good website design and creativity, along with anything else you could possibly want for your design needs.
Official Cascading Style Sheets Level 2 Specification This is the official standards document that describes the precise definition of CSS. This may or may not be your cup of tea, depending on how low level you want to get.
CSS from the Ground Up A pretty good tutorial that skips all the theory and goes direct to teaching CSS.
Listamatic The list tags (UL, OL and LI) are widely used basic constructs in CSS based designs. This site shows many useful variations of the list tags used for a variety of purposes.
CSS Vault This site offers a little bit of everything. They offer a great gallery for you to stop by and gawk at, as well as a number of resources on everything from lists to building layouts that do not use tables.
CSS Layout Techniques This site has examples of several different types of layouts. They may not offer every layout you could possibly use, but looking over their guides will certainly help you learn different techniques to learning how to layout your page.
Ruthsarian Layouts Another site offering several very good examples of popular layouts.
PositionIsEverything Another site offering several very good examples of popular layouts.
Style Gala A site that goes a bit beyond CSS and into some other aspects of design, but still offers so much to learn from that it is highly worth putting in your favorites file. Included in this site is an impressive gallery, some forums, a collection of bullets that you can use on your site, and a great collection of resources.
Bluerobot Layout Reservoir Two and three-column page skeleton CSS layouts
Little Boxes Various box layout CSS stylesheets
Open Source Web Design Various complete page templates free for use
Web Builders’ Toolkit Many more links to template resources
How to Create a Photographic Gallery Using CSS
7Dana Template Store offers both free and non-free templates.
Good-Looking, Sharp Offset, CSS Text Styling is an interesting technique for using pure CSS to cause text to be raised. Usually this requires an image making the page bigger etc.
Even More Rounded Corners With CSS is a no-javascript method of doing rounded corners on a DIV using CSS.CSS drop shadow is a method of doing a drop-shadow using just CSS, no javascript, and no secondary images. The method uses multiple levels of containing DIV, offsetting the inner DIV's from the parent, and painting the DIV's with various colors to create the shadow.
CSS Drop Shadows is a widely referenced article giving a method to create a drop-shadow. It involves creating a second image which is the shadow, and setting it as the background of a parent DIV. Then you offset it a little and voila you have a shadow.
Drop Shadow is a jQuery plugin for doing drop shadows.
Simple CSS 3D Button is a way to do a raised or lowered 'button' using just CSS with no image.
Curvy Corners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
23 Resources for Clean and Compressed CSS discusses ways to make sure CSS code is correct, is compressed well, etc. CSS code isn't exactly straightforward to write and it can be easy to make mistakes or to write code which isn't cross-browser-safe. Some of these tools help you to make your code clean and safe for cross-browser issues. Also by compressing your CSS it can make your website appear to be faster, because of less transmission time to transmit pages. This is especially true if multiple CSS files are conglomerated into one, and that CSS file is compressed. CSS compression involves removing all the blanks and whitespace which aren't required but make it easy to read.