Forum Moderators: not2easy
The #1 most important aspect [of understanding CSS]? I'd have to say the "cascading" part, which encompasses not just the cascade but also inheritance, specificity, and selector construction. Once you get all that down, the rest is visual details.
This is still a stumbling block for me. There are times I rely on (my understanding of) the cascade and the design falls apart.
I remember when I first used CSS, long before I started properly getting to grips with it and I defined the anchor style in every instance: paragraph anchors, list anchors, heading anchors... only I defined the hover colours and behaviour identically... oh and I gave classes to everything.
Last summer I took that dated CSS document and took it down from 4kB to 900 bytes.
CSS3 will become even more flexible with the ~ and :not() selectors, among others, which will allow you to do hierarchical formatting on a flat structure. (No extra messy divs).
I wrote an 'outline view' stylesheet that looks something like this (abbreviated):
/* hide all non-header items */
h1 ~ :not(h1), h1 ~ :not(h2) { display: none; }
/* show all nested headers */
h1 ~ h2 { display: block; }
/* show all inner contents on hover */
h1:hover ~ :not(h1),
h1:hover ~ :not(h2) { display: block; }
/* hide all inner contents that are not our children */
h1:hover ~ :not(h1) + h1 ~ :not(h1),
h2:hover ~ :not(h2) + h2 ~ :not(h2),
h2:hover ~ :not(h2) + h1 ~ :not(h1) { display: block; }
The document structure is very simple:
<body>
<h1>heading 1</h1>
<p>text
<h2>heading 1.1</h2>
<p>text
<h2>heading 1.2</h2>
<p>text
<p>text
...
</body>
The first to groups of rules collapse everything except for header elements (h1..h6). The second two groups of rules show only the contents of the section header you are hovering.
Unfortunately, it does not allow you to hover over a paragraph, once you leave the header, the contents all collapse.
For reference, here's a quick overview of how selectivity works:
#id - id selectors get 1-0-0 points.
.class - attribute selectors get 0-1-0 points. (Also counted here are psuedo-class (:link, :hover) and attribute selectors.)
h1 - element selectors get 0-0-1 points.
Now, add up all the pieces of your selector:
UL#top OL#leftmost LI.red a:visited:hover:active:focus { ... }
There are 4 element selectors, 5 attribute selectors, and one id selector, giving the number 1-5-4.
If two selectors match the same element, then you compare the two numbers left to right, and the highest number wins. 1-5-4 wins over 1-4-20, and 2-0-0 wins over 1-5-4. In the event of a tie, the rule defined first wins.
This is still a stumbling block for me. There are times I rely on (my understanding of) the cascade and the design falls apart.
More specifically though, I can't seem to figure out inheritance (I look at that as a subset of the cascade :) ). I'm going to have to just sit down and read through the specs one of these days....
