Browsers usually set different default styles for elements. Users can also override the defaults using custom stylesheets.
I often override these default styles using my own styles, e.g.:
* {padding:0; margin:0; }
However, I wish to respect the default stylesheet for certain element attributes, e.g. the <body>'s default padding and margin. I tried:
* { padding:0; margin:0; }
body { padding:default; margin:default; }
But it doesn't work. Neither does initial.
Is there a way to solve this problem by selecting all elements but excluding <body>?
Is there a way to solve this problem by selecting all elements but excluding <body>?
Since everything that is displayed in the viewport consists of <html>, <body> and <body>'s contents by default, you can just select html, and all of body's descendants:
html, body * { margin: 0; padding: 0; }
default doesn't work because there is no such keyword. initial doesn't work because the initial margins are 0. It is not possible to reset a property to its browser-given default value after you have changed it using CSS.
html, head, head *, body * { }
<html> and all descendants of <body>:
html, body * {padding:0;margin:0;}
Use the body * selector.
body *{padding:0;margin:0;}
Set them first to 0, then override the wanted values afterwards. You'd be better off using a CSS Reset though, but if you reall want to use the asterisk, this method will work.
* {
padding:0;
margin:0;
}
body, html {
padding: 10px;
}
http://meyerweb.com/eric/tools/css/reset/
Related
I am trying to figure out the best way to accomplish reusing some of the nested styles in Less to prevent duplication, but I am not sure if I have found the best way.
Right now I have something like:
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
Now I want to apply those same inner link styles to the selector .action-link a without applying the outer styles to .action-link.
I get my intended output if I do it this way:
.inner-link-styles() {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
a {
.inner-link-styles;
}
}
.action-link a {
.inner-link-styles;
}
which doesn't require any duplication, but I'd prefer to keep those styles in their current location, where they are relevant, than to move them out to mixins.less and increase complexity for the next developer to troubleshoot.
What felt intuitive, but is clearly wrong, was something like this:
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
& a,
.action-link a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
but is there some other prefix I can apply to a selector to have it based absolutely, rather than relative to it's nesting level?
Absolute selectors can't be added within a nested block because once we nest it under another block, the inner selector is considered as a child of the outer one (like in the DOM) unless we add &. to the selector (in which case, the inner one could be another class on the parent itself).
Using mixins or the :extend feature are the best options for your case because you are assigning a set of common properties to multiple elements.
Since parent selector is known (it is either .category-link a or .caption-link a), you can extend the properties of that selector into .action-link a also. This would extend only the properties of the inner link and not that of its parent.
I don't think this increases the complexity for the next developer to troubleshoot because changing the properties in the original .category-link a will change the properties for .action-link a also.
.category-link,
.caption-link {
background-color: blue;
font-family: Arial;
max-width:2em;
a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
.action-link {
a {
&:extend(.category-link a);
}
}
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
I am getting this strange left margin in my tabs list.
I have not provided any margin. where does it come from ?
here is the screen. The incorrect area is marked in the red box.
Thanks
Unless you have explicitly removed it, that margin is coming from the user agent stylesheet used as the browser default.
If you want it to be removed, you may want to investigate CSS reset stylesheets.
This is because the Default Browser Stylesheet.
Try:
ul {
margin:0;
padding:0;
}
or more specific
#tabs_container ul.tabz {
margin:0;
padding:0;
}
or more generous
/* Basic Reset; remove margin and padding for every element */
* {
margin:0;
padding:0;
}
You should always use a css reset to get good results on all browsers.
For example:
http://meyerweb.com/eric/tools/css/reset/
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.
i set up a style for all my links but the problem is that any anchor that has an image obviously will have the same style.
is there any way i can overwrite the style for the images without having to apply a class to all the images that removes that style?
a img {
/* alternative style for hyperlinked images */
}
I would recomend rewriting your code to not use images but for your links with images just use clickable divs displayed as blocks.
<div id="x"></div>
.y {
display: block;
}
#x {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(IMGPATHHERE!);
}
#x:hover {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(THEHOVERIMGHERE!);
cursor:hand;
}
No, there is no CSS selector which will capture <a> elements which contain only an <img> element. You will need to apply a class either at design-time or at run-time with javascript.
You can use jQuery qualified selectors $('a:has(img)')