Web Design Archive

Coloring Hyperlinks with CSS

Posted 9 March 2011 By Shari Smothers

Why color your hyperlinks? Adding color is one of the easiest ways to draw readers through your pages. Like adding pictures, adding color is a simple way to enhance the usability of your website. Three things you can accomplish with color:

  1. Improves reader scanning
  2. Indicates links
  3. Break up long texts

Design is not my strong suit. I can do most of what I need effectively. Otherwise, when it’s beyond my abilities, I refer to my brilliant graphic design friend, Nida. She’s the person I refer people to when they’re looking for custom graphic design work. Be sure to take a look at her portfolio. Anyway, Nida pointed up a great tool from Adobe.

Color Ideas

Kuler, from Adobe, is a great color scheme tool. On the site, you’ll find colors grouped together. You can use one of their many pre-defined color schemes, or you can make your own. Kuler has a great resource that lets you create custom color schemes and see what they will look like before you start working on your CSS.

You can pick your colors using the W3 Schools Color Picker. W3Schools also links other pages related to color, including a color mixer page. But this isn’t nearly as versatile as the Kuler tool.

You don’t need a lot of colors unless that’s really what you want to do. But remember to address your links (pardon the pun), when you’re planning your colors. You could leave your hyperlinks to whatever is the default color, but a better idea is to coordinate them with the scheme of your website.

One Thing about Formatting

If you’re not using CSS, get started. Small websites (say, one page–or three) can have the CSS code on the HTML page. The best practice for using CSS is to create a separate CSS file and link to it in your HTML head section. Place the following line of code (I place mine after the meta information):

<link rel=”stylesheet” type=”text/css” href=”blank-css-template.css” />

Replace ‘blank-css-template‘ with the name of your CSS file; one line for each CSS file you use.

Pseudo Codes for Hyperlinks

You use pseudo classes to manipulate the hyperlink colors in each of the states.

  • a:link – inactive hyperlinks
  • a:visited – previously clicked hyperlinks
  • a:hover – state when mouse is over the hyperlink text

It’s necessary that you include the link states in the order listed above for it to work properly. Also, you can add another state, called the active state, written a:active. It can be written before or after the a:hover state.

Format Your Hyperlinks

In your CSS document, the above pseudo codes are written without any introductory symbol. So, no pound sign (#) or period (.). A syntactically correct sample of the code you would include is:

a:link {font-family:Verdana, Arial, sans serif; color:#000033; text-decoration:none;}
a:visited {color: #003300; text-decoration:none;}
a:hover {color: #527A00; text-decoration:underline;}

Plug the code into your editor to see how it works. I prefer bold links, so one piece of code I’ll add is “font-weight:bold;” to each line. What are some of your ideas on color in your web pages? How do you manage adding color to your website?

Resources

  1. Kuler, for color scheme ideas, from Adobe
  2. W3 Schools Color Picker
  3. How to Create Rollover Text
  4. Graphics Ninja, for custom graphic designs
Be the first to comment

HTML Editors in Play: Komodo

Posted 24 September 2010 By Shari Smothers

I installed the two applications that I downloaded. And I added another to my bevvy of tools, to be discussed later. I’ve only made time to work with one, so far.

This first one I started using is Komodo Edit. It is responsive and the side area for folders is useful. Like some of the others I’m using, you can change the interface colors, which I find quite helpful. It draws my eyes to anything that might be missing, like the closing bracket. It points up when there’s an error in the syntax.

Read the remainder of this entry »

Be the first to comment

Experimenting with HTML Editors

Posted 7 September 2010 By Shari Smothers

It’s time for many things to change. As usual, that’s a good and bad thing. Change is necessary and uncomfortable. One area in which this dichotomy is most evident than in technology.

When I need web design information, one of the first places I look is About.com to see what Jennifer Kyrnin has on my current topic. She has a great list of website editors.

I’ve been a user of HTML-Kit since I discovered it. A former co-worker told me about it. And then I read on Jennifer’s site that it’s one that people like. That was about 3 years ago. Today, I checked the reviews and ratings again, to see what’s out there that may benefit my work.

Read the remainder of this entry »

Be the first to comment

Studying and Applying to Learn New Skills

Posted 12 July 2010 By Shari Smothers

One of my favorite things about learning any new skill is applying what I learn. Whether it’s new software, new hardware modules, or web design, I want to practice it to master it.

Learning Web Design

There are so many parts to learning web design, and new things all the time. If you’re learning on your own, like me, it’s a good idea to have a plan on how to move forward. I’ll tell you what I do and you may get some ideas for your trajectory.

  • Learn HTML/XHTML: This is the basic code to get your website up and running. You can use only this code for your whole site. It won’t be pretty, but you can see from the naked beginning how things work.
  • Learn CSS: This is the code for prettying up your site. It’s for layout and color and font style and decorations.

Truthfully, these are all you need to build attractive, functional, user-friendly sites. Once you get these well in hand, you can build useful sites that can be a virtual shingle for yourself or others. And then there’s the tons of other stuff you can use.

Read the remainder of this entry »

Be the first to comment

Website Planning Tips

Posted 4 July 2010 By Shari Smothers

There is something really exciting about preparing a website. It’s the joy of opening something new and fresh that gives me a special joy. So it’s really great when I can help someone else with their website. From the perspective of helping, I offer the following considerations when you’re starting a website.

Rein in the King

Most websites are mostly text. Even though, fine arts sites are quite popular. If you are not relying on pictures to get your message across, you need to have clear and well-written content. Whether you’re writing for your site, or you’re having the content professionally written, you need to have a clear, well-defined idea of what you want to say to your audience.

Read the remainder of this entry »

Be the first to comment