PDA

View Full Version : Learning CSS


topdog
04-23-2009, 09:19 PM
Here is code from a css file and some html from a web page/

This is a css starting at line 3

body {
font: 80% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #006600;
}

This is in the same.css starting at line 43

.twoColFixLtHdr #mainContent {
margin: 0 0 0 180px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-color: #FFF;
border-top-color: #006600;
border-right-color: #006600;
border-bottom-color: #006600;
border-left-color: #006600;
color: #006600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
}

This is html in a web page

<div id="mainContent">
<h1>Trials</h1>
<p class="hrule">
</p>

<div> This is a listing of all of the trials currently approved by CARO. Please
contact the trial secretary for premium list information<br>

</div>

The emphasis in BOLD and RED is mine for display purposes only.

If I change the font size (say from 80 to 180 % in either of the places above, it changes the font size in the html.

Why in both places?

Because the html is in a div is "mainContent" AND as that part of the css is later in the css file, surely the latter css should take precedence ALSO why is the body css affecting the html at all - does not the named mainContent css relate only to the named div?

Brian

Cary
04-24-2009, 02:48 AM
The first style rule says the default font size for the body, and therefore the entire page it encompasses, should be 80%. The second style rule says the font size of text within #mainContent should be 80%.

So it's going to be 80% of the 80% the first rule already reduced it to. Make the second rule 180% and the text will be 180% of the 80% size set for the body.

Change only the first rule to 180% and the div text will be set to 80% of 180%.

This is the cascading effect of Cascading Style Sheets.

topdog
04-24-2009, 08:16 PM
Duh!

That makes so much sense. Thanks