WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Fieldset in CSS

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Fieldset in CSS Fri Jun 25, 2010 4:37 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Fieldset in CSS
Applying CSS to the 'Fieldset' element


Learn about the fieldset in CSS.
I'll try to do my best to explain everything.

First we start out with get our CSS stylesheet ready. Then we also make the fieldset section ready so we can type attributes to it.
<style type="text/css">

/* All Styles Optional */

fieldset {
Attributes here
}

</style>
I've maked a table with the attributes and more, so would it be easier to learn.
More can off course be placed.
AttributeEffectExample
Color:Color of the frame#000000;
Background:Background color#FFFFFF;
Border:Size of the frame1px solid;
Padding:Padding size in the fieldset20px;
Background-image:Image to the backgroundurl(THE IMAGE URL);
Font-family:With text type to write withArial, Helvetica, sans-serif;
font-size:Wich text size to write with12px;
width:Width of fieldset200px;
heigth:Heigth of fieldset15px;
We can try to look at the stylesheet now.
Code:
<style type="text/css">
 
/* All Styles Optional */

fieldset {
  color: #000000;
  background: #FFFFFF;
  border: 1px solid;
  padding: 20px;
  background-image: url();
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  width: 200px;
  height: 15px;
}

</style>
But we can also input some attributes to the legend (same method).
*NOTE! The legend is a kind of a title.

So now the stylesheet look like this. More attributes can still be added.
Code:
<style type="text/css">
 
/* All Styles Optional */

fieldset {
  color: #000000;
  background: #FFFFFF;
  border: 1px solid;
  padding: 20px;
  background-image: url();
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  width: 200px;
  height: 15px;
}

legend {
  color: #000000;
  background: #FFFFFF;
  border: 1px solid;
  padding: 5px;
}

</style>
Now we only need the HTML, we will putt that into the body section.
Code:
<fieldset>
<legend>Title here</legend>
Images, text, effects and more here.
</fieldset>
That was it.

DEMO


Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Fieldset in CSS

Permissions in this forum:
You cannot reply to topics in this forum