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
Related
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
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
Ok so in my Chrome developer tools I am checking out some css rules that are overriding my p tags styles.
The css rules below is what is overriding my inner content rules.
media="screen"
#jobcopy p {
color: black;
margin: 0;
min-height: 13px;
_height: 13px;
}
So the html would look like this.
<div id="jobcopy">
<table class="myclass">
<p></p>
</table>
</div>
My css class:
media="screen"
.myclass p {
margin:10px;
}
My main problem is that I don't want #jobcopy p {} to be applied to any p tags in the table. I have tried to specify in my table class a generic margin, like 10px. However, when I look at the code in chrome it shows it being marked out and #jobcopy overrules it.
Is there anyway for me to tell a specific section not to use the css surrounding this content. The other issue is that I have no control over the #jobcopy css. It is being applied by another company.
Thanks!
You can add !important to the CSS rule you don't want to be overridden. So if you want to override the margin in #jobcopy p you'll have to do something like this:
.myclass p {
margin:10px !important;
}
See more: http://css-tricks.com/when-using-important-is-the-right-choice/
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.
Are body properties and * properties different?
I always use body and html properties the same way. Can I use * properties with body and html?
And what should be different in * versus body properties?
I don't understand why it is necessary to use both these properties?
If I use one of them does it create any problems?
I use this
*{
margin:0;
padding:0;
background:#FFF;
}
and in body
body, html{
margin:0;
padding:0;
background:#FFF;
font:normal 12px verdana;
color:#0086ca;
}
when I use body, html it changes the background. When I remove background from * it didn't change bg color.
* (Asterisk) - It is a wildcard, this means it will select all elements within that portion of the DOM.
It's a universal rule which affect on every element.
for example:
Margin every element on the page
* {
margin: 10px;
}
All HTML components will have those attributes.
Body affects only on the body tag...The elements within the tag aren't affected - (they are not getting the same attributes.)
body applies to the <body> tag, while * applies to every tag. An example of the difference can be seen in the following:
body { margin: 2cm; }
versus
* { margin: 2cm; }
The first gives the body a margin – the second gives every element a margin.
On the other hand, the following code:
body { font-family: Courier; }
will change the font family in the whole document since CSS uses cascading styles, i.e. nested tags inherit certain style properties from their parents – in this case, the font.
Using * in CSS matches any element. Using it alone is rarely useful, because you will target every element in the page.
If you for have html code like this:
<html>
<head>
<title></title>
<style>
body { font-size: 50px; }
</style>
</head>
<body>
<div>
<form>
Name: <input type="text"/>
</form>
</div>
</body>
</html>
The font size set for the body will affect the text "Name:", but it will not affect the font size of the input element, as it has a specific size set by default.
If you now add the style * { border: 10px solid red; font-size: 100px; } this will put a border on the body, div, form and input elements, and both the text and the input element will get the font size.
The * selector is more useful in combination with other selectors, like selecting any child element to a specific element:
#Menu > * { float: left; }
Regarding what to use for the html and body element, you only need to set the margin, padding and background for the body element.