I have a custom-styles file that defines html and body like this:
<style is="custom-style">
html, body { color: #ffffff; background-color: #212121; }
</style>
The problem I have is that those styles are leaking to custom elements in their local dom, making the font color white.
This should not be happening according to the documentation here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style
My question is: Is this the default behavior or is this a bug?
Thanks
I'm pretty sure this is not related to custom-style but to body. You'd need to change the color and background-color of your elements to something else than inherit which is the default.
See also CSS to prevent child element from inheriting parent styles
Related
Have a menu as an SSI. I wish to change color of displayed SSI links on page. My reading shows I can use CSS to change displayed link color, so created div around the menu and unique div id as well as CSS for the div. The div ID is “menu”.
CSS
#menu {
font-family: Verdana, Geneva, sans-serif;
margin-left: 25px;
a { color: #FFFF00; }
}
Only the unvisited links need to change, hence the single line. This code makes no changes to my links: they show default #0000EE. This code does provide the needed margin, so the server is reading the CSS.
I can change the link colors by adding html change to the body of the page, but I’d prefer not to:
<style>
a {color: yellow;}
</style>
This changes all links, not what I wish to do.
Unless you're using some kind of CSS preprocessor that supports nesting, then your CSS is invalid. Once the browser sees the a tag inside the #menu, it stops working because it expects a CSS property to be there and not another element selector.
To get the correct styling, do this:
#menu a {
color: #FFFF00;
}
If you want to style only links that have not been visited, do something like this:
#menu a:not:visited {
color: #FFFF00;
}
I am using a Wordpress carousel plugin which sets a CSS rule
body * {
line-height:1.2em;
}
This is causing trouble in my layout. The line height in my CSS for body is
body{ line-height: 19px;}
So I override body * as {line-height:19px} but it still breaks some of the layout. When I remove that rule using Firebug, everything works fine.
Now the problem here is, I dont want to edit the plugin CSS file, as every time I update it, I will have to do it.
Is there a way I can nullify the effect of body *?
This declaration is taking precedence over all other line-height properties.
Here is the link. The CSS file loaded by a carousel plugin is breaking the navigation.
Reset the line-height by overriding it like this:
body * { line-height: inherit; }
Better declare an id for the body element, it has highest specificity and than apply the line-height
<style>
#super_container {
line-height: 19px;
}
</style>
<body id="super_container">
<!-- All stuff goes here -->
</body>
Or you can use an inline style which has the highest specificity, which will over-ride any defined style for <body> but that will be tedious if you want to change you need to change on each and every page...
use this :
body * { line-height: 19px !important;}
this will override any other line height being set in other css file , alternativly you can put this in HTML
<style>
body * { line-height: 19px}
</style>
style elements in HTML override all css files
or... you can do this
<body style="line-height: 19px;"> ... </body>
inline css in elements overrides all css files , and <style> elements
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 have been using the following at the top of every page.
body, html {
color: #333333;
font-family: Arial,sans-serif;
font-size: 0.95em;
line-height: 1.15;
}
But my workmate tells me I don't need both body and html.
Is this correct?
No you don't, you can omit html. All visible and presentational content to be formatted and styled with css will (and should) be within the <body> tag.
For the code above, you really don't need to style both html and body
However, some browsers apply margin and padding to one or the other, so it is a good practice to reset both
html, body{
margin:0;
padding:0;
}
This helps especially if you are trying to place elements against the top/bottom of the browser window.
If you're dealing with margin, width or height and perhaps background you may need to target both, but for general properties, you don't. The properties you list here are fine on just body.
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