Css using multiple stylesheets issue

Question

In simple html page,we can use something like this:

<style type="text/css">
a {text-decoration:none;}
 a { color: inherit; } 
/*----------Text Styles----------*/
.ws72 {font-size: 88px;}
.ws74 {font-size: 93px;}

.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style> 

With classess like:

<div>
 <font class="ws72" >
      </div>

And another one like:

<div class="wpmd">
      <div>

That's all with same page css and now how can i use something like:

<link href="example.com/better.css" rel="stylesheet" type="text/css">  for class .ws72 

and like:

<link href="example.com/best.css" rel="stylesheet" type="text/css">
for .wpmd

Answer 1

First of all you're using old html tag like <font> which is deprecated to use nowadays. So, I recommend you not to use that tag.

And to your question you don't need to separate the stylesheets but you can add multiple style rules in your single stylesheet and if the page has one class then your stylesheet will use that and same thing applies for other pages.

Answer 2

You can use all types at the same time. Just remember that it will execute with different priority according to css selectors weigth. Read about it at MDN , or at Smashingmagazine (with cool pictures).