5 Quick Steps to Becoming a CSS/XHTML Guru
For quite a few people the step from rigid HTML table structure layout to the fluid patterns and quirks of CSS/XHTML can be a very difficult one, however, with some basics tips the transition can be made a lot less painful.
Here I outline 5 salient points in the battle between good and evil that is HTML versus CSS/XHTML.
1# Creating A Mesh of Squares and Rectangles
Everything starts with a container. "A container?" you say. Yes, by this i mean an initial DIV inside your BODY tags that will basically ring fence your design. With this container DIV you can then position the content on the page, be it left, left of center, center, right or right of center. Consider it a foundation to your design, much like the foundation to a building, without it your design will fall apart.
At the same time, when looking at a photoshopped design for your site, you have start to imagine the framework of layered squares and rectangles that are going to build up your design. From starting with the CONTAINER you are essentially building up a patchwork quilt of rows, columns and patches of DIVs and other HTML elements. For example, a 3-column CSS/XHTML layout with header and footer should include the countainer div, plus 5 divs inside the container with various widths and floats to position them accordingly and thus fill the space as required.
#2 Using The Float and Clear Properties
When creating a DIV, be it an element with a unique ID or a Class ID, you need to think about how you are going to float it in the context of the other DIVs or elements contained within the parent element. Floating multiple DIVs left, side-by-side, will result in row upon row of DIVs within the parent element, auto-magically wrapping themselves. By way of another example, in a three column layout, you may wish to float the first two DIVs, let's say menu and content, "float: left;" and then the right column, "float: right;". Also, specifying a float property for any element frequently fixes oddities where DIVs run over one another.
In addition to using the 'float property, to achieve the kinds of results where your DIVs do not wrap under one another or push one another down, you need to look at using the 'clear' css-property, specifying clearance properties to the left, right or both sides of the DIV.
#3 The Difference Between a Class and an ID Selector
At the heart of CSS is the ability to specify properties for a single element with a unique ID, or a shared collection of elements, a Class. The best analogy for such a thing is that of a teacher and class of children. When the teacher wishesg to call a single pupil by his or her name, he or she will be using a Unique ID, when referring to the entire classroom of pupils, he or she will use the Class Name.
When referencing a specific ID in CSS you need to prepend the name with a # (hash or pound sign), when referring to the class in CSS you will prepent the name with a . (period or full-stop). For Example:
#idName { ... }
.className { ... }
When referring to the items in HTML you can do it as follows:
<div id="idName" class="className1 className2"> ... </div>
As you can see with the example provided it is possible to specify only a single ID but an element can be garnered with multiple class names to string a series of properties together.
#4 Nested DIVs and Backgrounds for Fluid Designs
Another CSS conundrum for any web developer is how to create a series of DIVs so that you can dispay a fluid box, either fluid horizontally, vertically, or even both. The way to achieve this is with a series of nested divs, each with a specfied slice of the design.
If it is hard for you to visualize this in your head, prior to creating it in code, the best way to envisage this construct is to imagine a series of pieces of extendable glass stacked on top of one another. The first piece wil contain the background image, repeated on the X or Y axis dependant upon the direction of extension; the second will contain the header slice of the design; and the third DIV will contain the footer slice of the design.
.box .background {
background: url(../images/box-bgd.jpg);
background-repeat: repeat-y;
}
.box .header {
background: url(../images/box-hdr.jpg);
background-repeat: no-repeat;
background-position: top;
}
.box .footer {
background: url(../images/box-bgd.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
The content will then be entered within the footer. In this way, as the content grows, it will push the header and footer out, whilst the background simply repeats itself, as high and as wide as is required for the content within the box of nested DIVs.
#5 Cascading ...
One of the real powers of CSS is that it is cascading, that is to say that not just can you share a single stylesheet of rules to every single page on your site but you can also stipulate separate stylesheets for a single or group of pages and that these separate rules, if loaded in in the right order can be used to overwrite any defaults preset in the main style sheet.
A good exmple of using the cascading nature of rule precedence is for menu rollovers. In the example, you would specify the defaults for each tab/button in the main CSS file for example:
#menu #option-1 {
background: url(../images/option-1.jpg);
background-repeat: no-repeat;
}
#menu #option-1:hover {
background: url(../images/option-1-over.jpg);
background-repeat: no-repeat;
}
Then in the CSS for the 'Option-1' section:
#menu #option-1 {
background: url(../images/option-1-over.jpg);
}
This way you can essentially turn a menu tab into a permanently selected item in your navigation for the current page view. This is a great little effect when you are running rolodex style tabs in CSS, similar to the one displayed below:
Conclusion: Trial and Error & Read Up More.
There is no perfect answer on how to learn CSS/XHTML other than telling you to read up as much as you can, and even more importantly to battle through the coding and testing process, creating coded designs via trial and error, learning on the job.
There is of course a wealth of information out there, and it is certainly worth searching around the web, via Google or elsewhere to find what you need to create the designs you want. Books I have read and would personally recommend for bedtime reading include the following:
- CSS Mastery by Andy Budd, Simon Collison and Cameron Moll
- Bullet Proof Web Design by Dan Cederholm
- Transcending CSS: The Fine Art of Web Design by Andy Clarke & Molly E. Holzschlag