Applying a Stylesheet Within One Div Only

Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.

<div class="style-sheet-modern">
    <style scoped>
    .conflicting-class { ... }
    </style>
</div>

You can use @import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.

Link external CSS file only for specific Div

Short answer: no.

Other ideas:

Use CSS preprocessor

.leftmenu {
    @include 'style.css';
}

This uses the nesting capability of CSS preprocessors to pre-qualify all the rules in style.css. Replace the @include with your favorite preprocessor's directive for bringing in another CSS file.

Rewrite CSS manually

You can "namespace" the rules in style.css by changing all the selectors to be preceded by a qualifyng .leftmenu.

Rewrite CSS automatically

You could write JS code to rewrite the stylesheet selectors at run-time to prefix the selectors with the class name, which his essentially what this plug-in does: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin. Or you could do this rewriting on the server, whatever language it's written in.

Use `IFRAME` as sandbox

If the content of the thing you want to apply the styles to can be placed in an iframe, you could add the style.css frame to the HTML loaded in the iframe.

That's about it.

How do you apply a style to only one div in the HTML?

Normally for these one off or different pages I would consider adding a style class directly to the body tag, rather than wrapping all the content in an additional div, since it serves no semantic purposes and it is really for styling only purposes.

<body class="adder">
  <div id="container">
    <!-- other code -->
  </code>
</body>

Then add some specific styles for your custom styles pages in the same stylesheet. These need to be declared after the original definition.

/* adder overrides */
.adder #container {
    background-color: #0094FF;
}

.adder header {
    background-color:#00FF7F;
}

.adder #taskEntryForm {
    background-color:#0043FF;
}

Since the style .adder #container is more specific in this instance this is what will get applied. It's a compound set of styles, so first the stlye #container will be applied and then the styles from .adder #container will override anything that is specific in this class.

If you are using Google Chrome then press F12 and you can see the style chain in the Elements tab (as well as change them in that window for learning/demo purposes)

Demo on CodePen

Selectively apply stylesheets to div

- 1

Take a look at this:
https://stackoverflow.com/a/17668004/1552518

- 2

Or just add a class to each div:

<div id="container">
    <div class='div1'>
        style1
    </div>
    <div class='div2'>
        Style2
    </div>
</div>

And in your external css:

.div1 {
    // Style applied only to the first div
}

.div2 {
    // Style applied only to the second div
}

- 3

Or if you can't add a class to the divs use this in css:

#container > div:first-child {
    // Style applied only to the first div
}

#container > div:last-child {
    // Style applied only to the second div
}

How to include stylesheet file only for one div?

Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1 chunk of html under one condition and another chunk under a separate condition. To do this change your code to this:

<?php
    switch ($type_show1):   
    case 'welcome1':
    //default:
?>
         <link href="css/main.css" rel="stylesheet" type="text/css" /> 

<?php
    break;
    case 'welcome2'  :
?>
         <link href="css/main2.css" rel="stylesheet" type="text/css"/>    

<?php
    break;
?>

                <div class="page-header">
                    <div class="page-title">
                        <h5>Booking Management</h5>
                        <span>Good morning, Admin!</span>
                    </div>
                </div>
                <!-- /page header -->

Speaking to what you actually said about using one stylesheet per element. It is possible using Web Components, http://webcomponents.org/, and shadow DOM, http://webcomponents.org/articles/introduction-to-shadow-dom/, but I think in your situation it would be best to simply give each div an id or a class and apply the css specifically to that id or class from one css stylesheet.

UPDATE

To apply CSS to two different divs do this:

HTML

<html>
    <head>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="page-header" id="div1">
            <div class="page-title">
                <h5>Booking Management</h5>
                <span>Good morning, Admin!</span>
            </div>
        </div>
        <div class="page-header" id="div2">
            <div class="page-title">
                <h5>Booking Management</h5>
                <span>Good morning, Admin!</span>
            </div>
        </div>
    </body>
</html>

CSS (main.css)

#div1 {
    //Some CSS Styles to apply to the first div
}
#div2 {
    //Some CSS Styles to apply to the second div
}

How can i apply css stylesheet to single specific element?

There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference

Best way to achieve what you want is to use classss. See classes

.red {      color: red;}.blue {      color: blue;}

<label class="blue">    I'm blue</label><label class="red">  I'm red</label>

Applying a Stylesheet Within One Div Only