How to add Custom CSS to the Bootstrap Framework

 

Create Websites with Dreamweaver

 

Lesson Info

How to add Custom CSS to the Bootstrap Framework

So right now we just have...it's not times at least, right? That's a good thing, but we're working off of the Bootstrap default, right? So, Bootstrap has its own default styling and stuff. So, we want to go ahead and we want to create our own. We never touched the Bootstrap CSS, right? You saw that it was locked anyway, right? I can't get in there and mess with it, and you don't want to mess with it. We're just going to leave the Bootstrap setup the way it is. We're going to let Bootstrap control these little media queries that it has going on, and we're going to work within the confines of Bootstrap. While it's huge, it is actually still confining. You'll see as we go along because you have to work within the framework, and we can. We can make our own CSS. So, I am going to...I'm going to go into my CSS Designer and I'm going to go plus on my sources, and I'm going to say, "Create New," and I'm going to call it, "Donuts." Donuts, main, whatever, right? Whatever makes sense to you, so ...

that you know that it is your CSS. It's going to link. I'm going to browse. I don't know why I do that. I always have to type it again anyway. donuts.css, not com. Okay. And I'm inside. I make sure I'm in my site root just to make sure I'm inside of my CSS folder. I've got my Bootstrap CSS. I've got the Navbar one we just made. I've got my social one that we had from earlier just hanging out so I don't have to recreate it, and I'm going to click "Save," and I'm going to click "Okay," and now, I have a custom. It has nothing in it, but now I can start creating our own things. And I'm going to start with our fabulous body. Just body. Don't worry about what all that junk that it puts in there, okay? So, I've got my body, and I'm going to come over here, and what do I want to do? I'm going to change...let's go down so we can see some text. I don't know how much it's going to change, but it doesn't really change that much. I didn't talk about line-height. So, I'm going to go into type, and I'm going to go ahead and I'm going to do font size. I'm going to do pixels. I don't know where the pixels are. That's all right. I'm just going to type it in there. Let me type, thank you, 16 pixels, okay? And then I'm going to do this thing called, line-height. Line-height is letting. Okay? So, I know this one's weird, I'm just going to put 1.5, and I'm not going to do...it's just going to be 1.5, nothing. 1.5, nothing. Why am I doing 1.5, nothing? Why am I...? I did pixels. Why don't I do 1.5 pixels or whatever? Because my 1.5 is going to apply to anything. So, if I have mixed, sometimes I might mix it, right? Sometimes I might use ems, and percentages, and pixels. Not a good idea, but sometimes we do it. Whatever works. That 1.5 is going to be 1.5 of whatever setting I have my font set to, okay? So, it'll always be consistent, and that's normal. That's industry standard. Everybody does it that way. There's somebody out there going, "Nuh-uh." Okay, so I've got that set, and I want to change the color. I actually want the color of my text to be our purple color. Actually, we have a brown color. I take it back. We have a brown color that I haven't added, right? Or is it purple? It's purple. It works. So now all my text is purple.

Class Description

Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.


Adobe Certified Instructor Melissa Piccone shows you how to: 
  • Create a website from start to finish 
  • Apply web design best practices 
  • Understand Dreamweaver basics 
  • Customize Adobe Stock Templates 
  • Identify basic code to help troubleshoot 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

Reviews

lovemydreams
 

Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!

Kathleen
 

I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.

Linda Knapp
 

She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.