Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Select Menus

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Form Re-design Problems

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Ubuntu', sans-serif;
  color: #333300;
}

form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f5f5f0;
  border-radius: 8px;
}

h1 {
  margin: 0 0 40px 0;
  font-size: 30px;
  text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 14px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e0e0d1;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #ff3300;
  font-size: 22px;
  text-align: center;
  font-weight: 400;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #990000;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.6em;
  font-style: normal;
  margin-bottom: 5px;
}

label {
  display: block;
  margin-bottom: 4px;
}

label.light{
  font-weight: 300;
  font-style: italic;
  display: inline;
}

.number {
  background-color: #ff3300;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  font-style: normal;
  font-weight: 400;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 10%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}

Hi! I am learning about HTML. I want to change the legend font style to normal, see above, but it displays as italic. Is this something to do with the order of the css code?

Thanx, Jane

3 Answers

Hi Jane, I think the reason why that happens is because em renders texts in italics apart from emphasizing it. You can read more about it here: em (HTML element)

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Gloria,

Using em' won't change the font style, your only changing size with it.

Sometimes when you see an example they simply show them in italics so they stand out a little better. It can add to the confusion I know.

It's good to see lots of suggestions for a fix when someone asks a question, thanks.

Yes Wayne, I just realized that it is for CSS and in Css that is a size unit XD so what I said doesn't count here. I just saw the HTML tag of the question and got confused and thought maybe it is the same. Thanks for explaining it further.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jane,

You could try being more specific in targeting the legend fieldset legend for example, but I would try moving the legend selector below the label .light selector first.

You also need to add a space between label.light selector.

Hope this helps

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Thank you Gloria and Wayne. I will try out what you suggest. Have a good day! Jane