CODEWITHSUNDEEP
htmlcss
Searene
Searene

Reputation: 27544

CSS border doesn't work

HTML:

<body>
    <div><p>Something</p></div>
    <div class = "myPanel">
        <div class = "heading">my header</div>
        <div class = "body">my body</div>
    </div>
    <div><p>Something</p></div>
</body>

css:

.myPanel: {
    border: 1px solid #687D6D;
    border-radius: 5px 5px 0 0;
    box-shadow: 10px 10px 1px black;
    margin: 3%;
}
.myPanel .heading {
    background: #B6F0C4;
    border-radius: 5px 5px 0 0;
    color: #687D6D;
    padding: 10px 20px;
}
.myPanel .body {
    padding: 10px 20px;
}

JSFiddle

What I'm curious is that, even if I set border on .myPanel, it doesn't work on .myPanel .body, there's no border around .myPanel .body, why?

Upvotes: 1

Views: 356

Answers (1)

dippas
dippas

Reputation: 60543

here is your problem:

.myPanel: {

just remove the : (colon)

snippet below: 

.myPanel {
  border: 1px solid #687D6D;
  border-radius: 5px 5px 0 0;
  box-shadow: 10px 10px 1px black;
  margin: 3%;
}
.myPanel .heading {
  background: #B6F0C4;
  border-radius: 5px 5px 0 0;
  color: #687D6D;
  padding: 10px 20px;
}
.myPanel .body {
  padding: 10px 20px;
}
<div>
  <p>Something</p>
</div>
<div class="myPanel">
  <div class="heading">my header</div>
  <div class="body">my body</div>
</div>
<div>
  <p>Something</p>
</div>

Upvotes: 4

Related Questions