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

CSS

Posted by Kailash Seshadri
Kailash Seshadri
3,087 Points

What is wrong with my code?

I am trying to create a trial website in workspaces.

In my paragraph, below the header, that states "TRY NEW STYLES HERE", I am trying to apply a 25px border on the top and the bottom.. i gave the p element a class "trial".

What have I typed wrong in my css as the border is not appearing at all..

workspace snapshot: https://w.trhou.se/6iqy2mflo5

THANKS!!!

7 Answers

Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points 
.trial {
  border-top: 25px;
  border-bottom:25px;
  border-color: green;
  border-style: solid;
}

This should give you huge top and bottom borders.

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

HI again, when you add a border. Yu use three parameters actually.

1)border-width

2)border-style

3)border-color

or you can use--> border: border-width border-style border-color

border-style Specifies the style of the border. Default value is "none", so that's why you can't see anything.

Try border-top: 25px solid green;

for more border-styles http://www.w3schools.com/cssref/pr_border-style.asp

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

Try specifying the border weight, such as: 'solid.' https://developer.mozilla.org/en-US/docs/Web/CSS/border-top

Manav Misra
Manav Misra
11,778 Points

To be clear, you might try, 'border-top: solid 25px;'

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points
Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Add a boder-style attribute. For example

border-style: solid;

Kailash Seshadri
Kailash Seshadri
3,087 Points
Kailash Seshadri
Kailash Seshadri
3,087 Points

i added the border style and there is a small like 2px border that appears on the left of the element.. there is still no border on top or bottom.

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

I can't see any changes in your workspace.

.trial {
border-top: 25px solid green;
border-bottom: 25px solid green;  /* just using shorthand property or use you can use border as claudiu suggested*/
}           /* just easy to use shorthand property*/
Kailash Seshadri
Kailash Seshadri
3,087 Points

yes it works anyway now thanks!

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi,

The problem lies in the fact that the browser is rending its own CSS. All browsers do this. To avoid this you have to do what is known as a "reset". I've included below a sample of what you can do for a reset and every person has there own and some are generic and others are specific to that persons way of coding.

  • is a "all" selector by default Chrome for example is adding the border you can't seem to remove.

Place that section at the top of your css file and add the border-style to trial and your good to go or the short hand version because its specific to the top/bottom only. As stated by Tushar.

* {
  border: 0;
  box-sizing: border-box;  
}
.trial {
  border-top: 25px;
  border-bottom:25px;
  border-color: green;
  border-style: solid;
}

Mark