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.
Related
Firstly, i'm new to both HTML and css, so don't be too hash. I have a large header div that I wish to place it flush at the top of the screen, however, there appears to be space of about 10px which I can't remove.
HTML
<div class="wrapper"></div>
CSS
.wrapper{width:300px; background-color: red; height: 300px; margin: 0; padding: 0;}
If you're new to CSS and stuff,
you need to know that the browser applies styles to elements by default.
Like for example to Headings the font-size and font-weight,
to context elements like i, b, span other properties like display inline,
and to DIV elements the display:block; etc...
if you take a look at THIS LIST you'll see that 8px are added to the body element.
If you're happy with the styles the browser adds by default to your elements than all you need is
body{
margin:0; /* to remove the 8px default */
}
otherwise if you're not happy at all, and you wish to have full control over the styles being applied to your elements you can use an Ugly Reset (for margin and padding urgency) using the Universal Selector *
*{ margin:0; padding:0; } /* Global reset. "*" is to target all elements. */
or Google for some Stylesheet Reset code like from: http://www.cssreset.com/
that will help you to control/reset the most of all other elements default styles.
You need to add that to the body as well. The DIV is inside the BODY.
Try setting
margin: 0;
padding: 0;
To the body and the html elements
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
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
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.
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.