Is this CSS outline done okay?

Dev Shed Forums Sponsor:

November 22nd, 2012, 09:03 AM

xod_s

Registered User

Join Date: Oct 2012

Posts: 6

Time spent in forums: 1 h 13 m 19 sec
Reputation Power: 0

Homework - Is this CSS outline done okay?

Before going on I think that one of the reasons that this css isn't well written or working well is b/c I purposely skipped a part.It's a part about making a contact form (sort of like this http://l.yimg.com/a/i/us/wh/gr/help/...nt_modal_3.gif) but there's a part about having to get a file to a server which I'll see someone tomorrow about.I've been told to make...

-a top margin of 1em

-border of 2px, #305704

-font size of 16px

-fieldset border of 2px,#305704 (although I don't know what a "fieldset" border is)

-fieldset background with a colour of #befca7

-fieldset with a bottom margin of 1em

-legend font with colour #305704

-legend with right and left padding of 10px along with top and bottom padding of 0

-*float first name, last name, email labels to the left, with a width of 100px, aligned to the right [this part I don't understand but feel has something to do with the step on making a contact form that I skipped]

-text inputs with a background colour of #f0eea4

-a textarea border ["textarea" border not being a particular like tag] of 2px,with color #305704

-a button text colour with #305704

-a button text in lower case (I dont get it,dont they all automatically appear in lowercase font?),using CSS to transform it to upper case

-a button background colour with color #f0eea4

-a button border with 1px and a color of #305704

-appropriate CSS alignment to display the buttons beside each other horizontally

Code:

body [?]

 {
 margin:1 em; 
 border: 2 px, #305704;
 }
 
 
  .field-set {
 font-size:16px;
font:#305704;
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
float:[dont know how to do this one]
[dont know text-input:#f0eeea4;]
 
 .legend
 {
font:#305704;
padding-right:10px;
padding-bottom:0px;
}

[how do I do * if I can?]

.text 
{
background-color:#f0eea4;
[area]border:2px , #305704
}

.button
{
color:#305704;
border: 1 px,#305704
}

Am I doing following this CSS outline well?

November 22nd, 2012, 12:39 PM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

By reading the requirements, this is all related to your form (the top margin and border, I would think, are meant to relate to the actual form not the body.

If you Google fieldset you will find out more but basically it is a tag around a group of form elements that group them together.

You are getting there but there are a few errors (i.e. gaps between integers and unit of measurement, commas in applied styles etc) and unnecessary lines of code

Code:

form {
 margin-top: 1em; 
 border: 2px solid #305704;
 font-size: 16px;
 }
 
fieldset {
background: #befca7;
padding:10px; /* All padding is 10px so no need for separate lines */
margin-bottom: 1em;
}
 
legend {
color:#305704; /* Font color is set with color, not font */
padding:0 10px; /* Means padding top and bottom is 0 and left and right is 10px, values go top, right, bottom, left but as you have the same top and bottom and left and right can be shortened to this */
}

.label {
  float: left;
  width: 100px;
  text-align: right;
} /* Apply this div around each form 'label' First Name, Last Name etc */

input[text], input[textarea] {
background-color:#f0eea4;
}

input[textarea] {
  border: 2px solid #305704;
}

.button
{
color:#305704;
border: 1px solid #305704;
text-transform:lowercase;
display: inline;
background: #f0eea4;
}

I know this is homework but as you have made an effort in the first place I am happy to help.

Homework - Is this CSS outline done okay?

Developer Shed Advertisers and Affiliates