Css Tutorials: website components

Recently I was presented with interesting problem, and solution I provided was implementation of certain idea I have about how I *should* design my css styles.
The element I needed to provide was a form, that contained editable descriptions of different elements...


Each element needs a set of input fields. Some of them are marked common, and appear only once for an element but some of them define a "sub-element", and as such will be multiplied as much as many sub-elements are added by user. Some of components won't have sub elements, so they will contain only common input fields.

To implement this layout I used a component abstraction. Each element will be displayed by generic layout component. Here's is a html code that defines three components:

<br /> <br /> <!--normal component--><br /> <div class="component"><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> </div><br /> <br /> <!--empty component--><br /> <div class="component"><br /> </div><br /> <br /> <!--big--><br /> <div class="component"><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> <div class="sub_component"><br /> </div><br /> </div> <br /><br />

I'll need three different components to describe different situations that my happen in the life time of application. There is "normal" component, with three subcomponents, "empty" component, and "big" componend, filled with many subcomponents.
Let's add some input fields:
<br /> <div class="component"><br /> <h2>Component #1</h2><br /> <span>common:<input type="text"></input></span><br /> <span>common:<input type="text"></input></span><br /> <br /> <div class="sub_component"><br /> <h3>#1</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> </div><br /> <div class="sub_component"><br /> <h3>#2</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> </div><br /> <div class="sub_component"><br /> <h3>#3</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> </div><br /> </div><br />
And let's create buttons panel, to allow user add and delete subcomponents:
<br /><div class="component"><br /> <h2>Component #1</h2><br /> <span>common:<input type="text"></input></span><br /> <span>common:<input type="text"></input></span><br /> <br /> <div class="sub_component"><br /> <h3>#1</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> <div class="button_panel"><a href="#">Delete</a></div><br /> </div><br /> <div class="sub_component"><br /> <h3>#2</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> <div class="button_panel"><a href="#">Delete</a></div><br /> </div><br /> <div class="sub_component"><br /> <h3>#3</h3><br /> <span>name:<input type="text"></input></span><br /> <span>name:<input type="text"></input></span><br /> <div class="button_panel"><a href="#">Delete</a></div><br /> </div><br /> <div class="button_panel"><a href="#">Add</a></div><br /></div><br />
As you can see here, the whole thing doesn't look so good, but hey, that's whay Gods created CSS, right? :)
So, let's start styling.
<br />*{ margin:0px; padding:0px; font-family:Verdana; font-size:small; color:#245A7A;}<br /><br />.component{<br />border:1px solid #245A7A;<br />margin:10px;<br />padding:10px;<br />}<br /><br />.sub_component{<br />border:1px solid #245A7A;<br />margin-left:10px;<br />margin-top:15px;<br />padding:10px;<br />}<br /><br />

Now, that looks better, right? We have a main components, and subcompontents visible inside.

Different styling may cause the whole thing look completly different - see this example for the simpliest ajustments.

How to make your css better

Still on the track of being The Greatest Front End Developer in the World :).
Here's nice and practical list of advices on how to make you css better.
Will try to implement at least few of them.

CSS and sprites = fun, fun, fun.... fun

Many big players are using it (facebook for example). Big files full of small images - tiles used as sprites in your CSS based UI interface. I like it - reminds me of old mobile game development times :). Did that for the external links menu on left side of website. Seems to work fine.
What would be a post without a useful link?