As I begin my journey with CSS, I am eager to grasp some of its behaviors.
In the CSS file, the following code is defined:
#spa {
position : absolute;
top : 8px;
left : 8px;
bottom : 8px;
right : 8px;
min-height : 500px;
min-width : 500px;
overflow : hidden;
background-color : #fff;
border-radius : 0 8px 0 8px;
}
.spa-shell-head {
top : 0;
left : 0;
right : 0;
height : 40px;
}
.spa-shell-head-logo {
**top : 4px;
left : 4px;**
height : 32px;
width : 128px;
background : orange;
}
.spa-shell-head-acct {
**top : 4px;
right : 0;**
width : 64px;
height : 32px;
background : green;
}
The HTML file contains the following code:
<body>
<div id="spa">
<div class="spa-shell-head">
<div class="spa-shell-head-logo"></div>
<div class="spa-shell-head-acct"></div>
<div class="spa-shell-head-search"></div>
</div>
<div class="spa-shell-main">
<div class="spa-shell-main-nav"></div>
<div class="spa-shell-main-content"></div>
</div>
<div class="spa-shell-foot"></div>
<div class="spa-shell-chat"></div>
<div class="spa-shell-modal"></div>
</div>
</body>
I am puzzled as to why changing the bold properties in the CSS code does not reflect on the elements themselves, especially the background color I have set for them.
For the full code, you can visit: http://jsfiddle.net/fu6dmhdt/1/