When you construct a selector (the part of a CSS rule outside of the curly-braces), there are some basic elements that you will use: tags, classnames, IDs, and pseudo-classes.
Tag styles are written using one of the many HTML tag elements: h3, p, ul, div… Class styles are written with a leading dot: .yummy. ID styles are written with a leading #: #PageDiv. The “pseudo-class” styles are written with a leading colon, and are almost always seen in the company of their tag name: a:hover or input:checked for example. These selectors refer specifically to things that can change after the page is loaded – intermediate style changes to reflect the user’s input through the mouse or another cursor analogue.
Freeway attempts to hide some of the complexity of CSS selectors from you, so instead of adding a dot in front of the text value to make it a classname, you type the classname text into the Name field and Freeway adds the dot.
IDs are not exposed at all, I suppose because that’s too geeky for the target audience.
In the Tag field, there’s two possible things going on. At the most basic, you can choose one of the cardinal HTML tag element names from a combo-box picking list. But if you take care to empty out the Name field of any auto-entered “style42” type text, you also get the expert interface for Freeway’s style generator. I go into some length about this on ActionsForge: http://actionsforge.com/articles/view/9-tag-only-styles
In vanilla CSS, there’s no difference between any of these approaches besides the specificity of the selector. You may create a selector using all or any of the following: tag name, class name, id, “pseudo-class” behavior attributes. They are variously more specific than one another, and when you combine them, they become even more specific.
All other things being equal, an ID-based rule will be more specific than a class-based rule, simply because there can only ever be one item on a page with a given ID, and there can be many with the same classname (or tag, for that matter).
If you stack up selectors:
nav ul li a { /* some style here */ }
you get a rule that applies only to a tags that are the children of an li that is the child of a ul that is the child of a nav. That’s pretty specific. But if you wanted a rule that only applied to those elements (and didn’t change the appearance of links inside of other lists on the same page) then you might need to go that deep in the selector-fu to target only the ones you needed.
There are also combination operators: > means a direct child, + means directly following. Here’s an example of the difference:
<div id="foo">
<p>text here</p>
<p id="bar">text here</p>
<p>text here</p>
<div>
<p>text here</p>
</div>
</div>
With the following style rules:
#foo p { color: black; }
#foo > p { color: red; }
#bar + p { color: blue; }
The first two lines would be red (direct children of #foo that are p tags get that color), the third would be blue (the p that directly follows #bar is blue) and the last one would be black (default for all p tags anywhere inside of #foo). The order of the rules in your stylesheet is important, too, because if you move #foo p to the bottom of the list of styles, all of the text turns black. These rules are very similar in terms of their specificity, because the combination operators don’t count toward the rule’s total score. If you added
#foo div p { color: green; }
to the mix, that nested p would be resolutely green no matter where you moved the styles, because having two tag selectors and one ID overpowers those having one ID and one tag.
I could go on about this for days, hope this gets you started.
Walter
On Oct 1, 2012, at 1:05 PM, RavenManiac wrote:
So add a class style and then add the extended code, correct?
I’ll post an updated page as soon as I can. BTW, what the difference between tag styles and class styles (if that’s the right terminology)?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
