Chris is learning CSS #1

My print designer colleague is trying to learn Dreamweaver and Flash at the same time. She’s progressing quite nicely actually, and it’s only been 2 days. She’s done more studying in those 2 days than I have in a year! I’ve been forever trying to learn. I really should pick up the pace.

Anyway, earlier she encountered a problem. Knowing that in our team (print design), I’m the only one who has any HTML background, if you can call Level 0 a proper background, so she came over to my desk to ask me if I could help. I’m super keen on learning this shit and any exercise is a welcome practice, so I head over to her workstation to see what she needed.

On Dreamweaver, she wanted her links to change colors when moused over, clicked on and finally, for the visited links to be a different color. I’m not familiar with all DW has to offer, so I couldn’t find the option for that and we wanted to sort it out already without having to go through another tutorial. And anyway I’d like to learn how to hand code everything myself first, lest I start relying too heavily on DW. I feel like the program generates too much code than is actually necessary. But what do I know right? So anyway I told her that I only knew how to do it with CSS. So she let me have a go at it.

I inserted this code in her HTML file, between the <style> </style> tags, since it’s only for 1 document. And anyway it’s just practice.

a:link {

color: #999999;
text-decoration: none;

}

a:visited {

color: #fffea2;
text-decoration: none;

}

a:hover {

color: #ffffff;

}

Initially I typed the code as “a.link”, using a dot instead of a colon. Then I quickly remembered the dot is for the class selector, which is a completely different thing. Anyway after that, I made the mistake of allowing the hover section come before the visited one. It didn’t reflect when we looked the file in preview and it took me a while to realise that there’s a hierarchy to it. So I moved the hover bit to the end. If I wanted an option for a:active (meaning when I want the link color to change when I click on it), I would have had to place that after hover. So that’s link, visited, hover and then active.

Also I had to add the “text-decoration: none” bit because the underline appears when we preview.

I know it’s super simple stuff for web design people but my colleague and I were ecstatic to see the changes. It’s so addictive.

This entry was posted in Geekery, Learning. Bookmark the permalink.