I have some table cells that I want to set a height for. It works exactly like it should when I set the height directly on the element:
<td class="row-separator" style="height: 5px;"></td>
But when I try to do it from the CSS at the top of my page it doesn't work:
td.row-separator {
height: 5px;
border-left: 0;
border-right: 0;
background-color: grey;
}
All the other CSS properties are applied, but not the height. This happens in both Firefox and IE. What could be causing this?
There must be other CSS that affects the height of the td, too. Since inline styles (those declared in the style attribute directly on the HTML element) are meant to override any external definitions, it might apply due to that. You can easily check that in the inspector of your webbrowser.
See these two examples:
#box p {
font-size: 32px;
}
p.some-text {
font-size: 16px;
}
<div id="box">
<p class="some-text">This is 32px because #box makes the selector way more specific than p.some-text</p>
<p class="some-text" style="font-size: 16px;">Inline styles have the highest specificity and can only be overwritten using !important (which you should not)</p>
</div>
(Hint, even though your code does not have it: This example also demonstrates why you should not make use of #id selectors in your CSS.)
To learn more about CSS "prioritization" (which is called specificity), you can start here:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
So I have an app that uses jQuery for certain parts. Such as the Autocomplete and Calendar Date Picker. I'm introducing a new style called .more-compact that will implement a smaller version of the app. This class is currently sitting in the div encompassing the entire app. This class works in reducing the heights, widths, and font sizes of almost everything. But when I try to do it for any jQuery elements, it won't work. This is how a typical style on the css doc looks:
.more-compact ul li {
font-size: 12px;
}
But for the jQuery autocomplete element, it will only work if I remove the ".more-complete" part. I don't want this though because this is part of a single stylesheet, and I only want the font to be that size when the .more-compact version is being used.
Any ideas what is causing this nesting not to work? Is the jQuery stylesheet over righting my own? The for this stylesheet is the lowest on the doc, so it should take priority.
Try use !important
.more-compact ul li {
font-size: 12px !important;
}
But try using more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority
HTML
<div id="test">
<span>Text</span>
</div>
CSS
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
Let's say I have this in my CSS:
div {
margin: 0;
overflow: auto;
padding: 1%;
text-align: center;
word-wrap: break-word;
}
That should be the default code for all div. But what if I have another div with a code that contradicts this default:
div.a {
background-color: #ffffff;
border: 2px solid;
text-align: left;
}
As you can see, there's no contradiction with the background-color or border, but there is a contradiction in that this div is text-align: left whereas the default is text-align: center. I've actually used this code with html pages and have found no problems with browsers interpreting it. But I'm wondering if it's still bad practice or could lead to problems down the road.
Contradiction isn't possible in style sheets - selectors are either more specific (and so override less specific selectors) or just come later and so override the previous selector's rules.
In your example the div.a selector is more specific as it selects by class and not just the tag name. This means it doesn't matter if your div.a rule comes before or after the div rules, the div.a rules will always apply because they are more specific.
The specificity rules may seem complex at first but you get used to them pretty quick.
https://css-tricks.com/specifics-on-css-specificity/
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
How are these three rules different when applied to the same HTML document?
html {
color: black;
background-color: white;
}
body {
color: black;
background-color: white;
}
* {
color: black;
background-color: white;
}
html {
color: black;
background-color: white;
}
This rule applies the colors to the html element. All descendants of the html element inherit its color (but not background-color), including body. The body element has no default background color, meaning it's transparent, so html's background will show through until and unless you set a background for body.
Although the background of html is painted over the entire viewport, the html element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.
body {
color: black;
background-color: white;
}
This rule applies the colors to the body element. All descendants of the body element inherit its color.
Similarly to how the background of html is propagated to the viewport automatically, the background of body will be propagated to html automatically, until and unless you set a background for html as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.
You can, however, combine background styles for html and body with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.
* {
color: black;
background-color: white;
}
This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as * has literally no significance in selector specificity.
Because this breaks the inheritance chain completely for any property that is normally inherited such as color, setting those properties in a * rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody