🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Change link font & color
Questions
Student Gallery
Be the first to share something.
Course info
Overview
- You'll need a laptop (Mac or PC)
- Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.
Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
So we start our H ones, which are heading ones, and our H twos, our heading twos and our paragraph tags, our P tags earlier in the tutorial. Now in this one we're gonna look at these guys. So, um, these guys come along with a few defaults. They go blue, they are times near Roman, they're moderate size and they've got this little underline under them. So what we need to do is we need to figure out what the tag is. Now in the previous tutorials it was easy because we actually made this one an H one.
So we really knew that was an H one tag and we created this one, we call it an H two. So in this one though, these guys get made. When we add a hyperlinks, they get a tag added to them, how to figure out what tag these guys are. So we can style them with our CSS. It's quite easy. So I've highlighted the word home and down the bottom here, this is my tag selector.
I love this guy. He tells me what the tags that are applied to this. So the body is the overall part of the website. That's everything that the user sees. Okay? You generally don't have to worry too much about the body tank.
He is in an unordered list, which is a bullet point, and inside this list item, which is the dot itself. Okay? And this is the bit I wanna play around with. This is the A, it's called the active link. So unfortunately, yeah, it's, it's not easy to guess. So it's the A tag is what a hyperlink is.
So if I style my A tag now it will style 1, 2, 3 of my, um, hyperlinks. So let's give that a go. So I've got my cursor flashing in here. Why not? Um, it doesn't really matter where your cursor is flashing. You can type it in afterwards.
I'm gonna go make sure it's going in on my design. Uh, CSS design. I'm gonna make sure it's at the main css. I'm gonna create a new selector and you can see it's brought through whole list. I just want to style the A. So I'm gonna delete everything.
That's not the A. And what I'd like to do is I'm gonna play around with, uh, the color, which is an important one 'cause it's gone blue. So I'm gonna zoom out so you can see everything. So you can see my hyperlinks over here. They're blue. So go down to text and you'll CSS designer font color.
I'm gonna change it to, I'm gonna change it to green. Click enter. You can see my hyperlinks over here. All gone green. Perfect. And the next bit we're gonna do is, um, play around with a font.
So I'm gonna pick my gill sends. Lovely. And the last one is The text decoration. It's this line underneath it. You can see down here under text decoration. There's my options.
I've got one called none. There's the underline, which it's already got applied. There's a overline, which I'm never sure what to use for and the line through. So what we need to do is say none. If you leave it blank, it's gonna stay with the default, which is the underline. But if you tell it, say, I would like you to be none, none of these things, if I zoom out now, you'll see my home about us and contact us.
Have nothing applied there. Great. Um, so that's how you style a slightly more unique tag. Um, and definitely how you style the, uh, hyperlink or the links. Alright, thanks for this. I'll see you in the next tutorial.
How do I style hyperlinks in Dreamweaver?
Create an 'a' selector in Dreamweaver’s CSS Designer, then use its text properties to change your links’ colour and font. To remove the default underline, set text decoration to 'none'. A single rule can style all three navigation links in this example: Home, About us and Contact us.
Dreamweaver Tutorial: Styling Hyperlinks with CSS
Key takeaways
Identify a hyperlink’s HTML tag using Dreamweaver’s tag selector.
Create one CSS rule to style multiple links together.
Change link colour and font in CSS Designer.
Remove underlines by explicitly choosing none, rather than leaving the setting blank.
Why hyperlinks need their own styling
You can have your headings and paragraphs looking lovely, then notice that your navigation links still look quite different. In our example, the Home, About us and Contact us links start out blue, underlined and displayed in Times New Roman at the page’s default text size.
These links take visitors to another page when clicked. Their appearance, however, needs its own CSS rule. Just as you can style heading tags such as h1 and h2, or paragraph tags such as p, you can target the tag used for hyperlinks.
The trick is knowing which tag that is.
1. Find the hyperlink tag
Highlight the word Home in your page, then look at the tag selector along the bottom of Dreamweaver’s document window. This is a handy little tool: it shows the HTML elements surrounding your selection.
For this navigation list, the structure includes:
body: the part of the HTML document containing the page’s visible content.
ul: the unordered, or bulleted, list.
li: an individual item within that list.
a: the anchor element used for the hyperlink.
The tag we want to style is a. It is not quite as obvious a name as a heading or paragraph tag, so the tag selector takes the guesswork out of finding it.
All three navigation links use this same tag. That means an a selector can update them together, rather than requiring a separate rule for each link.
2. Create an a selector in CSS Designer
Open CSS Designer and make sure you have selected the stylesheet where the rule should go. In this example, that is main.css.
Select main.css in CSS Designer.
Add a new selector.
If Dreamweaver suggests a selector containing the surrounding list elements, remove everything except a.
Confirm the selector so you can edit its properties.
You can leave your cursor inside the link while doing this, but its exact position is not essential. What matters is that the selector you create is simply a.
This rule targets anchor elements generally, not just the Home link you used to identify the tag.
3. Change the link colour and font
With your a selector selected, go to the Text properties in CSS Designer.
First, change the font colour from blue to green and confirm the choice. Check the page: Home, About us and Contact us should all change colour together. Perfect. That tells you the rule is reaching all three links.
Next, choose Gill Sans as the font family for this example. You are now controlling both the colour and the typeface through the same hyperlink rule.
There is still one default appearance to deal with: the line underneath each link.
4. Remove the hyperlink underline
In the Text properties, find text-decoration. The available choices include:
None: no text decoration.
Underline: a line beneath the text.
Overline: a line above the text.
Line-through: a line through the text.
Choose none explicitly to remove the links’ default underline.
Select none to remove the underline. This is the important bit: leaving the property blank is not the same as setting it to none. In this example, a blank setting leaves the default underline in place.
By choosing none, you are giving CSS a definite instruction to apply no text decoration to these links.
5. Check all three links
Return to the page and check the navigation. Home, About us and Contact us should now use the chosen green colour and Gill Sans font, with no underline.
One anchor rule gives all three navigation links the same appearance.
That is the whole workflow: identify the tag, create its selector, then adjust the text properties. Hyperlinks have a slightly less obvious tag name than headings or paragraphs, but once you know to target a, styling them follows the same basic process.
Key terms
Hyperlink: a clickable link that takes someone to another page. The example uses Home, About us and Contact us as navigation links.
Anchor element: the HTML a element used to create a hyperlink. It is the element targeted by the CSS rule here.
CSS selector: the part of a CSS rule that identifies which elements to style. The selector a targets anchor elements.
Tag selector: Dreamweaver’s display of the HTML elements around the current selection. It helps you identify which tag you need to style.
Text decoration: a property controlling lines such as underlines, overlines and line-throughs. Choosing none removes the decoration in this example.
FAQs
Which HTML tag should I select to style hyperlinks?
Use the a tag, also called the anchor element. You can confirm it by selecting a link and checking Dreamweaver’s tag selector.
Why is my link still underlined?
Leaving text decoration blank does not remove the default underline. Select your a rule and explicitly set text decoration to none.
Do I need a separate CSS rule for every navigation link?
Not for this example. All three links use anchor elements, so one a rule applies the colour, font and text decoration to them together.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
