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.