Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old July 15th, 2009, 04:31 AM
Registered User
 
Join Date: Mar 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Horonggo's questions

Hi, Everyone, I'm new. I have some questions, please look at the code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {
 margin:0px;
 padding:0px;
}
div {
 width:200px;
 height:200px;
 border:#000000 dotted 1px;
 margin:5px;
}
p {
 font:larger Arial, Helvetica, sans-serif;
 padding:100px;
 color:#000000;
}
.a {
 background-color:#FF0000;
 position:absolute;
 top:10px;
 left:10px;
}
.b {
 background-color:#00FF00;
 position:absolute;
 top:10px;
 left:40%;
}
.c{
 color:#FFFFFF;
 background-color:#0000FF;
 position:absolute;
 top:10px;
 right:10px;
}
.d {
 background-color:#FFFF00;
 position:absolute;
 bottom:10px;
 left:10px;
}
.e {
 background-color:#00FFFF;
 position:absolute;
 bottom:10px;
 right:10px;
}
.f {
 background-color:#FF00FF;
 position:absolute;
 bottom:10px;
 left:400px;
}
</style>
</head>
<body>
<div class="a">
  <p>a</p>
</div>
<div class="b">
  <p>b</p>
</div>
<div class="c">
  <p>c</p>
</div>
<div class="d">
  <p>d</p>
</div>
<div class="e">
  <p>e</p>
</div>
<div class="f">
  <p>f</p>
</div>
</body>
</html>
I wanted to make the letters in "class c" white, and others black. But why didn't the code work?

What's more,when i tried to change the 34th line to ".c p",the border of div dispeared,and moved. Why?

Wait for your answer. Thanks.

Reply With Quote
  #2 (permalink)  
Old September 12th, 2009, 12:10 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

The first part of your question deals with cascading style sheet rules and specificity. The letter doesn't become white, because you have a previous rule that overrides it.

Code:
p {
  font:larger Arial, Helvetica, sans-serif;
  padding:100px;
  color:#000000;
}
The preceding rule applies to all <p> elements.

Code:
.c {
  color:#FFFFFF;
  background-color:#0000FF;
  position:absolute;
  top:10px;
  right:10px;
}
This rule applies to the parent <div> element. color is an inherited property, so text inside that <div> (but not inside a <p>) will be white. But text inside a <p> will be black, because you have a specific rule applying to <p> elements that takes precedence over inheritance.

With regards to the second question, when you change the rule to:

Code:
.c  p {
  color:#FFFFFF;
  background-color:#0000FF;
  position:absolute;
  top:10px;
  right:10px;
}
The rule now applies to the <p> element instead of the parent <div> element. The <div> element is no longer absolutely positioned, so it appears in the normal flow of the document, which places it in the upper left hand corner of the screen. The <p> element is now absolutely positioned, so it appears roughly where the <div> element appeared before, but it has default margin applied to it by the browser, so it's shifted down a bit. The border in question is applied to the <div> element, not the <p> element, which is why you see the border in the upper left hand corner instead of applied to the <p> element.

HTH!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
.NET Interview Questions, C# Interview Questions, dotnetuncle .NET Framework 2.0 2 April 30th, 2013 06:57 AM
C++ questions jam93 C++ Programming 1 August 19th, 2007 10:39 PM
two questions reverand Excel VBA 2 December 5th, 2005 05:33 AM
C# questions zhenliu C# 2 April 15th, 2004 09:18 AM
many questions Frank1111 BOOK: ASP.NET Website Programming Problem-Design-Solution 1 December 22nd, 2003 08:59 PM



All times are GMT -4. The time now is 12:10 PM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.