below these three code snippets which one would be the best one to implement in a style sheet ?
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html,body
{
box-sizing:border-box;
margin:0;
padding:0;
}
html
{
box-sizing:border-box;
margin:0;
padding:0;
}
The asterisk selector * applies to all elements, not just the html/body element. You should avoid this, since you could be writing rules for a div later on and you wouldn't be able to give it any margin or padding (or change its box-sizing)! Use either the 2nd or 3rd snippet depending on whether you want to give the body any margin or padding.
Related
I have an element, page-header that I want to remove the margins from. That element also has a child h1 that I also want to remove the margin from. Is there a shortcut syntax in LESS that allows me to do this.
Right now I have this:
.page-header,
.page-header h1{
margin:0;
}
But I'm curious if there's something like:
.page-header &+ h1{
margin:0;
}
that, when rendered, will give me CSS like my first code block above. &+ doesn't work, I checked
The ampersand can only be used with nesting:
.page-header {
&, & h1{
margin:0;
}
}
For more information, see my blog post.
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
It is working when i apply it as inline style.
<div id="footer">#Copyright 2012</div>
#footer
{
background-color:Black;
color:Silver;
width:100%;
text-align:center;
position:absolute;
bottom:0;
}
Look with Firebug which style is winning over your.
Please note that the order of declaration of your CSSs in your page matters, last win.
So you probably have another #footer rule in another stylesheet loaded after your.
When I want to apply same attr to different class/tag I make it like this:
#wrapper .content input[type=radio], .content input[type=checkbox]{
border:none;
}
Or:
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
Or:
#wrapper .content .block1, .block2{
background:#FFF;
}
Is this usage wrong? Would you recommend a site or (e)book or like this for true usage of css?
By using
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
You are actually saying : The element with ID wrapper, having the class content and an input type of the type radio apply the following : (border:none) , for every input on the page having input type checkbox apply (border:none) .
Everything after the comma is af it starts from zero, taking no previous mentioned clauses in account.
But as Andy said, without an example of the HTML al we can do is explain how it is interpreted. (Look at the difference between block2 and .block2 .
Block2 says there is an element <block2> and .block2 says there is an element (e.g.) <fieldset class="block2"> </fieldset>
When I want to apply same attr to different class/tag I make it like this:
To answer that, if you only want to specify a class , there is no need to explicitly mention an ID. You could just as well do
.content input[type=radio],input[type=checkbox]{
border:none;
}
There is no error in this, but in that case it will apply it to all elements with that class. So imagine you have 2 fieldsets, and one class .content , then to both the same css values will be applied.
So if you want to specify which fieldset, you should use the ID of the encapsulating element, followed by the class.
Without knowing the HTML all but the last one could be correct.
You need to call to an id or class for your block2, so it should be:
#wrapper .content .block1, .block2 {
background:#FFF;
}
But assuming .block2 is in the same .content div then you could also be more specific and do:
#wrapper .content .block1, #wrapper .content .block2 {
background:#FFF;
}
i think
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
is best for you
You are actually saying : The element with ID wrapper, having the class content and an input type of the type radio apply the following : (border:none) , for every input on the page having input type checkbox apply (border:none) .
For this you want border none for all checkbox.
You can give same css attribute to different class/tag by separating them with commas.
Ex.
.abc, .kbc, .xyz{
font-weight:bold;
}
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/