How can I use different CSS in the same page?
For example I have two primefaces header in the same page and I want to apply different CSS for them.
Is there a way to do this? When I try to add below lines inside head tags, just one of them is working.
<h:outputStylesheet library="css" name="myheader1.css" />
<h:outputStylesheet library="css" name="myheader2.css" />
CSS files:
.ui-layout-unit-header{
font-size: 20px;
border: none;
text-align: center;
background-color: buttonface !important;
}
.ui-layout-unit-header{
font-size: 10px;
border: none;
text-align: center;
background-color: buttonface !important;
}
Any idea how to resolve this problem
If you two CSS rules with the same selectors, the second one loaded in the second style sheet is the one that will be used.
This concept is known as the cascade, and described in the CSS specification:
http://www.w3.org/TR/CSS2/cascade.html#cascade
You can't , All CSS on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will work. Specificity is determined by the selector and by the order they appear in the document. This is part of the cascading.
Related
<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i>
works
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px;
}
doesnt work
I've never had this issue before. Any idea?
Yes, I do have the font-awesome css correctly linked.
I believe the font-size is already defined for the icons in the font-awesome.css file. Adding the style tag to the html code overrides these predefined classes. Try typing !important after defining font-size in the css to explicitly override. For example:
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px !important;
}
Like #developernator stated, you can also use the predefined classes. However, I find that most of the time the right size falls between the sizes of these classes.
The class uses first inline css then internal css and then external css
Your font awesome might have already given inline css either remove inline css or
do-
font-size: 50px !important;
Been looking at a premium theme and see that for various text and elements on the page, when inspected - many have inherit and 0 for the values.
Why would these not be left blank if they are not required and automatically inherited from the parent? Does it perhaps save on load time?
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
This is done to override browser defaults.
Most browsers themselves apply their own style declarations to make basic HTML pages look prettier. Unfortunately these style declarations often clash with how a designer wants a web page to look. The way to overcome this is to reset the styles to what they should be by default.
Example
A good example of this is with heading and p tags. Take the following example:
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Without any custom styling applied, these elements use styles provided by the browser. One of the styles used here is margin, and that's what's putting the large gaps between each element.
We can reset these ourselves by setting the margin to 0:
* {
margin: 0;
}
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Because of the need to reset such styles public stylesheets like Normalize.css exist, whose intention is to do nothing more than reset (and normalize) all elements to look the same across different browsers.
Are there any specific rules for things such as input[type="submit"]? I'm having trouble with the CSS properties being loaded in a seemingly incorrect order.
On line 400 of my CSS style sheet I have the following:
input[type="submit"] {
margin: 5px;
}
This is the standard setting for Submit buttons. However, I have a particular submit button that I'd like to style differently, which is on line 800 of my CSS style sheet and so I would have thought it would overwrite the previous style:
.inputSubmit {
margin: 0;
margin-left: 5px;
font-size: 13px;
line-height: 18px;
vertical-align: middle;
color: #555555;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
My HTML is as follows:
<div style="position: absolute; bottom: 0; right: 0;">
<form method="get" name="search">
<input type="text" name="searchBox" class='inputText'>
<input type="submit" value="search" class='inputSubmit'>
</form>
</div>
When the page loads, the Submit button loads all of the styles for inputSubmit except the margin settings, which when I inspect the element in Chrome I can see as being crossed out in favour of the earlier style. This has thrown my understanding of CSS out of the window, because I thought it worked in order - and always has in every situation in the past.
For example, I can set h6 {margin: 5px;} and .h6Test {margin: 0px; } in that order, and all browsers still recognise the "class" was assigned afterwards and overwrite the default margin for any <h6 class="h6Test"> tags.
I can force the styles to take effect applying input[type="submit"].inputSubmit, so I have achieved the result I need, but I don't understand why I've had to do that. This is what makes me think this is a "Special" type of property that for some reason operates outside of the boundaries of normal CSS.
Can anyone shed any light on it please?
The reason is that the selector input[type="submit"] has higher specificity than the selector .inputSubmit. The rule with more specific selector “wins”. This has nothing to do with loading order.
By the cascade rules (a key part of CSS, Cascading Style Sheets, yet misunderstood by most people), input[type="submit"] has specificity 0,0,1,1 (one attribute selector, one element selector), whereas .inputSubmit has specificity 0,0,1,0 (just one class selector, counted as an attribute selector). Using input[type="submit"].inputSubmit you get specificity 0,0,2,1, which is fine. Actually, [type="submit"].inputSubmit would suffice (specificity 0,0,2,0).
ID selectors have a higher specificity than attribute selectors.
For example, in HTML, the selector #p123 is more specific than [id=p123] in terms of the cascade.
A:
a#a-02 { background-image : url(n.gif); }
and
B:
a[id="a-02"] { background-image : url(n.png); }
the first rule (A) is more specific than the second one (B). W3C CSS 2.1 Specification
I need to overwrite the header style from style.css.
Here's the style that I need to overwrite.
.t_header{
text-align: center;
background-color: #bfd4f0;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
Now I created another css file name black.css and I need to create a different background color for .t_header
.t_header{
text-align: center;
background-color: white !important;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
I already used !important to overwrite the style from style.css but its not working but for some reason, the other style class and id that I overwrite using !important worked well.
I hope someone can give me another way to overwrite the style aside using !important. Thanks
Try to clear your browser cache, then add the files in your code in the following sequence -
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">
The overriding css doesn't need to have all properties -
This much code will be enough -
.t_header{
background-color: #fff;
}
Using !IMPORTANT is generally not recommended. Try increasing specificity
body div.theader { background: white; }
Also keep in mind that it's generally frowned upon to use more than four selectors.
you get the idea...
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.