I’m learning web design from the ground up. Right now I’m trying to learn the default behavior of the various elements; for example, I want to find a list of elements that have a default width of 100%, a list of those that have a default width of auto, etc. What’s a good ready reference for this kind of thing?
I use http://www.w3schools.com/ as a reference for all kinds of HTML and CSS stuff.
I’ve got lots of links for you, but let me begin with something I saw recently: Cheat Sheets for Front-end Web Developers
This links to a bunch of quick-reference “cheat sheets” for HTML, CSS, etc.
Another one: HTML Quick List
Also, download and install the Internet Explorer Developer Toolbar and/or the Firefox Web Developer add-on. These tools let you click on any element on a web page and view all styles that are currently applied to it (including defaults).
I recommend HTML and XHTML: The Definitive Guide by Musciano, et al. (O’Reilly). Yes, it’s a book, and yes, you have to pay for it. Still, it is very good at explaining all the details behind the HTML rendering philosophy.
I find books easier to use for concepts, and online easier to use as a reference. What you’re looking for is concepts; how elements act in concert with each other. The behavior of an element is often determined by its context, particularly the elements near it.
AFAIK, all visible elements expand to fill their bounding block unless you say otherwise. For that reason, it’s more important to know what the bounding blocks are, rather than what the width behavior of an element is. As a sort of kludgy example, regardless of the widths you specify for each cell in a table row, the row won’t expand beyond the actual width of the table. In this case, “width” is just a relative term.
This also points out that you need to know both HTML and CSS, since CSS styles often control the width behavior of an element.
One thing to note is that “default” values vary from browser to browser.
To combat this, a good css developer will start with some css code to reset all values so that all browser are acting the same. Yahoo provides a css reset file that you can use here:
This is THE best place to learn and for scripts