CSS is to web designers what 9/11 is to Rudy Giuliani -- it's like the answer to everything. In actuality though, it's turning out to be a huge pain.
Okay so here's my issue. I'm working on a web design project, the first one I've done since college. I downloaded a trial version of DreamWeaver CS3 which is working AWESOMELY -- I like it SO much better than my lousy MX 2002 student version. Only one thing isn't working that well -- my links aren't behaving right. And I can't fix them. Well i can, but it's needlessly complicated.
See my blog? how there are different links and they're all different colors and when you put your mouse over them they turn into other different colors, and sometimes when you click on them they change colors again? All that is accomplished with CSS (short for Cascading Style Sheets).
Styles are great things for print designers like me. Basically they work by formatting large blocks of text all at once. Say you're designing a newsletter or something, and you want all your headlines, subheads, body copy, and captions to have the same look. What you do is set up some styles, you know:
Headlines, subheads, body copy, captions
So once you have your styles set up, to apply a style you just select your text, select your style, and click "Apply Style". At least that's how it works in a page layout program. In DreamWeaver it works basically the same way -- very user friendly, only instead of clicking "Apply Style" you select your "Class" (a CSS style that can be applied to multiple objects) from a drop-down menu.
Now the awesome thing about HTML is it's hyper-text. That means you can link to other pages or objects on the Internet from the page you are writing. Back in the day, all links were the same color: blue. And all visited links were the same color: purple. Google still follows this convention.
But not everybody can use default colors. What if all the text on your website was blue? The links wouldn't stand out very well. It would be great if you could make your links, say, orange or something. The "link", "alink", and "vlink" attributes were invented to make this possible. Placed in the <body> tag, they change the colors of links, active links, and visited links, respectively throughout the whole page.
But what if you don't want all the links on your page to be the same color? What if you want the links on the blue background to be light blue, and the links on the white background to be brown? CSS makes that possible.
But how?
I don't know how. That's my problem. I want all the links in the body copy to have the same link color, all the text in the sidebar to have a different link color, and all the text in the footer to have another color. You'd think you'd be able to define your link colors when you define your style, since in the mind of the designer the two are inextricably linked, but you can't. Your style is a "class", and the link behavior is a "pseudo-class". The two are apparently only loosely connected, if at all. What I need to figure out is how to link the two together.
(A side note, using the <font> tag only solves the problem in IE, not in Firefox and DEFINITELY not in Safari.)
What do I do?
ABOUT ME
- James Austin
- Minneapolis, MN
- I am a 31-year-old graphic designer. This blog contains ramblings and findings from my personal life as well as the occasional industry related topic.
MARKETING, DESIGN, & TRENDS
- A List Apart
- Adverblog
- AIGA
- Boing Boing
- Brand Republic
- ClickZ
- Core77
- Coudal Partners
- Creative Bits
- Creative Pro
- DailyCandy
- Engadget
- Flavorpill
- Grain Edit
- Marketing Profs
- MarketingNPV
- MarketingSherpa
- MarketingVOX
- Mitch Caplan's "What's Next"
- Oobject
- Pitchfork Media
- Relevant Media Group
- Signals vs. Noise
- WOMMA
- Zeldman.com
4 comments:
I facebook'd the answer to you homes. :)
Did Dan get you on the right track? Here's my 2 cents, FWIW:
First, get the Firebug plugin for Firefox, if you don't already use it. It's been great for me when I dabble in CSS because it lets you inspect web page elements to see how other people code theirs and figure out what's wrong with yours.
Second, ditch the font tag. It's old school and going away.
Third, you can combine more than one class using a simple space. Try class="class1 class2 class3".
Fourth, I believe link pseudo classes can be combined with regular classes as in the above example. The way I usually do it is to combine the classes in my style sheet like so:
.sidebar a:link {blah blah}
That means anything in a sidebar div that also has a:link will have the blah blah attributes you assign. Also, check out w3schools.com. I've used it for reference on CSS and other web technologies, too. Their pointer on the correct order for link pseudo classes is handy.
Ah yes, thank you both. You've been very helpful.
I stand by my opinion that there should be a better way to do this in DreamWeaver. CSS isn't new technology! But now I know who to ask about this stuff.
This is all "blah, blah, blah" to me. Glad you have smart friends.
Post a Comment