#who {
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
color: white;
background-color: #f91845;
position: absolute;
display: inline-block;
transform: rotate(-40deg);
top: 200px;
left: 300px;
}
<div id="who">
<h1 class="tlt">Who am I?</h1>
</div>
I also tried the below one because the one above is not working:
h1:first-child{
font-size: 70px;
}
Please let me know why the font isn't changing? If I use h1:first-child, the font is getting applied to all h1 elements.
try
.tlt
{
font-size:70px!important;
}
The browser applies two sets of CSS to the page: the user agent styles (the browser “defaults”) and the author styles (yours).
The user agent styles set things like heading font sizes. These target the <h1> directly and set a font size, usually about 2em.
Your styles target the parent element #who. Some properties, such as the font properties inherit down the DOM to the <h1>, but declarations that target the <h1> directly will override those inherited values. The User Agent styles are targeting the <h1> are doing this.
If you want to override the user agent styles, you need to target the <h1> as well. This is why something like this works:
h1 {
font-size: 70px;
}
See, h1 is inside div of id who. Now, if you set font size of #who div then h1 should have it's font size but in the application there would be some font-size of h1 already defined; so it would override #who div's font-size.
h1:first-child
This will target all first child of any other containers. So, ideally this won't be a right method.
#who h1{font-size:70px;}
This would do solve your problem.
Now if you wanna target first child h1 of #who div then use following css
#who h1:first-child{font-size:70px;}
Because if your code is exactly what you have posted you dont use id selector in your css.
for more information please read
W3 CSS Selectors
According to updated question:
Applying to all h1's is also related to that
since you are not referencing h1 inside 'who' id it selects all of them. Because every h1 is first child of another element
Can you please change
h1:first-child
to
#who h1:first-child
Related
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
Suppose I have no choice but to use absolute font-size value, e.g. font-size: x-large;. According to many articles, the exact font size of such an element depends on user's preferences. My question (maybe silly) is: can I force some custom value instead of user's preferences as a base?
E.g. I have a given HTML document with absolute-size values, and I want to render it inside of an iframe (under same domain) with some configurable value as a font base. So that elements with font-size "x-large", "medium", "small", etc. change their real font size according to this base value. It might be useful e.g. just to demonstrate how these font values work. Can I achieve this at all? And how? Maybe there's a specific property in window object like "window.fontSizePreference" - who knows...
If an absolute value has already been declared, and you want to simply replace it using a length value, you have a few options.
Possible Solutions
Override the CSS by being more specific. If your code is declaring the value using:
div.xlarge {
font-size: x-large;
}
You could add another CSS selector to target that div, and CSS would use the more specific of the two values. For example, you could add body or the parent container:
body div.xlarge {
font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
font-size: 12px /* So would this */
}
.parentclass div.xlarge {
font-size: 12px; /* And this */
}
For the sake of the example, I'm using a div with a parent div and a parent with the class name of .parentclass. You could also use span, p, li, ul, a, etc.
Note: Learn more about Specificity from MDN.
You could also add styling inline to the desired target. For example, if your HTML is:
<div class="xlarge">My Text</div>
You could add inline styling like so and it would override the font-size CSS declared value:
<div class="xlarge" style="font-size: 12px;">My Text</div>
The last thing I'd recommend, is using the !important tag to override CSS values you couldn't otherwise target using the above methods. Assuming there is no other !important declarations, the last !important will force the CSS value.
div.xlarge {
font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
font-size: x-large; /* Would be ignored */
Note: Learn about using !important from CSS-Tricks.
IFrames
None of these solutions will work with just CSS if you are trying to edit an iframe, unless you have control of the iframe content. For editing iframe CSS, just do a quick search on Stack Overflow and there are a number of solutions.
I am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:
http://jsfiddle.net/whoiskb/Za2TB/
HTML
<div class="teaser">
<h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>
CSS (plus an external link to twitter bootstrap)
div.teaser h1.teaserText {
font-size: 100px;
font-weight: 100;
color: black;
line-height: 90px;
font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
text-transform: uppercase;
}
div.teaser h1.teaserText label {
color: #FCCE00;
}
From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.
Could someone explain what I am missing here?
BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.
Specificity rules only apply if different Rules target the **same element (as for your color of the label), not if different elements are targeted (even if some styles of that element would be inherited).
You have one stylerule applied to labels, and that is the color, which gets applied correctly. All your other styles are applied to another element, so the TB styles targeting the label directly are preferred of course.
Some styles are inherited (like font-size and line-height in your example), but they are overridden as soon as there is a rule targeting your element directly. TB overrides your font-size and line-height with the following rule:
label, input, button, select, textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
You could fix this easily by declaring:
div.teaser h1.teaserText label {
color: #FCCE00;
font-size:inherit;
line-height:inherit;
/* and so on */
}
I'm not exactly clear on what you think the problem is, but taking a guess:
CSS specificity decides what happens when there are two or more rules for one CSS property for a given element.
So, given this HTML:
<label class="myLabel">Hello!</label>
And this CSS:
label {
color: red;
font-size: 24px;
}
.myLabel {
color: blue;
}
The label will be blue, because .myLabel is a more specific selector than label.
However, the label will also have a font size of 24 pixels, because the .myLabel block doesn't include a rule setting the font-size property.
I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?
<style>
#rank li{
font-size:50px;
font-style: italic;
font-family: serif;
font-weight: bold;
width:70px;
margin-right:10px;
text-align:center;
}
</style>
<ol id="rank">
<li>
<div class="profile">
<!-- contains complex stuffs including tables, floated div for displaying profiles-->
</div>
</li>
</ol>
EDIT:
Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.
Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.
One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :
ol {
list-style-type : none;
}
ol > li:before {
content : counter(list_counter) " ";
counter-increment : list_counter;
float : left;
font-family : verdana;
}
ol:first-child {
counter-reset: list_counter;
}
You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.
Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/
As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.
If I add a style like:
* {
font-size: 14px;
}
and later I define for an element:
#myElement {
font-size: 18px;
}
The fist one will override the second one.
Is there a way to define the first one, such as the second one will override it, and the 14px size will be applied to all the elements that don't define a size?
(I would like alternatives to the use of classes)
The element #myElement will override the first rule as it is more specific. If #myElement has children then the children will match the global selector. Try setting the rule on body.
Use !important
#myElement {
font-size: 18px !important;
}
It's worth noting that in your example if you specifcally set a style on that element, be it a class or id, it will inherit properties but any specific styles it will overwrite. So doing the above is pretty pointless. This can be demostrated like so:
<style type="text/css">
* {
font-size: 60px;
}
#blah2 {
font-size: 14px;
}
</style>
<span id="blah1">i'm default size</span>
<br/>
<span id="blah2">i'm specially 14px</span>
fiddle: http://jsfiddle.net/garreh/3YuLD/
No, the first one will not override the second one. A selector with an id is more specific than a selector with an element, so the second will override the first one.
To override a rule you just have to make a rule that is more specific. Just count the number of id, class and element specifiers in the selector, where id is most specific.
You can read more about selector specificity here:
css.maxdesign.com.au/selectutorial/advanced_conflict.htm
The second rule should override the first one. Make sure your element has id="myElement". Use an inspector (such as Firebug or Chrome's Web Dev Tools) to see what styles are applied to your element an which are overridden.