Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,567 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,567 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