Freeway Pro encourages you to apply styles in a very granular way –
treating every element like a board in a picket fence. You paint them
one-by-one and that’s it. Want to change color or font-family? Then find
that board/item and manually change it.
CSS, however, gives you some other options to consider that automate the
whole process in a smart and creative way.
For example, I usually apply basic color and font-style to the body tag -
that’s right, there is already an html tag called body (NOT to be confused
with the popular .body style users tend to make for their ordinary text).
This sets the general color and font for all my text automatically… I can
type whole paragraphs without applying a style, and headlines too with just
the appropriate h tag (1, 2, or 3). Granted, the Freeway work view doesn’t
reflect this very well, but it is fictitious anyway so I don’t care. My
resulting code is cleaner and looks more professional.
If I want headlines to have a different font or color than other text
types, then instead of repeating these new properties for each h style tag
I make a group CSS Tag style, like this: h1, h2, h3, h4 – the commas in
the CSS selector are used to group these together for whatever properties
you want to apply to them. Again, this is not a style that you have to
“apply” - the browser will do all that for you. And, again, FWP won’t apply
it within the work view.
Okay, so now I am effecting general copy and headlines without ever having
to “apply” a single .style3748b17 to anything. But what if I want a
specific item to be different than the rest?
Often I like my header h1 to be different than all the other headlines on
the page – in color, size, font and style. The Freeway Way would be to
make style h1.styleXYZ and apply it to the h1 in the header element. On
every single page. Like painting boards in a picket fence. The CSS Way
would start by asking “what is unique about this element?” Simply put, it’s
an h1 headline found only in the html5 header element. So I make a Tag
style with the selector name “header h1” – this is a “descendant” selector
because the space between them is the CSS way of saying “all h1 elements
that are found inside (or descended from) header elements”. So, whatever
style properties I define there just apply in the browser… no need to apply
it in FWP.
And that’s just the simple stuff. CSS let’s you write styles just about any
way you can think, target anything you want. Of course, it lets you be
practical too - painting one board at a time, if you like.
The real beauty of all this cleverness shows when I want to make a change -
which is what you originally asked about. See, I don’t have to touch my FWP
workspace… a simple Edit Styles instead of hunt for every occurrence on
every page does the trick.
–
Ernie Simpson
On Tue, Oct 1, 2013 at 11:41 PM, RavenManiac email@hidden wrote:
I frequently find myself creating a lot of variants of the h1, h2, and h3
style tags simply because I need to change the color of the font depending
on where it appears in my websites i.e. black, white, color). For the most
part, all of the other font attributes are the same, only the color differs.
My fear is that should I want to refresh the website with a new font I’ll
need to modify numerous styles to account for the color attribute.
Is there anyway to specify a global style that contains all of the font
specifications except color, and then apply the color on an item by item
basis, without generating a completely new style?
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
