How to Apply CSS Stylesheet to Single Specific Element

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 to only a certain region of an HTML file

It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.

See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.

If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:

.bootstrap-styles {
@import 'bootstrap';
}

/* OR */

.bootstrap-styles {
@import (less) url("bootstrap.css");
}

You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:

<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>

<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>

EDIT

It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.

Here is an example of using both Bootstrap and jQuery UI together:

<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>

<button class="btn btn-primary">Test Button</button>

<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>

<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>

<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>

And the result is this one:

CSS namespaces

As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.

Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/

Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.

Linking an external stylesheet to only specific HTML elements

What you can do is compile your own bootstrap from the source .scss files. See this related post: Limit the scope of bootstrap styles (except you don't actually have to fork bootstrap, that's overkill)

You'll end up with all the bootstrap rules prefixed with a certain selector - in your case, #preview ... so an excerpt of your-custom-bootstrap.css might look like this for you:

#preview .alert {
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}

In part of your project files you'll have something like the following:

#preview {
@import (less) 'bootstrap.css';
}

You'll need to go through the process of setting up the build steps, etc. - take a look at http://getbootstrap.com/getting-started/#grunt

Here's someone who's done this and published it, but I'm not seeing any built assets in their repo so it looks like you'd still have to set up the build tools, but at least it works as a bit of a tutorial: https://github.com/homeyer/scoped-twbs

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.

How to apply external CSS to a specific element. Style of other element should not be change

You can try checking how are the elements class called and you can change it in the <head></head> using the <style></style>.

E.G.

If you right click with your mouse on the element and select the option "Inspect element" it will guide you to the right element names and from than on you can change the their style in the style property of the <head>.

This code gives you an example ho to change the background of the slider:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<style>
.ui-slider-bg{
background: #000000 !important;
}
.ui-bar-inherit{
background: #FFFFFF !important;
}
.ui-btn.ui-slider-handle{
background: #FF0000 !important;
}

</style>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
<h1>Range Slider</h1>
</div>

<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000" >
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
</form>
</div>
</div>

</body>
</html>

Using the !important is going to force the elements to change their style.

I hope I helped at least a bit :)

Best regards,
Dimitar georgiev



Related Topics



Leave a reply



Submit