How to make a CSS compound selector 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
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. In this video we're gonna look at compound selectors. Now we've looked at a little earlier compound selectors. We're gonna cover it again because uh,  it's important in this case  because, uh, at the moment these buttons here are using some  styling that's coming from Bootstrap, which is kind  of a light gray, um, which is the link. And the hover is a dark gray, so I need to change it. Now you might be asking why,  'cause we've done the links earlier on.

Remember down the bottom here, we went  and changed all the links to have this white  and we changed the rollovers. Why haven't these come along for the ride? And the reason is, is  because Bootstrap has its own specific. So if there was no styling coming from Bootstrap,  they would be perfect with their white a link. But because Bootstrap specifically said be light gray  and then a dark rollover gray,  it's taking control of that styling. So we're gonna have to take it back again by overriding it.

So what we need to do is we need to go through  and create a compound selector. So let's do that. 'cause what I want  to do is I'm gonna click on here  and there is an a link here, remember? And there's a list item and there's all this junk. Okay? That goes in before it.

So what I can do is I can do a specific compound selector. So if I hit selector, this is a compound selector. It's gone through and it's styling everything. Every link, which is the A that is inside of a list, that is  inside of a class called uh, nav bar, right? Which is inside of a class called Nav Bar Nav, which is  inside another class called nav. So it says, if these all are true, apply this style.

Okay? Now this is a little messy. It's quite a lot of detail in here. What you could do is you could tidy  it up by just saying this. If there is an active link that is inside a list item  that is inside this whole overriding nav,  this whole thing here is the nav class. That would work just as well.

Okay? It's up to you. This looks cleaner and tidier and more impressive. And this bit here will work, but it's quite specific  and a little bit ugly. So let's make it look pretty by tying it down. 'cause it is still true.

There is an active link which is  inside a list item, which is inside of the nav. The reason I don't, 'cause I could tidy it down even closer. I could do just this link that is inside the nav. Problem is, is that there is, over here there's a link. Okay? Remember we added a link where it says,  if I click my logo, it's gonna jump to the homepage.

I don't want that to be affected by this list. So I want it to be a little bit more specific. Okay? So the link that's inside the list item,  which are these two guys here, right? So what we are gonna do is, um,  what we also wanna do is I want it to be slightly different. Remember we can put in our, remember what those are called.

That's right. Our pseudo classes. Okay. 'cause I want to not just style the link. I wanna do the link and the hover. Great.

So to do it, I'm gonna go down to my type. Now I'm gonna change the color of it. I'm gonna switch it out to white  and hey Presto, we've got our links being white. Cool. So compound selectors can be a little confusing. Um, we've done it  A couple of times now.

And the other thing to note is  that sometimes when you're working with Bootstrap, you need  to go and find, there'll be a bit of CSS that's counter  or overriding what you are trying to do with some  of your baseline things like we did with our styling,  our basic links for the whole website. Alright, that's it for this video. We are now gonna do our backup. Okay? A file. We're gonna do a save all.

And now we're gonna go out to our desktop  and I'm gonna copy it. I'm gonna go into diss old and I'm gonna put it in here. I'm gonna rename it, call this one backup,  and we're gonna put the following date. It's not the following date, so I am going to just give it  the year of the month,  and I'm gonna put O four B in the day. Great. See you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025