CSS Forum

**silverglade** · 01-02-2009, 12:14 PM

hi, i was wondering, im dissecting this web page and they have the following on it.

Code:

a:link, a:active
{
  color: #2e5a8c;
 background-color: inherit;
}

i was wondering what inherit does. any help greatly appreciated. thanks. derek

**LadynRed** · 01-02-2009, 12:26 PM

I means it inherits the background color of the parent element.

**silverglade** · 01-02-2009, 01:04 PM

thank you. does that mean the parent element might be the background of the page? im not sure what the parent is in the css im looking at. dererk

**chrishirst** · 01-02-2009, 01:17 PM

The parent is the container the element is fully enclosed by.
So with this example;

HTML Code:

<html>
<body>
<div id="first_child">
<div id="child">
</div>
</div>
</body>
</html>

#first_child is the parent of #child
<body> is the parent of #first_child
<html> is the parent of <body>

**serandfae** · 01-02-2009, 01:27 PM

What's the anchor enclosed by in the HTML? That's the parent.

Edit: Just quicker on the draw, today, huh, Chris?

tim

**silverglade** · 01:53 PM

awesome thank you! i love this forum. i cant wait for a day when i can offer something. but the only thing i can offer is this. and this is what Chris (Chrishirst) told me. go to elated.com, download their page kits, open them in dreamweaver, click on the elements in design view and look at their respective styles to get an idea of what is going on in the CSS, (this shows up in CSS panel or popup window), then i start to reverse engineer the page, starting with the container, next with the left sidebar, etc. until i understand the whole page, how it was laid out etc. and i rebuild the web page in a new document piece by piece. i think i am able to do it. its very hard for a newbie, but so far i am able to do it. that is the best advice i can give to any fellow newbies out there, and i hope other newbies get the same advice Chris gave me . So THANKS> for that. derek

also going to http://w3schools.com

i have to say though, as a newbie, im amazed at how much CSS they put in for this ONE PAGE!!!! LOL. check it out. is that normal?

Code:

/*
This is an Elated PageKit - www.elated.com.
All artwork copyright (c) 1996-2008 Elated Communications Ltd.
By using this PageKit, you are agreeing to be bound by the
usage agreement available online at http://www.pagekits.com/usage/
*/
 
/* Page body style */
body
{
 margin: 0;
 padding: 0;
  color: #393b4a;
  background: #d4d5c5 url(images/pinstripe.png) repeat 0 0;
  font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 0.85em;
  line-height: 1.3em;
}
 
/* Standard paragraph style */
p, ul
{
 margin: 0 0 1.4em 0;
}
 
/* Links */
a:link, a:active
{
  color: #2e5a8c;
 background-color: inherit;
}
a:visited
{
 color: #802f8c;
 background-color: inherit;
}
a:hover
{
  color: #000;
}
 
/* Headings */
h1, h2, h3
{
 font-weight: normal;
  color: #484743;
  padding-top: 0.8em;
}
h1
{
 font-size: 1.4em;
  line-height: 1.0em;
  margin: 0 0 15px 0;
}
h2
{
 font-size: 1.2em;
  line-height: 1.0em;
  margin: 0 0 10px 0;
}
h3
{
 font-weight: bold;
 font-size: 0.8em;
  margin: 0 0 10px 0;
}
 
/* Container for page */
#container
{
 position: relative;
 margin: 0 auto;
  padding: 0;
 width: 780px;
  background-color: #efedd9;
}
 
/* Page header area */
#page-header
{
  float: left;
  width: 180px;
  margin: 0;
  padding: 0 0 0 10px;
}
#page-header h1
{
  margin: 83px 0 15px 0;
  font-size: 3.5em;
  line-height: 0.85em;
  color: #000;
}
#page-header h1 a
{
  text-decoration: none;
  color: #000;
}
 
/* Menu */
ul#menu
{
  margin: 168px 0 0 0;
  padding: 0;
}
ul#menu li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu a:link, #menu a:visited
{
  color: #2e5a8c;
  text-decoration: none;
}
#menu a:hover
{
  color: #000;
}
 
/* Top image */
#main-image
{
  float: right;
  width: 560px;
}
 
/* Page body */
#page-body
{
  float: right;
  width: 560px;
  margin-top: 18px;
}
div.homepage #page-body
{
  float: right;
  width: 560px;
  margin-top: 40px;
}
 
/* Main content area */
#main-content
{
  float: left;
  width: 340px;
}
 
/* Sidebar area */
#sidebar
{
  float: right;
  width: 190px;
  padding: 2px 10px 0 0;
  font-size: 0.9em;
  line-height: 1.2em;
}
 
/* Standard images */
img
{
 border: none;
}
 
/* Page footer */
#page-footer
{
  margin: 10px 0 0 0;
 padding: 20px 0;
 background: transparent url(images/footer-rule.png) repeat-x 0 0;
}
 
#page-footer p
{
  margin-left: 220px;
}
/* Clearing element */
.clear
{
  position: relative; clear: both; height: 1px; line-height: 1px; font-size: 1px;
}

**serandfae** · 01-02-2009, 02:18 PM

I'd say that's pretty average, yeah.

tim

**silverglade** · 04:28 PM

wow ok thanks. i guess i have my work cut out for me. heh. thanks. derek
sorry another question while im dissecting this web page i downloaded.

why does the background here have a color AND an image?

Code:

background: #d4d5c5 url(images/pinstripe.png) repeat 0 0;

**serandfae** · 01-02-2009, 05:40 PM

Likely because it's a transparent png. Another reason would be, if it wasn't an image that supported transparency, if having the color there if the image didn't display, say it was blocked by a work browser or something like that.

tim