CODEWITHSUNDEEP
htmlcss
user2189681
user2189681

Reputation: 13

Can tags in CSS have multiple levels of inheritance and if not, then is there a way to be similarly efficient?

I am learning CSS on the fly, so if this is stupid, bear with me. I need a lot of different types of <p> tags, as I am using CSS styles to manage an ebook in HTML (this format is required, and I am not allowed to deviate from the established structure). At the moment I have 15 different <p> classes, and I will need a lot more (probably over 50). Many of theses classes are very similar, with only a 1 or 2 differences between any 2.

So, is it possible to have tag classes that inherit from other classes, similar to how OOP works? And if that isn't possible, then is there some way to make this more efficient?

Upvotes: 1

Views: 951

Answers (3)

aIKid
aIKid

Reputation: 28292

You can use multiple classes:

<p class='main-class secondary-class'></p>

After that, style: .main-class { /*Your CSS code */ }

.secondary-class /*Selects <p> tags with second class*/
{ 
 /*Styles that is different than the main class*/
}

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

No, there is no such things as multiple inheritance, and this is not about inheritance at all.

To format paragraphs in different ways, you can use several classes in a <p> tag, separated with spaces,e.g. <p class="warning important aside">. For each class, you can set CSS properties as desired (ranging from setting a single property to a complicated setup).

You need not (and should not) declare e.g. font family for each class separately. It normally suffices to set it for all paragraphs, e.g. p { font-family: Calibri, sans-serif; }. A class is not an object, or object-like. It is just a way to classify elements so that you can set CSS properties on a set of elements.

Upvotes: 1

Vishal Vaishya
Vishal Vaishya

Reputation: 616

What I have seen in most of Giant sites like Google, Yahoo, etc.

1] Define minimum common style in one css class like: 

.hFont { font-family: Helvetica, San-serif; } 
.vFont { font-family: Tahoma; } 

.sBold { font-weight: semi-bold; } 
.bBold { font-weight: bold; }

2] You can define multiple classes in 1 tag. So Use this multiple classes in tags like: 

<h1 class="hFont sBold">Hi this is Heading!!! </h1>

I think this should be best and efficient method which we can use. This is just an example. So reduce and combine your same style in one css class.

Upvotes: 0

Related Questions