CSS Tutorial - Web Development Tutorial for Beginners (#5)

Key Takeaways

Okay, so on our last tutorial, we started off uh with an introduction to Bootstrap, Twitter Bootstrap. I would highly encourage you to use Bootstrap from now on. Start getting comfortable with it because you will write very few CSS rules and you'll be able to create very great stable stuff. Websites all over the world, huge scale sites are using Twitter Bootstrap. Um, and check the link if you did not catch that tutorial. One thing you'll notice is this is not working yet. That is because I accidentally forgot jQuery. You'll notice I grabbed on Bootstrap's website. I grabbed these three things, two CSS and one JavaScript. Uh but what I forgot is that Bootstrap uses jQuery. So if you scroll down to basic template, you'll see that they include jQuery here. So I'm going to copy that and put the jQuery script in my thing as well. Now you notice everything's working beautifully. My dropown works. So that's what it looks like on a mobile. And if you expand it out, here's what it looks like on a regular website. Looks very nice. And there we go. So now I'm going to go ahead and move forward a little bit more CSS stuff. So back to basic CSS maybe for one more lesson and then we'll move on and be done. uh say we wanted to create one of these ourselves because one even when you're using Bootstrap every once in a while you've got to make something custom and it's really good to know some CSS moving forward. So let's say I want to recreate one of these kind of widgets here. Let's say instead of calling it panel I'm going to call it my panel. Let's go div. Let's go header and we'll call it class body. We'll add a single paragraph in here. So, right now completely unstyled seems to be normal. Let's go and open my main CSS. I've already created three rules here. My panel and heading. So, let's go ahead and give my panel a margin. You can see I did a little bit of my homework beforehand. 3%. So, that way it's always going to be within 3% of either edge. And let's give the heading a color. This is some of this is going to be a little bit repeat for you. So, give it we'll give it black for now just so we can see where we're sitting. Did I call it header? Yeah, called it header. Heading. And one thing you'll notice is is I did my panel space heading. One thing that people do accidentally all the time is they'll do my panel dot heading. And what that is going to look for is something that has the class my panel and the class heading. This is the same as that because it's looking for something with both classes. So you'll notice right now this selector is not selecting anything. If I did my panel and added a class of heading. Now I've added two classes. You'll notice it starts picking up on the entire panel. Now just in case you run into that and wonder what's going on and why your code's not working, you probably forgot a space there. Anytime you add a space, it goes to the next level and is looking for a child of this guy. So I obviously don't want black. So, let's look into kind of doing a a color picker to pick a color we want. I'm just going to go to Google and I'm going to type in online color picker. There we go. There we go. Online color picker. Let's pick a color. Let's say a nice greenish. Sure, that works. I'm going to copy that. And you'll notice it gave me the pound hex value. So, I'm going to do that. Paste it in. Hey, we have kind of a normal looking color there. That's kind of where you're going to do a lot of your color picking from if you don't use Photoshop. Let's go ahead. You'll notice this is snug up against the edges. So, I'm going to add some padding to this. I'm noticing my padding here is a little bit less on the top and bottom and more on the left. So, I'm going to try maybe 10 pixels top, bottom, 20 pixels left, right. Yep, looks pretty good. And then I'm noticing there's actually kind of a darker color for the text. So I'm going to go back to my color picker. I'm going to try to darken this guy up a little bit. And see if that could be a good text color for me. Yeah, looks kind of good. A little bit lighter, but no worries. I'm also going to make the border that same color. one pixel solid. When you're defining borders, you go with your width first, then your style, and then your color. I could go I believe I can go dotted. Pretty much solid is what you're going to use all the time. Yeah, there's dotted. I think I can go dashed. There's a bunch of them out there. You'll need to search for them. Yeah, dashed. Usually, you're just going to use solid. One pixel solid. There you go. That's looking nice. And then I'm also going to add a border radius, which is a different rule. And that's going to be the curved corners. Let's try 10 pixels. That's a little too much. Go five pixels. Border radius works like everything else. I can give it five pixels, five pixels, 0 0. And that'll give me five pixels top, bottom, zero on the left and the right. If I just kind of want that one corner, I can go zero pixels. You notice it'll lop off this guy. So, I just kind of have that one corner right there. Um, and I'll just go five pixels for all of them. One thing you'll notice a lot of times, too, is you'll notice dash WebKit border radius. And what it is is older browsers used to not officially support this border radius tag because it's pretty new. So these this is called a vendor prefix. This is any browser using WebKit which would be Chrome or Safari or pretty much any mobile phone. Older phones will need to add that. Mozilla Firefox uses the MO 5 pixels. And so lots of times if you want to make it fully compliant with older browsers, you'll do these things. You'll do these three. You'll go border radius, webkit border radius, mo border radius. Um, and then if you happen to be sporting older opera, o border radius. It's kind of annoying. We're pretty much on the verge of being out of these things, but it's still not a bad idea to add in the vendor prefixes. For now, I'll just keep them out just for cleanness. You also notice I'm I'm trying to kind of keep it in alphabetical order here. It's not a rule that you have to do that, but it's a good idea. Keeps things clean. Uh, one thing I'm noticing is I do not want a border radius on the bottom of my header. So, I'm going to go five pix zero. Actually, I think I might need to go Yep, that is not going to do what I want it to do. Five pixels. Five pixels 0 0. So, that way it's on the top and the bottom. And I want this border to actually apply. Wh want this border to apply to the entire panel, which is what's going on up here. There we go. That's looking a little better. And I want this border radius. You notice my this has a uh border radius, but I want the panel to have a border radius as well. There we go. Looking better. Now, this has the border radius. You see, if I take this off, then it's square. And then the border below it is square. and you'll get a couple weird little pixels there. So, I'm keeping the border radius on both of them. Let's move on to the body if I can type my panel body. Let's give it padding. Let's try the same 10 pixels 20 pixels. There you go. Looking good. And I actually want this to have a five pixel border radius everywhere. There we go. We basically recreated this panel. Uh let's look into a couple other things. You know what I'm noticing is it looks like there might be an ever so slight shadow on these panels. So I'm going to go ahead and add this. It's called box shadow. And box shadow has four values. It has your offset, uh, your X offset, Y offset, your blur, and then your color. So, kind of how that works is is let's start with a 10 pixel, 10 pixel, 0ero pixel blur, and just black to make it clear what's going on. You'll notice it's 10 pixels this way, 10 pixels down, and it's not blurred at all, and it's black. So, if I make this blur 10 pixels, you notice it starts getting fuzzy now. And so, with these guys, it looks like they don't have any offset at all. It's kind of like just a all-inclusive shadow. This is probably a lot smaller, like four pixels. And this is not black. It's a very light color. Maybe like a [Music] 999. Yeah, you can barely see it now. Looks like that might be maybe even lighter. CCC is a lighter color. I have a few of these colors memorized. There you go. So, it's got the ever so slight gray shadow that these other ones seem to have. So, that's kind of how we're going to do a box shadow on this entire panel. Let's say we wanted to give this I'm going to copy and paste this a few times. Let's say we wanted to create three of these and whenever we hovered over one, we wanted a delete button to appear. What I'm going to do here is I'm going to add a div. And this class will be show on hover. And then in here I'm going to add a bootstrap button. It's button danger is a red one. Delete. There we go. So that's there. It'll always be there for now. Let me go and add that to my other two. Yeah, it's actually a little big. Okay, I want it to be button XS button extra small. There you go. So, let's go ahead and add this to each one of these. So, now they each have a delete button. And I'm going to go uh I'll make it show whenever you hover over my panel. So, here's how I'm going to do that. my panel show on hover is going to be display none. So they are not going to appear at all. And then what I'm going to do is my panel hover. So now these rules will only apply whenever you're hovering over my panel. My panel show on hover display back to inline block which is what it was before. So now whenever I hover over a panel that appears nice. So now it feels like your page is doing some really smart stuff. Really all we're doing is we're hiding it and we're showing it whenever you hover over this panel at all. Kind of nifty. You know what else I could do is I could go my panel hover. I could make this box shadow get a little bigger when you hover over it. This kind of just some ideas of things that you can do. Maybe I'll make it like eight pixels. And I will make it a more apparent shadow. There you go. Now, whenever you hover over it, see that shadows just a little bit more just to show you what I mean. I'll make it full black. A little too much for design sake, but whenever you hover over it, kind of gives it a little pop. Now, I could even make the border a little bit larger. Maybe like a two pixel border. There you go. Now, it really kind of has some pop whenever you hover over it. See, it jumps a little bit because the border is now made it a few pixels larger. Now, it's got an extra pixel on top because that border is two pixels, extra pixel on the bottom. So, you notice it kind of the guys below it do this little jump down thing. So, ideally, I'd probably adjust some margins there on this hover thing. So, let me see. Maybe that'd be 1% 3%. See if I can compensate for that. Oh, you know what it is? That delete button showing up. Okay, so that's automatically going to be larger. That's supposed to be happening. That's what's going on there. We'll leave it. So, that's kind of a little bit more intermediate CSS. And before I wrap up this lesson, um, I'll get into kind of a few more selectors and I'll talk a little bit about specificity and cascading stuff. So, let's go ahead and just clear all this out. Save that. Let me clear all this out. And I'm just, you know, I'll just create a complete blank slate here. Before we wrap up this lesson on CSS, I'm going to go ahead and create an H1, hello world. So, I'm going to in my stylesheet, I'm going to go H1 color red. Now, H1's are going to be red. H1's should be red. Not exactly sure what's going on there. Oh, probably because Bootstrap has an H1. Let's make it a class H1. Bootstrap has a whole bunch of rules in it. And so that's where all my colors are coming from from Bootstrap already. Oh no. What's going on here? Let's just make it a paragraph. One of the things you'll run into sometimes with using something like Bootstrap is it's doing a whole bunch of stuff and you don't exactly know what it's doing and so sometimes you can get frustrated trying to do things. So it definitely there's some downsides. Let me make it really large 400%. Okay, there we go. Kind of ran into an issue that I'm actually going to demonstrate here. So now paragraphs have a color of red. Anything that comes after will overwrite if it's the same level of specificity. So if it's as specific. So I'm going to color blue. Now you'll notice even though I've defined a color red, P's will have color blue because it came after the fact. Now if I went P class um primary and this had a class of primary. Now it became right again because this is a more specific rule than this. This just applies to paragraphs. This applies to paragraphs with a class of primary. Now if I went p ID of [Music] main green. So now if I have an ID on here, ID just got even more specific and now it's green. So you'll see that that's kind of even though they came before IDs are more specific than uh classes and classes are more specific than just elements. And so that's kind of how that works. You'll notice even if I take away the P, an ID is more specific than both of these. However, if I go primary, matching by ID or matching by tag name and by class name is considered more specific than matching by class name. So, this sets it to green. This overwrites it to red. And then this doesn't do anything. This makes it all paragraph tags are now would be blue for any just standard paragraph tags. So that's kind of how specificity works is if I were to also go primary other if this said P.Primary is red. I'll do it like this. P.Primary is red. P.Primary. Is green now. So if I make it class primary and other. Well, now that's considered even more specific. It matches on three levels. it matches on a tag level, on a class level, and on a secondary class level or an additional class level. So, this is now the most specific rule that applies to my paragraph tag here. So, it will be green. So, that's kind of how that goes if you're including it all in a stylesheet. Now, let's look into doing something else. Let me copy main CSS and let me save this as other CSS. And I'm going to include other CSS after main CSS here. Other main CSS other CSS. So now we have two things we're including in. Let's make main CSS just have P's be a color of blue. And let's have other CSS be P's with a color of red. Now my paragraph is red. kind of what happens is is it goes main, loads up all the main rules, and then loads up all the other rules. And it's no different than if they were stacked on top of each other. So main color blue, then it loads in other color red. That's no different than if you did this blue red. What we've done is we've split them up into separate stylesheets, which sometimes makes sense. If you start getting a really big stylesheet, makes a lot of sense to split them up into groupings. So, it's a lot easier to find out where your file, where your rules go. Let's move on. And so, now let's add a style here. This is a page level stylesheet. I'm just adding a style tag straight in here. I'm going to go P color green. Now, paragraphs have a color of green. You'll notice if I put this before my link, the paragraphs now have a color of red because this happens before loads up these styles. Then it goes to here, then it goes to here. So, they get overwritten by what's here on the page. Um, page page level stylesheet, not really that great of an idea. I wouldn't recommend doing it because then you have to copy and paste rules all over the place. Another third way you can do it is you can actually add inline style here on any tag. Can I do pink? I think I can do pink. I don't know. Let's try purple. I don't think I can. Style color green. Oh, I didn't spell it right. Style color green. There you go. Now it's green. This will always override anything that has been passed up and above in here. So element level style is considered more specific than something coming from a stylesheet. This is a really bad idea unless you're doing it dynamically with JavaScript on the fly as they're doing things. The only way to really change an element real time with JavaScript is by adding things to the element itself. But in general, it's a really bad idea to add styling straight to a tag. Anyway, that probably concludes for this lesson about all you need to know. I'd say go out there, have fun, Google stuff. If you want to know how to make something, say look italics. I'm not going to tell you because one thing you have to learn as a web developer is to get really good at Googling. Just type CSS italics and you'll find it. Type CSS underline, you'll find it. Type CSS pretty much anything and you'll find it online. Uh, but this is enough to get you going. Hope it helps and have an excellent day.