How to change html link color in Dreamweaver

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

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

Hi, my name is Dan, and in this video we're gonna look  at styling hyperlinks. Now, to understand how to style a hyperlink, we need  to understand something called a pseudo class. It's a fancy name, it just means that this tag here,  if I select it, it's called the A tag. Okay? And that's to do with my hyperlinks. Now the AAG has a couple of versions.

One is called, um, the active link,  which is just sitting there, and there's another one, okay,  when a hover above it. And so there's a different style  for not hovering and hovering over. And these are called pseudo classes. It just means there's one here called that one  where nothing's being touched is called Link. And there's a pseudo class called Hover,  and there's a couple of other ones as well. But those are the two main ones you're gonna use.

So now you need to style them in order, you need  to do the link first and then the hover,  otherwise they get a bit backwards and muddled up. The way I remember it is way I've stolen from, uh,  CSS tricks, where love hate  is the easiest way to remember it. So you've got link first and then hate,  and it's just a, ah,  it's just an acronym to help you remember it. So let's do link first. To do it, I am going to, uh, make sure I'm in main css. I'm gonna create a selector.

I'm gonna type in a and a, uh, pseudo class has a colon. And you can see these are all the different pseudo classes. So, and you can see here the visited one. So you can have a different color if a page,  if a person's already visited that link  and that gets used less and less. There's a hover one that I want. There's all sorts of different ones.

So I want the one that's called Link. Great. I'm gonna click enter and I would like to style the text,  and I'd like to make the text white. Great. So all the, um, links, um,  that I've got on my website are all now white. The next thing I wanna do is do another pseudo class,  which is a colon hover.

Okay? And I want to get rid of this white line  underneath the underline,  and I would like to change the color of it. Let's do that by making sure we're main do CSS. Let's make a new selector. And this is a colon and we're gonna use hover, right? And the hover one, I want to do a couple things.

I would like to remove the underline, which is appearing. You do that under this one called text. And there's one here called text decoration. And you can see this one here. First one, it says none. So I click that and there's no underline Gone.

Okay, the next thing I wanna do is change the color of it. So I'm gonna be a color. I'm gonna pick a color in here. Click enter. I've just picked a random color,  and I want this to be my hover color. Great.

So you've just learned what a pseudo class is. Sounds fancy, but really it's just that there's a tag,  which is called a, and it's got some extra  little bits, okay. Called these pseudo classes that we can style. Now we've styled our link and our hover, um,  and it's gonna style them all. Okay? So it's styled this one and this one.

Now, if you want them to be different, okay,  because there's gonna be, um, instances  where you don't want them all the, um, links  to look the same and say, down here,  we wanna make this look a little bit different. If I change this one, obviously this a link here,  it's gonna change the top one. So what we're gonna do is  Use a class, okay? And we're gonna do a special thing with a class,  add a pseudo selected to it. So to do it, we're gonna make a main CSS. We're gonna make a class and we're gonna call this one, uh,  uh, footer link.

And we're gonna add the pseudo class afterwards. So, and we're gonna put in a colon  and we're gonna put in link. And in this case, actually, I just wanna change the hover  of it to make it a little bit special down the bottom. So I'm going to add the pseudo class hover,  so it looks a little weird, but is our regular class,  and then the little pseudo selector, which is our colon  and the hover. So what I'm gonna do now is change it to be, um,  when it gets hovered over, I'm gonna change  the color to be red. Okay?

So it just means down here. Now, nothing's gonna happen, um, until I add my class. So I'm gonna add the class called, um, footer link. Okay. And when I hover above it, okay, it activates  that pseudo class hover all,  and you could do it obviously for the link or the hover  or any other pseudo selectors, and go around  and make lots of different classes for the different kinds  of hyperlinks you'd like to see. All right, let's do a save all file, save all,  and move on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025