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 trialJane Marianne Filipiak
7,444 PointsForm 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
Gloria Dwomoh
13,116 PointsHi 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
19,579 PointsHi 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
7,444 PointsThank you Gloria and Wayne. I will try out what you suggest. Have a good day! Jane
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi 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.
Gloria Dwomoh
13,116 PointsGloria Dwomoh
13,116 PointsYes 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.