Can you tell me what's the meaning of this:
*{
margin:0 auto;
padding:0;
}
* matches everything. That particular snippet is setting the default padding for everything to 0,0,0,0 and the default margins to 0, auto (that is, vertical margins are 0, horizontal margins are "auto").
* is a wild card. It means the style applies to all tags
that is a wildcard that will effect all the child nodes of the document node. Every DOM element basically on the page. You always wanna put that at the beginning of the CSS otherwise it will overrule all the other rules above it.
I recommend using css reset style sheets. One of the best is on Yahoos YUI project, google I believe also has it. This will do all the initializing of the css and reseting everything for every browser so everything you do will look the same regardless of the user agent. the reason I really recommend this for you is because you are a beginner and you will be banging your head against the wall like I did when css first came out and none of these were available.
You can also jump into fun things rather than dealing with these sort of rules.
It will also speed the performance if you link to it on google or yahoos server. this is totally legal and thats what they are serving it for.
Related
For a simple business-card-style web-page, it seems possible to use the html element in CSS to specify background-color for your document, and add some fancy border / margin: auto / padding: 1em through body. Looks nice in Google Cache, BTW, which would have their header within your body, all nice and fancy, just as it was meant to be.
However, the above seems to conflict with the Internet Archive Wayback Machine, with their interface being overlaid on top of your body (doesn't look very bad, but not the best). Also, the body {margin: auto} part (used to centre the body element) gets lost through the Yandex cache.
We can add a div, and switch the CSS rule from body to div, and from html to body (and it'll look perfect in Yandex cache), but then it starts conflicting with Google Cache, looking really weird; Internet Archive is somewhat better, but their own div's do get dangled with your stylesheets, too, looking quite unintended.
You could argue that I should use an id attributes, but then it's not like it's guaranteed that it's not going to conflict with something else again, too, plus the style will not be generic anymore.
What would be the best approach if I want to stick with standard html5 elements? Perhaps still use body (or html?) to set the background colour through CSS, and an article or section for the box element with the border and central position?
The Internet Wayback Machine does not guarantee1 complete archives2:
Please note that while we try to archive an entire site, this is not always possible....Additionally some sites do not archive well and we cannot fix that.
...
Not every date for every site archived is 100% complete.
So there is no way to guarantee that the archived site's CSS will always display as it did when live or even always be available. The file(s) might not get indexed on a particular date. Nor is there any way to ensure future changes to the Wayback Machine's own CSS (or how they handle archived CSS) won't change and cause other issues.
I just spent an hour troubleshooting an issue I had were all my paragraph elements were shifted down.
This happened after I moved the design from jsfiddle.net to my web host.
I killed an hour before I finally realized I needed to insert
p{margin:0px;}
and all was well...well still off by 1px;
Questions:
Why did this error not occur in jsfiddle.net?
Why does FF CSS Debugger not let me know that there is a margin in there or where it came from. I don't know what is was set to but it was not 0px;
I'm trying to learn from "my mistakes" so I can know what to expect next time.
Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.
Debuggers tend to show the values that you have applied to the document in your CSS.
To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.
Take a look at http://meyerweb.com/eric/tools/css/reset/
I stumbled upon this article
http://www.thefloatingfrog.co.uk/css/my-hatred-of-br-clearall/
When would one need to use that ?
Why is it evil ?
I don't understand the substitute syntax can you explain ?
Setting clear to both with not allow other elements to float on either the left or right side of the element. The class below is an easy way to add this anywhere.
.clear {
clear:both;
}
So when you want to clear something (that is, if you were to float the next element to the left, it would be below the current element and to the left, instead of left of it) you'd simply add the .clear class.
The problem with the following code is that if later on you decide that you don't want to clear everything after the 'something' class, then you have to go through your HTML and remove the br clear="all" wherever you have that 'something' class.
<div class="something">Cool content.</div>
<br clear="all">
<div class="other">Cool content again.</div>
Instead you could do something like this:
.something {
float: left;
}
.other {
clear :both;
float: left;
}
<div class="something">Hi!</div>
<div class="other">Hi again from below!</div>
That way if later on you decide to float all blocks with the 'other' class then you can just remove the 'clear:both;' from the CSS once.
I was about to post something snarky about you not reading the article, but when I saw that it was just a page of vitriolic rage with no explanation, I figured I'd answer.
It's because there are better ways of doing what you want to do -- namely, by using CSS in the way he does in the article, he has separated the semantics of the elements he's displaying from how he's displaying them. Why is this a big deal? Well, for one, he can more easily transform how his page looks when it's shown on different platforms (mobile, desktop) and media (screen, print, a screen reader for the blind), simply by editing CSS and not having to touch the document itself. This feature of CSS is pure gold.
On the other hand, if you use a construct such as this, you put in a hard constraint about your document's presentation that sticks around no matter what media or platform you're dealing with. What makes him so mad? Because once a developer has come in before him and used <br clear="all">, he has to take it out in order to get the benefits I just mentioned. That's why it's so frustrating. One bad developer can disable a whole host of development scenarios for every other developer who comes after.
As far as CSS goes, I have to say that it's a very difficult subject to just pick up without reading all about how it works. It's hard to explain how the clear attribute works if you don't understand floats. I had quite a hard time myself until I bought a great book on the subject.
When you have floated elements, the parent element can't calculate it's dimensions effectively and sizes incorrectly. Other items that follow floated items may also sit out of position. By clearing an element at the end of your floats, you correct alter this behaviour.
EDIT
Actually correct is probably the wrong word to use as this is what is supposed to happen and using the word correct suggests it is broken.
The author is just going off on a crazy rant about how the same thing can be accomplished using CSS on the DIV elements themselves. He's saying that br class="clear" is unnecessary.
It's also not a good practice because it mixes content with presentation. If a web designer wanted to re-theme the web application, he or she would need to modify the HTML to pull out all of the br clear elements, whereas if this was done as the author suggested, then the CSS files could be swapped out independently of the HTML, making their jobs easier and giving them one less thing to rant and rave about.
The rant is of course justified, as these simple, silly lines of code can actually cause a lot of headaches.
The idea is that your markup describes the information, and the CSS formats that information.
A dummy tag to clear floats isnt semantic, as it's only purpose is for layout reasons. There are other semantic ways of clearing floats that keep this separation. As commented below but here for clarity this is a good resource for semantically clearing floats http://css-tricks.com/the-how-and-why-of-clearing-floats/
I am not a designer, but I have noticed many changes between firefox and internet explorer. I have been told that it is a good idea to set the universal selector's (*) padding and margin to 0 and the body's margin and padding to 0 as well. Is this necessary? Is setting both * and body's padding and/or margin necessary?
Each browser has its own 'default' CSS values for each element type. Using the universal selector * to reset margins and padding to 0 removes any cross-browser inconsistencies that may result from the different default CSS values.
Check out Yahoo's Reset CSS:
http://developer.yahoo.com/yui/reset/
Makes dealing with different browsers a lot easier.
Setting the body's margin and padding is there to avoid the default space between window edges and the HTML body. Your specific website design may need this or not; for example stackoverflow needs it for the gray box at the bottom.
It is not needed to set it for * to accomplish that, as obviously the body settings will overwrite the * settings for the tag.
Altering * settings in a brutal way like this just removes sane defaults previously present for all the different tags out there. You should better only alter the CSS which directly bother you, for example to get rid of unnecessary space between specific elements. It's kinda like people giving an absolute default font size 10 for the whole page, which annoys users with special needs a lot.
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.