Fun with Perch

Freeway
61

A # indicates an ID, and a . indicates a class. So in your HTML, you would look for <div class="foo" id="bar" ... and that would relate to these two example styles:

.foo {
	/* anything you want to apply to more than one thing */
	color: blue;
	font: 14px/1.8 Georgia, serif;
	padding: 1em 2em;
}

#bar {
	/* anything that's specific to the one and only id=bar */
	color: black;
	line-height: 1.3;
	font-style: italic;
}

Another fun fact: All other things being equal, an ID will out-rank a classname by a lot. The order of these two rules in your stylesheet won’t matter, because they both apply to the same element, and the ID-based one will override the class-based one in the places where they overlap.

You would choose to use a class-based style over an ID-based style depending on the structure of your page and the nature of the style itself. If it’s something that can (or might) apply to more than one element, then you put those common style rules in a class-based style, so you don’t have to write them out long-hand in every place they need to occur.

You can also stack classes on an element – just add more classnames in a space-delimited list in the HTML. The result is that the element will take on the coalesced product of all of the class-based styles, with exact-specificity clashes governed by the order that these classes are applied in the HTML or defined in the CSS. As I said the other day, it’s like stacking color filters or maybe more precisely, like stacking animation cels in the multi-plane camera. You see only the product of overlaps from a single point of view.

Walter

On May 9, 2013, at 11:09 AM, RavenManiac wrote:

ONe point of confusion. How do I know when to precede a style with a # symbol or a period?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

62

So, I can’t use a label style to target just the copy after the bullets because if I do everything with the tag in the form will be affected, correct?

So, what’s the solution?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

63

Okay, creating a style named .foo worked, but I still can’t add spacing between the radio button and the type.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

64

Look up the inheritance tree. If these labels are in a common container, you can create a very specific selector to only affect them. Example:

<div id="foo">
	<label for="name">Name</label>
	<input name="name" id="name" />
</div>
<div id="bar">
	<label for="email">E-mail</label>
	<input name="email" type="email" id="email" />
</div>

CSS:

label {
	font: 'Lucida Grande', sans-serif;
	font-size: 11px;
}
#foo label {
	color: blue;
}
#bar label {
	color: red;
	font-size: 14px;
}

The first rule governs both labels, because it’s applied to the tag itself. This is the lowest level of specificity. The following two rules are “scoped” using the container IDs (these could equally be container classes if you wanted to do it that way). They override and extend the base rules defined in the tag selector.

Walter

On May 9, 2013, at 11:28 AM, RavenManiac wrote:

So, I can’t use a label style to target just the copy after the bullets because if I do everything with the tag in the form will be affected, correct?

So, what’s the solution?

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

65

Now that I’ve given this some thought, there’s no reason the text next to the radio buttons should be smaller and a different color from the rest of the form.

They have to be getting their styling from a Perch template or Perch CSS. I just wish I could find it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

66

They have to be getting their styling from a Perch template or Perch CSS. I just wish I could find it.

Or default Browser styling ie user agent stylesheet

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options