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.
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:
Join us for this helpful class that will give you the tools you need to have your website up and running.
- 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
Software Used: Adobe Dreamweaver CC 2017