?
Solved

Class inheritence

Posted on 2004-12-01
2
Medium Priority
?
284 Views
Last Modified: 2010-05-18
How do I do the following:

.cpanel_body {
  background : white;
  border-width : 1px;
  border-style : solid;
  border-color : #000080;
  padding : 3px;
}

.nopad {
  padding : 0px;
}

I want nopad to inherit all the attributes of cpanel_body, and override padding.  so that I can do something like the following  <td class="cpanel_body,nopad"> ?
0
Comment
Question by:cayates
2 Comments
 
LVL 18

Accepted Solution

by:
arantius earned 500 total points
ID: 12718254
.cpanel_body, .nopad {
  background : white;
  border-width : 1px;
  border-style : solid;
  border-color : #000080;
  padding : 3px;
}

.nopad {
  padding : 0px;
}
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12721927
I know we're closed off here, just a couple of points:

1. Only add what's required for the specific adjustment. That way we can reuse the nopad class much easier:

 .cpanel_body {
  background : white;
  border : 1px solid #000080;
  padding : 3px;
}

 .cpanel_body2 {
  background : red;
  border-width : 4px solid #ffcc66;
  padding : 20px;
}

.nopad {
  padding : 0px;
}

<div class="cpanel_body">Only cpanel_body styles applied</div>
<div class="cpanel_body2">Only cpanel_body2 styles applied</div>
<div class="cpanel_body no pad">White background, no padding</div>
<div class="cpanel_body2 no pad">Red background, no padding</div>

If we were to use the original example, we couldn't do the 4th div just listed becuase nopad included the white background.

2. This: <td class="cpanel_body,nopad"> should be this: <td class="cpanel_body nopad">

In other words, we need to saparate multiple classes with a space, not a comma.

That's all - stepping back out again :-)

Sean

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month13 days, 22 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question