i need to implement two different stylesheets in a single master page. one style sheet is designed specifically for the project, and works fine. but when i add the second style sheet to it, which is used for some other project, all the web content forms look weird.
what is the best way of implementing those two stylesheets in the project?
The only thing you have to take into account is that no two styles in these files override each other. Then you can include any number of style sheets.
What is 'weird'... How do they look? Like one of the StyleSheets is not at all applied or like they both override themselves?
There's a neat thing about styling WebControls, as you should not rely on the "id" you set them to as a css-reference, as at runtime, the IDs of any Controls in an ASP-Page are reassigned.
So you should try to avoid using the same ID for CodeBehind-Access on a Control and for styling the same control.
Try using classes that are not redundant in the two stylesheets. Probably one of the stylesheets has a reset of all other styles in it, like
* {
padding: 0;
margin: 0;
}
that overrides the other stylesheet's rules.
It's pretty hard to help you with so few information...
Don't define same styles classes in two stylesheet files
and also don't define styles for html elements like body, div, tr...etc in two files.
E.G.
stylesheet1.css:
body
{
background-color:#F1F1F1;
padding:10px;
}
.search
{
background-color:#0000FF;
margin:3px;
}
stylesheet2.css:
body
{
background-color:#FFFFFF;
padding:15px;
font-size:12px;
}
.search
{
background-color:#000000;
margin:3px;
}
Related
I work with CSS rarely, but I really want to style my chart. The chart is from a vue.js library and has predefined CSS classes. I just don't know how I am able to access them.
HTML:
CSS:
This is how the document describes the use of CSS with the library:
It's hard to get the full picture only from the images you shared. But it should be relatively easy to just override the default styles that the library uses. If you know what the class names are.
For example:
<style scoped>
year: {
display: block;
}
</style>
Take a look at scoped styles docs.
What you need is a "deep" selector.
So if you want to override child component's styles your css should look like
.vtc-statistik /deep/ .vtc {
}
The thing is that your scoped styles get compiled to
.daten[data-v-bla-bla]{
...
}
b[data-v-bla-bla]{
...
}
/* and .vtc-statistik with nested .vtc */
.vtc-statistik .vtc[data-v-bla-bla] {
...
}
in order to work the way you expect it to work it should get compiled to
/* */
.vtc-statistik[data-v-bla-bla] .vtc{
...
}
where data-v-bla-bla is a unique id of your component.
Btw. Nested styles are not part of CSS specifications. You should use SCSS / PostCSS / Less to process them.
I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.
Example:
CSS1:
...
.btn-primary {
background: #000;
}
...
CSS2:
...
.btn-primary {
background: #fff;
}
...
and CSS3:
...
.btn-primary {
background: #4285F4;
}
...
Let's assume that all three CSS are called in my HTML page.
Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?
No.
If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.
Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.
Not as is, but you could alter your style sheets so that it reads like this:
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
Then you could get the specific styles by using the following class:
<a class='btn-primary style2'>Stylesheet 2</a>
In short, you'll need to add some sort of additional method of narrowing down the different styles.
--
Another possibility would be to convert your css files to scss like so:
.style1 {
.btn-primary { ... }
}
You could then use the styling from specific sheets like so:
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.
Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.
If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].
My hacky solution:
After loading all the css files as you need,
In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers
Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.
In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.
Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).
This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.
I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.
But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS
But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.
Here is also an example to find out how overwrite works:
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}
<a id="test-link" href="javascript:void(0);">Test link</a>
As you see, just the last style applied for the background color
I am working with Drupal and with that, I don't always have the freedom to add a class by altering a html tag, however. I would like to apply some Twitter Bootstrap styling on an element from my custom.css file (the bootstrap css file is loaded, so styling is available).
To illustrate it better, for example, I would like to apply class="img-polaroid" (TB base styling) to an image that I can interface as div.someClass in my custom css stylesheet. I don't have simple way to alter the img tag to have class="img-polaroid someClass".
I would like to accomplish the same in my custom stylesheet. In another words, the merge happens not in the html tag but in the css stylesheet itself. How can I accomplish this with the current technologies in place? Are we there to make this possible?
Thank You
p.s. I am aware of alternatives:
-use JS to append class
-Copy and past the styling of class="img-polaroid" into div.someClass {...}
But both seem like not so nice solutions
How you go about this depends on which CSS Preprocessor you're using. You must choose one if you want to avoid modifying TB itself or the markup.
Sass
.foo {
#extend .bar;
}
Output:
.bar, .foo {
// styles
}
LESS
.foo {
.bar;
}
Output:
.bar {
// styles
}
.foo {
// styles
}
You can locate the part of the CSS code that you want to apply to the element in the bootstrap stylesheet and rewrite the selectors or copy the code to another file with new selectors so the style applies to both
.selector-from-bootrap,
.my-new selector{
...
}
I have an external CSS file which is being imported into one of my pages. This external CSS assigns styles to HTML tags. For example,
table {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
tr {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
What is the best way to override these external CSS styles for a single table? For example, if I have a table and I don't want these external style on my table, how would I do that?
Thanks.
Edit - As a clarification, the "long list of CSS styles" has hundreds of styles. Most of the answers so far suggest that I override the provided CSS. Do I need to override all of the hundreds of styles?
Load your own CSS after the other CSS you want to override. The last read rules (if the same level of specificity) will win out. You only need to override the specific rules you need/want to -- not all of them.
you could use inline styles on your table,
<table style='width:90%'>
<tr style='font-size: 4.4em'>
or set up separate classes for the table in the external file, or create another .css file containing these styles
.otherTable{
width: 90%;
font-size: 2.3em;
// long list of CSS styles
}
and in your html,
<table class='otherTable'>
You should rewrite them to your needs right after the external css file.
Load them in this order:
http://www.externalserver.com/styles.css
css/general.css
And then apply your styles which will suit your website theme.
In addition to what j08691 stated, if you have issues with your CSS taking effect, add the phrase "!important" before the semicolon to ensure it overrides the other settings.
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Be lazy and just scribble some javascript on that particular page.
Here is the SO Q/A on that:
https://stackoverflow.com/a/196038/1617149
Or you can do it in jQuery/Prototype before the page is rendered, e.g. on DOM load.
One of my widgets contain a programmatically generated list of ToggleButtons. I would like to style them, but I'm not sure what the best approach is. GWT provides rules like .gwt-ToggleButton-up and .gwt-ToggleButton-Down that I could override. I am able to override these by putting my rules in a style.css file and referencing it from my HTML file (although that approach is deprecated).
If I include the following in the UiBinder that contains the buttons, the styles aren't applied:
<ui:style>
.gwt-ToggleButton-down {
color: red;
}
.gwt-ToggleButton-up {
color: red;
}
</ui:style>
(I'm guessing that has to do with how GWT obfuscates CSS names.)
I could also make a new UiBinder component that just wraps ToggleButton to apply my own style rules, but that may be unnecessarily cumbersome.
Should I ignore the .gwt-ToggleButton-* rules entirely and define my own rules, applying them with toggleButton.addStyleName()? Or is another approach preferable?
#external will prevent obfuscation if that's the route you want to go.
<ui:style>
#external gwt-ToggleButton-down, gwt-ToggleButton-up;
.gwt-ToggleButton-down {
color: red;
}
.gwt-ToggleButton-up {
color: red;
}
</ui:style>
You need to put all the styles into .css file which is located under war folder.