Having finally groked most of the philosophy and finer points of CSS based layouts developing the layouts for SoapBX, I thought I’d start writing some of the things I’ve learnt down before I forget it and in case it would be of use to other developers out there.
This first part I want to highlight how css actually was designed to allow object oriented design and how you should think about your design.
Objects
First time you look at a complex style sheet it tends to look really complex and ugly. However the advantage is that your html should look a lot simpler.
Objects and classes in css are actually a lot more like ruby’s implementation than Java’s, in that you can extend your class directly within an instant. Don’t worry to much about that for now.
Objects are basically tags within your html page. You can think of most of the built in tags as java’s primitive type or the built in classes.
So <h1/> is an object of type “headline1” and <p/> is an object of type “paragraph”.
Some of the built in types are more complex, such as the list constructs and forms.
You use the <div/> tag for objects using your user defined classes in html.
Instantiating your object
Lets say we have an object in our application that we need to display called product. We instantiate our object like this:
<div class="product">
<h1>Geek</h1>
<img src="http://talk.org/images/face.jpg"/>
<div class="price">$100.00</div>
</div>What did we actually do here? Well we said this object is an instance of class Product. Just like in dynamic languages like ruby, perl and python we just started adding instance variables:
- A title
- An image
- A price
The beauty of this is that this would work just fine without any further work. You can start developing your application and not worry to much about the final look. However to format this we need to create our style sheet. It just uses the browsers default version of the tags which will just about always be readable if not necessarily exciting.
This is more or less how it would look:
Geek
Defining our class
Firstly you need to create a css file. You probably already know how to do this. This is just a plain ascii file that you give a .css extension. Lets call ours catalog.css. To use it in your page you use the html equivalent of Java’s import and Ruby’s require, the link tag:
<html>
<head>
<title>StrangeStuff.com</title>
<link href="/stylesheets/catalog.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body> ....This shows the inclusion of the style sheet, which should normally be in the head block of your html file. As webdevelopers we normally have some kind of 3rd party or homebrew template system such as SiteMesh or Ruby on Rails Layouts . Place this in your normal template and it is included in all your pages.
Now within your css file you start defining your class:
.product{
border: 1px solid black;
padding: 2px;
width: 200px;
}
.product h1 {
font-size:18px;
font-weight:bold;
color:green;
border-bottom: 1px solid green;
}
.product .price {
font-size:24px;
color:red;
font-weight:bold;
text-align:right;
}This now looks like:
Geek
Now what have done here? First of all we have said that the product objects should have a one pixel line all round it (a Box basically) and a 2 pixel internal padding between the border and the content.
Then we say that any h1 tags within our product should be 18 pixels tall, bold and have a green line beneath it.
Finally we declared our own embedded object “price” to be inside our product and we say that it should be red, 24 pixels tall, bold and right aligned. We declared this as any object of class price inside an object of class product. We could also have declared this as a global definition for price like this:
.price {
font-size:24px;
color:red;
font-weight:bold;
text-align:right;
}Which in our simple example would have given the same effect. However it is good to encapsulate as price is something so general that you might use it in many varying contexts.
CSS Selectors the key to our class definitions
You can see that the above style sheets are defined like this:
.CLASSNAME {
PROPERTY NAME : VALUE ;
}The classname part is actually just one type of what css calls selectors. For now we will just deal with classes and tags which is what we have used here.
Class selector
The following is a simple class selector, which says the object of class product has the following properties:
.product {
bla bla bla ....
}This would ofcourse match all objects defined like:
<div class="product">Hello</div>It would also match:
<h1 class="product">Hello</h1>To only match the div you would do:
div.product {
bla bla bla ....
}Embedded objects
Our product example has the following to rules:
.product h1 {
....
}
.product .price {
....
}This is an example of an embedded or nested selector. I like to think of it as defining the instance variables of our class, but it is a lot more flexible than that.
The first selector says any h1 elements inside the product object should have these properties.
The second selector says any price objects inside the product object should have these properties.
Conclusion
This was just a simple introduction, but I do my best to keep this going with articles about:
- How to create flowing layouts
- When to use and not to use the flow property.
This entry was posted in the following Categories: css
This has to be one of the best mini tutorials on CSS I've seen in a long time.
Keep it up, looking forward to seeing more.
jaseb
Thank you for this post.
I've been using CSS for sometime now, however my background is mainly programming. This post is really a valuble insight to somehow connect the two together (CSS and OO concepts).
Posted by: Diong on February 25, 2005 11:41 AMIt's been said of the Mac - "You can make documents really beautiful - or ugly."
Likewise CSS.
It's another tool for good - or bad - design.
So, this site gets bookmarked; hopefully, good design will follow.
Thanks for the insights.