Link to multiple CSS but call specific classes

Question

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?

If I understand your question correctly: include one after the other. CSS cascades; defining a rule for a class doesn’t overwrite previous ones. — Ry-
– Ry- ♦, Commented Mar 8, 2014 at 16:35

Oleg Belousov · Accepted Answer · 2014-03-08 16:48:16Z

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

Binita Lama · Accepted Answer · 2014-03-08 16:43:48Z

0

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/.

edited Mar 8, 2014 at 16:43

answered Mar 8, 2014 at 16:37

Binita Lama

1,2881 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

Link to multiple CSS but call specific classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related