Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to write a sub class?

Posted on 2007-11-29
11
Medium Priority
?
243 Views
Last Modified: 2008-02-01
Say I have a text class:

.textA       {font: 10pt Arial}

.textAPadding       {padding-top: 8px;}

How can I write it so that .textAPadding inherits the .textA font and other stuff that I may want there?

I can't use this as an id="" because I want to use it more than once on a page.
0
Comment
Question by:Starr Duskk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1
11 Comments
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20375370
Maybe this?
<!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>Untitled Document</title>
<style type="text/css">
<!--
.textA {font: 12pt Arial
}
.textAPadding {padding-top: 8px;}
-->
</style>
</head>
 
<body>
<div class="textA"><p class="textAPadding">TEST</p></div>
</body>
</html>

Open in new window

0
 

Expert Comment

by:chergenroeder
ID: 20375392
I think it works like this...

textA.textAPadding {padding-top: 8px;}

you would use class="textAPadding" in your control, and it should inherit the .textA class
0
 

Expert Comment

by:chergenroeder
ID: 20375422
forgot the . infront of textA

.textA.textAPadding {padding-top: 8px;}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:Starr Duskk
ID: 20375423
oh.

There's no way to just call one class that inherits the other. Calling two classes isn't really inheritance.
0
 
LVL 19

Assisted Solution

by:darron_chapman
darron_chapman earned 400 total points
ID: 20375480
Basically it is inheritance, but it's done in the html.  There's no way to define the inheritance in the style area.  Also, just as an FYI, you can embed DIVs and get the same effect.
<!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>Untitled Document</title>
<style type="text/css">
<!--
.textA {
	font-family: Arial;
	font-size: 12pt;
}
.textAPadding {padding-top: 8px;}
-->
</style>
</head>
 
<body>
<div class="textA"><div class="textAPadding">TEST</div></div>
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20375627
That's what I've been doing. I was hoping for something more graceful.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20376018
You can use more than one class in the tag to combine them:

<div class="textA textAPadding">
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20376690
>> <div class="textA textAPadding">

Now that's what I'm talking about! This IS the accepted answer!

thanks GreenGhost!
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 1600 total points
ID: 20380432
Here are a few more useful tips, besides combining classes:

http://css.maxdesign.com.au/selectutorial/selectors_class.htm
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20382978
>>.textA.textAPadding {padding-top: 8px;}

that just errors with an unexpected character sequence on the second dot.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

715 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