How to add Custom CSS to the Bootstrap Framework
Lesson 22 from: Create Websites with DreamweaverMelissa Piccone
How to add Custom CSS to the Bootstrap Framework
Lesson 22 from: Create Websites with DreamweaverMelissa Piccone
Lesson Info
22. How to add Custom CSS to the Bootstrap Framework
Lessons
Class Introduction
02:51 2Dreamweaver Project Overview
09:33 3Designing Web Page Comps in Photoshop
14:33 4Save Images for Web
19:55 5Getting Started in Dreamweaver
05:47 6What is HTML
17:42 7What is CSS
05:27 8Prepare to Create a Web Page
07:00Add HTML5 Sections to a Web Page
16:06 10Add and Explain CSS
05:21 11The CSS Designer
19:40 12How to insert a CSS Reset
07:18 13Styling Web Page Elements with CSS
08:31 14Styling with Fonts
10:28 15Understanding Floats and Clearing
05:40 16Creating Navigation and Inserting Responsive Images
23:01 17Styling Navigation Links
14:07 18Add Social Media Buttons
10:29 19Media Queries in our Simple Page
13:29 20Creating a Bootstrap Webpage
10:16 21Creating a Bootstrap Navigation Bar
10:29 22How to add Custom CSS to the Bootstrap Framework
03:42 23How to Create a Bootstrap Header Section
15:24 24Create Custom Media Queries in the Bootstrap Framework
05:48 25How to Create and Edit an About Us and Main Section
27:51 26How to add a Jumbotron Model using Bootstrap
13:35Lesson 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 Materials
Bonus Materials with Purchase
Ratings and 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.
Student Work
Related Classes
Web Design