Building your CSS Stylesheet

Okay, now we’re gonna work on the fun part CSS. So open up your style that CSS. And we’re going to first want to import our font. Now I use Google fonts. You can use another font library if you’d like. But just to give you an idea, Google Fonts provides a wide variety of fonts that can be added to your what your website. So for me, I’m using their most popular one called Open Sans. So the first thing we want to do is do an ad import URL. And inside here, we’re going to import that URL string that they provided. Perfect. And it was CSS always mixture that end with the semi colon. Okay. Now this part, next part is up to you. But I went and added a custom font of my own. So if you want to add a custom font, you can do font face and create a font family. And mine is called Krabby. Patty, regular. And then I want to source it to tell you where the URL location is. And with CSS, you’re going to always want to go out one directory more than what you normally think. And what that means is over here you can see this period period slash fonts. If you notice in our index dot HTML, when we wanted to call something, all we had to do was to image fav icon or CSS styles dot CSS. However, in CSS, since we have it inside of another folder called CSS, we have to get out of it. So we’re going to have to add period period. So let me fill in a little bit more here, and then we can move on to the next step. Okay, now we’re going to get to the fun stuff. So the first thing that we’re going to want to do is add a body tag. Inside here, we’re going to do font family. And we’re going to use that Open Sans that we talked about. And then what we’re doing next is called a fallback font. So if the browser for some reason cannot load that font, we’re going to have it fall back to a sans serif machine font, whatever is on your system that constitutes a sans serif will be loaded. Next, we’re going to tell the entire body to use a size of 20 pixels. And then we’re going to have a line height of 30 pixels. That is a spacing between the lines. And to remove any weird spacing on the left and right hand side, we’re gonna do margin zero and add some fun. We’re going to make a background color. And we’re going to use this thing called hex codes. So you’re going to hit pound 045780. And that is a blue color. So if you have the S code, you can actually drag and it will give you the hex colors here. If not, you can simply go to Google and type in hex code and look up the different hex codes that you need. So HTML color codes, here you go. And that would be your hex code. All right, now let’s save it and let’s see what we got so far. Oh, great. Look at that. We have blue background. The font is Open Sans Serif. But I’m not seeing my Krabby Patty regular loading just yet. And don’t worry, we’ll, we’ll get to that in a moment. So next we want to customize that header. So back at our CSS, we’re going to add a background image. We’re going to tell it to not repeat and to be center centered. Now for compatibility with other browsers, we’re going to want to add in the WebKit Mozilla background size, opera, background size and then your standard background size. Below that we want to say text align center. And the reason why we’re doing that is because of that arrow that you see up top here. We want to force that to be centered of the screen. And then we’re going to add a padding of 150 and a padding bottom of 150 pixels. And we’re going to go over what that looks like. So after refreshing now, you can start to see, hey, I have a background image. I have an arrow here, but it’s not in the right position. Let’s go over that padding. So if we go here and highlight over header, you’re going to notice that there is some crazy white borders with some blue in the center. What that is, is that because of the pattern, so thanks Freeze this padding you can see I’m shifting things down, or I could shift it back up. It’s all up to you. Now another way is you could force a height of, let’s say 300 pixels. And now you force the height of the the header. But for now, we’re just going to have it be padding of 150 of 150, and a bottom padding of 150 at all times. So back to our HTML, we’re going to actually style that button, that yellow button over here. So we’re going to do header a for H a header a for anchor. And we’re going to add an animation called transition. So we’re going to do opacity for point five of a second. And for Internet Explorer compatibility, we’re going to add in alpha opacity. We’ll see Now we’re going to want to make this position relative to the header inside. And then we’re going to top it off with top 200 pixels, you’re going to see what that means in a second. So there you go. So what I did was I told it to shift 200 pixels down from that 151 50 spot. So if you see, zero, was right here in the dead center, and we’re actually going to be shifting it down to 200. Next, we’re going to add a hover animation. What this hover animation is going to do is tie in with this transition here of opacity, five seconds, or point five of a second. The first thing we’re going to do is check decoration none. What happens by default is basically empty. In the CSS is going to add in a underline, and we don’t want that for the link. So we’re going to add text decoration of none. And then I’m gonna pass it a point to and then a background color is going to be transparent. Now, if I refresh the page and highlight over, you see that nice fade animation. Fantastic. And then lastly, we’re going to say for that header image, we’re going to make that width 80 pixels. So you’re gonna see this resize just a little bit. There you go. Now it’s a little slightly bigger and a little bit easier for people to see and click on. But notice if I click, nothing happens. Okay, now let’s style our h one and h two. So we’re going to be telling the HTML, your CSS that hey, all h1 and h2 need to have a certain font family. This is the cool part. This is when we use our custom font that I downloaded. And then I’ll have a fallback for Arial Helvetica incense era. Now if we refresh, ah, Wow, great. Now you can see that there it’s taking in the new font that we wanted. And you can see here characters features, all the titles for h2 are now in the font of Krabby Patty. Next, we’re going to want to edit our main element. So we’re going to say margin, zero auto and this is going to auto center everything in its place. And then we’re going to tell it to have a max width of 1024. That’s just because on a standard browser size 1024 seems to work worked out really well. And I want to leave it at that. Now padding, instead of me adding padding top or padding, bottom or padding left to right, I can simply do padding 40 pixels, zero 40 pixels zero. And if we go over here, what you’re going to notice is that it does padding top 40 pixels, padding, right, zero padding bottom 40, padding left zero. And if you notice, there is some spacing now on the page. So great. And what we’re going to do is tell the main image to have a max width of 100%. So this is always going to be 100% scaled of the browser size. So if I resize this past 1024, it’s not going to scale because it’s contained In that element, but as you notice it scales down as I scale down. So fantastic, we’re actually getting very close to completing. Next, we’re going to go to a product div, and add a background color. And let’s just make it white and an HTML or CSS sorry. in CSS three, you can actually just type out certain colors that you like. So for me, I just wanted white. And if we refresh, we’re going to notice a big change. There you go. Everything is now in the white that where I needed it to be. Now we’re gonna open up our h2 again. And we’re going to add a font size of 30 pixels, and a color that’s slightly red, and we’re going to call it ca 291 e and then lastly, For this section, we’re going to add a product, h2 and p tag. And we’re going to give it a big padding. So for here, we’re going to do 40 pixels, four pixels, zero, and then 40 pixels. So again, when we view this, look at that you actually have padding at the top, left, right. And that’s about it. So let’s look at it padding top, right and left. Now I excluded adding it for the bottom and you’ll see why momentarily. Okay, now, let’s style some of those links. So you can see here, they’re, they’re purple links, they’re not that great to have underlines. Let’s make this a little bit. You know, let’s, let’s make it look a little bit better. So we have a anchor tag, and we’re gonna make it a color of kind of a teal blue. Is color and then we’re going to add a text decoration of none. And then then we’re going to add in a hover and we’re going to make that hover have a color of darker blue. We’re going to do 045780 with the tech deck, text decoration of none. So let’s see what we have now. There you go and look as you highlight over it with your mouse has different colors. Great. Next, we’re going to build out the scaffolding for the slider. Okay, so now we’re going to build out that slider. This one is going to have a lot of CSS in it, so bear with me. We’re going to actually be adding a period At the front, because this is now a class, this is no longer a noun. If you notice for product that was a div id, and that has a pound, a div class, or just class in general has a period. So for here, we’re going to make it a position relative again, we’re going to have an overflow kid. So anytime the image is overflow pass the boundary, I say it’s hidden on the browser, we’re going to tell it to have a width of 100% and then a height of 400 pixels. Next, we’re going to have a margin of 48 pixels with an auto center. And then we’re going to add in our WebKit background size again. So let’s just scroll up to the top and let’s add in these pieces, all again, down below here. And then we’re going to add a border radius around, and then a shadow. So let’s do WebKit border radius of three pixels. And then border radius three pixels WebKit, Shadow, or sorry, box shadow 00 16. And then we’re going to do something called RGB A, which is red, blue. Up, sorry, rgba is red, green, blue alpha, our alpha channel. So we’re going to say RGBA 00 0.1 And then close that out and do again, box shadow for a regular browser. There you go. And then lastly, we’re going to add a little bit of an animation here. We’re going to tell it to do WebKit. transition, background image, point eight of a second. ease in and then out. We’re going to do this again for opera transition. Background Image 0.8 seconds, ease in, ease out, and then transition, background image 0.8 of a second. ease in ease out, and voila, there we go. Lastly, for the slider, we’re going to add one more piece for the slide and slider We’re going to add in display none. And this is going to tell it not to display. And we’re going to manipulate this with JavaScript momentarily. Then the final piece for our HTML, or sorry, the final piece for our CSS is adding a footer. Now, my footer, I want to have it have a distinct color similar to the one that we had at the top in the header. So I’m going to do 0457, a zero, text align, we’re again, going to do center and then color white. We’re going to also want to do our paragraph tag. So that’s the p tag, margin zero padding 20 pixels. And then background color luck. Now let’s also for that anchor tag, let’s also add a little bit of a change to it because it remember, when you highlight and hover over it, it disappears in that blue. So let’s go ahead and add in color white transition opacity point, fifth of a second. And then again, for browser compatibility with Internet Explorer, we’re going to do opacity equals 50. Then, just like we have done before, we’re going to do anchor tag hover. opacity point to color white background color. transparent. And that’s it. So let’s see what we have actually built here. Wow, look at that. Oh, and you can see this whitespace in here. This is where the slider is going to be. So let’s Good. Let’s go ahead and start building that in JavaScript.