CODEWITHSUNDEEP
htmlcssclass
musikluver2003
musikluver2003

Reputation: 163

Link to multiple CSS but call specific classes

I am working with a developer that has asked that I link to two CSS files -- but the second one should only call to the changed classes. I understand what he means, but am not sure how to carry it out. Instead of looking like this:

<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/pt-style.css" rel="stylesheet" type="text/css" />

It should have the first link to the main style, and then somehow call to only changed classes from the second CSS. Could someone show me how to do this?

Thanks in advance!

Edit:

Would it make more sense to just link to the first, main CSS and then add an internal style sheet beneath that to make the changes to the specific page? If the internal style sheet had classes that were named the same in the external sheet, which one would take precedence?

Upvotes: 0

Views: 145

Answers (2)

Oleg Belousov
Oleg Belousov

Reputation: 10111

CSS is not a programming language, there for it cannot involve any logic of any kind. If you want to create style sheets programatically, you should examine LESS, or SASS

CSS works by inheritence, meaning that even if you define the same selector(class, id a chain of classes or\and elements), as long as one of the attributes doesn't repeat it self in multiple places, the styles will be concatenated.

What happens when there is a conflict?.

Well, in that case the value supplied by the more specific selector applies(excluding !important). The most specific selector is of course is inline style attribute, after that an ID selector, and after that, there are several other rules, but in general order of things, is that the selector which has the more specific 'path' to the element through the DOM will 'win';

for instance:

<span class="hasColor">Look at me!</span>

.hasColor{
 color: green;
}

span.hasColor{
  color: blue;
}

body span.hasColor{
  color: red;
}

this element will get the red color, since the last selector is the most specific one.

Plunker:

http://plnkr.co/edit/0lQ1R3J2EVm4rVginMpz?p=preview

Upvotes: 1

Binita Lama
Binita Lama

Reputation: 1278

You can maintain one css file ie. style1.css and copy the css of pt-style.css at the end of it.

If you want to make out the changes and combine as one, you can see the difference between the two with the help of this tool..http://www.diffchecker.com/.

Upvotes: 0

Related Questions