Basics of CSS | Laurence Svekis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 45m)
    • 1. BasicCSS

      1:37
    • 2. 1 CSS Basics course introduction

      2:23
    • 3. 2 Learn how to use CSS and what it is

      4:47
    • 4. 3 CSS Basics how to add styling to html

      10:59
    • 5. 4 CSS Basics syntax

      10:32
    • 6. 5 CSS Basics Backgrounds

      7:18
    • 7. 6 CSS Basics Box model Borders

      7:25
    • 8. 7 CSS Basics Padding

      4:40
    • 9. 8 CSS Basics working with margins

      6:23
    • 10. 9 CSS Basics Height Width Overflow

      5:25
    • 11. 11 CSS Basics working with text

      6:15
    • 12. 12 CSS Basics updating and selecting fonts

      3:56
    • 13. 13 CSS Basics turning UL into OL

      2:42
    • 14. 14 CSS Basics hyperlinks hover active links

      5:16
    • 15. 15 CSS Basics display properties

      4:41
    • 16. 18 CSS Basics applying it to web pages

      7:19
    • 17. 19 CSS Basics setup navigation bar on website

      5:57
    • 18. 20 CSS Basics tweaks and updates to CSS for website

      7:16

About This Class

Basics of CSS
Learn the fundamentals of applying styling to HTML code, CSS syntax and how to use it. Simple guide to getting started
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of elements within an HTML page.

This course is designed to help you learn how to use CSS within your web pages. From an instructor with over 15 years of web development experience.

Make you webpages look.... BETTER!

Let me introduce you to using CSS. I show you how to add CSS to your websites. What CSS can do and the amazing transformation that can be done.

Learning the CSS fundamentals will help you develop the core skills to apply styling to your HTML content.

We teach you

What CSS is
How to add CSS to your websites
Add colors to fonts and backgrounds
Learn about the Box Model
How Padding, Borders, and margins work
Update your height and width
Working with text and select fonts
Working with lists
How to active your hyperlink styles
Basics of displaying content with CSS
All about CSS positioning
and much more
APPLY WHAT YOU'VE LEARNED

At the end of the course we show you how to bring together what you've learned to transform some HTML code into a fully styled website.

Create your own website from scratch

All the source code is included, in addition to top resource links and everything you need to have to get started with CSS.

Lets start learning CSS.

Transcripts

1. BasicCSS: cascading style sheets. CSS is a style sheet language used for describing the presentation of elements within it. Html. Ph. This course is designed to help you learn how to use CSS within your Web pages from an instructor With over 15 years of Web development experience. Let me show you how to use CSS. Let me introduce you to using CSS and show you how to add CSS to your Web pages and also what CSS could do and amazing transformations that could be done with them. Learning the fundamentals of CSS will help you develop the core skills to apply styling to your HTML content. Within this course, we teach you what CSS is how to add. See access to websites. Also about colors, fonts, backgrounds in a whole lot more. Learn about the box model, how padding orders margins work, how to update your height, width of elements within your HTML code, working with text and selecting different fonts, working with lists and then how to activate your hyperlinks with different styles. Also, the basics of displaying content would didn't see assess in all about CSS positioning and a whole lot more attentive. This course we show you how to bring it all together. Everything that you've learned within this course allowing you to transform some HTML code into a fully styled website. All of the source quarters included condition to talk resource links and everything you need tohave in order to get started with CSS. So when you're ready, let's get learning CSS. 2. 1 CSS Basics course introduction: Hi. My name is Lawrence and I'm a web developer and I've been creating websites for over 15 years, and within this course, I'm gonna be introducing you to CSS. Essentially, what CSS conduce is turn a website just like this and updating some CSS code here, adding our style sheet, saving it, bringing it over, refreshing it. We get a completely styled website from that HTML structure just by applying our CSS styling to that Web page content. So I'm gonna show you how to work with CSS To apply some styling to your HTML content. We're gonna look at how to bring CSS onto your Web page. Also, the basics of CSS syntax. How to apply backgrounds. We're gonna look at the box model so everything from borders margins to padding. Also working with margins, how to set basics of width and height. All the source code is included that we're going to be using within this course as well. So it's just a quick example of the box model here. We're also gonna be showing you how to work with text, how to get different fonts in. So this is Google fonts, and you can pick different fonts, add them onto your Web page. We're also going to be looking at how we can update fonts, working with list items, turning them into menus, how to create hyperlinks and activate hyperlinks on hover. And all of this using CSS also applying different display properties, working with fonts. And then we're gonna finally put it all together and update our source code to create an actual Web page styled with CSS from our source code that we're going to be working with throughout the course. So all of the content is included. I'm including source code within this course as well in order for you to be able to access the code and practice the code that we're gonna be going through within this course. So when you're ready, let's get ready to learn and practice CSS 3. 2 Learn how to use CSS and what it is: within this course, I'm gonna be introducing you to CSS. So what is CSS and what does it do? CSS essentially is the presentation layer of any website. So as we can see here, I have some default html code and it will have any CSS applied to it. So throughout this course, we're gonna walk through how we can apply CSS two html code in order to make it stand out and apply styling to really bring out that website feel an effect to our standard HTML code . So we're gonna be using a combination of editors. One of them it's an online editor at Code Pen. I'll eso we're gonna be working with this. We can see here that we have the ability to type in code such as HTML, CSS and JavaScript and have it automatically apply Teoh the display area on the right hand side. So this is one of the reasons that I'm gonna be using code pen is because we can immediately see the results. So if I was to apply some styling, Teoh the particular paragraph, let's go turn it blue. We can see that it immediately shows up as blue as soon as I add in the styling. So this is gonna work in the same way as if we had a CSS style sheet attached to our HTML document. And if you're not familiar with those, we're gonna talk about those throughout the course as well. So we're going to introduce you to how to add styling and connected to your HTML court. So the other editor that we're gonna be using is called brackets. So this is an open source Adobe editor, and this is gonna be a really effective editor. It's got pre defined, courting, built right into It s so if you do want to add in some styling or some CSS, it does have some really powerful capabilities. Eso we're gonna be walking you through CSS and a swell showing how to do that and apply it within brackets. So I've got that typical Web page here. I don't have any CSS applied to it, although I am linked to a CSS stash eat and as well we're gonna talk about this throughout the course as well and all the different ways that you can bring CSS into your HTML code eso here we just have typical html opening closing tags. Bunch of elements. We've already applied some classes, some ideas to that and as well, we're going to be discussing that within this course and why we've got I. D s and classes, why we need them and why we're applying them within our HTML. So we've got a typical menu here, and even when we go to the site, it doesn't really look like those menu bars that you see on websites and all of this again is done through CSS. So we're gonna be applying styling to all of these elements. And as we go through the course, I'm gonna be showing you all the really different cool things that you can do with CSS to really bring out your presentation of your Web code. So that's all coming up in the upcoming lessons and as well. I also do encourage you to follow along. So if you don't have a text editor, you can use any editor that conceive CSS files CSS html and JavaScript will run within your browser. See, don't necessarily need tohave virtual machine running or what I've got here in the back where I go to a local host so you don't need to have that running in order to be able to browse and see the effects of CSS, and especially if you're working online. It's immediate, and you don't need any special tools to be able to see an implement. The CSS eso any editor And if you don't have an editor brackets is a really good one. So this is available at brackets I O. So I'll be providing some links to these resources as well. And as we can see, it's an adobe product. It's by adobe or extract. Preview is by Adobe S O. This is quite a lot of functionality in this text editor. It's an open source text editor. Eso again. You can just go over to the website and downloaded if you don't have an editor or if you want to follow along with the same editor that I'm using. So when you're ready, let's begin adding some styling to this plain old html page and bring it to life 4. 3 CSS Basics how to add styling to html: CSS stands for cascading style sheets, so you've got the definition over there. So CSS is just short for that. And essentially it tells HTML elements how they should be displayed within the screen, and it also saves quite a bit of work with setting up your website. You have the ability to link to a CSS sheet or a CSS file and style your entire Web page. So how do you set up links to Web pages and how do you add it to CSS? So I'm gonna show you within this lesson how we can begin to start adding CSS into my HTM a document. So we're looking at our source code, and typically when you look at the source code of any website at the top in the head section, you might see these links to R E L style sheets, and then we've got the source or the earl of that particular style sheet. So if I want even over two brackets and I did a page source view, we can see that it's got a number of linked linked style sheets here and all of these air going to contain style sheet information. Eso the benefit of linking to external files is that you have the capability of bringing in any one of these style sheets onto any page, so I don't necessarily need to rewrite all the styling for each individual Web page when I can link to a common CSS file. So that's what I've done here in this example, and all three ways that we're gonna talk about how you can add CSS are gonna work with in the same way, although that there is a hierarchy where the styling does get presented. Eso. The second way to add styling is to open up a style tag and place styling between the two style tags. So this is that html format tagging format where we open up and then we close up the tags, and then anything that's contained within here is gonna be CSS styling. So this is what's referred to as internal styling. This is an external file. This is an internal file, and the reason that they're separated out is because this is still separated out of the HTML. And lastly, we also have the ability to add styling Teoh each individual element or ah group of elements using the style in line tag or attribute in html. So I'll show you an example of that s o simply if we wanted to, we could select any one of these elements we could add in style. And I'm gonna do a really simple one here is going to do color on what color is going to do is color is gonna actually change the color of the font. And we can see when we see the life preview here, our main page here actually gets changed in color. So if I go to inspect it within the consul here, I can see that we've got an updated color within consul. And this is the chrome deaf tools Consul. Eso We see that it's got a color of blue and with chrome deaf tools. So this is available within any chrome browser, and this is by default. It's available. You can open it up depending on if your windows or a Mac. So on a windows, I just do an inspect control shift I and that opens us up. You also have the ability open up in the menu here s so we can see that all of the different styling that's applied to our page, and we can also even uncheck it if we want. So if want to look at it without the styling, even though that the source code still contains that styling, we can visibly see it within the browser in real time with and without that styling. So adding in the styling is gonna work with in the same way. So we need to be able to identify this particular piece of content in order. Apply styling to it, and that's where we get these ideas and classes. So I'm going to talk more about this within the upcoming lessons. Eso I just want to illustrate attaching simple styling. So if I get rid of this blue here and I go over to here and we need to make sure that we get the name right there and we can see that it's gonna be the same format as we had earlier where we applied the styling So we just put Color blue and we'll see. Or maybe we can just change it to read in order to illustrate the difference so I can go back out to example Page and we see that were read for the main page area, and this is gonna be the same thing as applying it within the style sheet. So this is style dot CSS center file on my system, um, looking in the same directory so I don't have to put any additional path information. I could just do style dot CSS and maybe it just do it green here and go to example site and we could see that it's green now. Eso when I mentioned hierarchy before eso there is, ah, hierarchy to when the styling gets applied and how it gets rendered out within the browser . So if you have conflicting styling, so if I have head type here, But here I have blue. So what? What color do you think it's gonna be? Do you think it's gonna be green? Do you think it's gonna be blue? What do you think is gonna happen here when I go to render at the page s So it's gonna be actually blue because the blue now is overriding the green and the same as if I go to here and if I apply the style directly so again, I do style equals, and then I put the styling and here so I do color. And maybe I'm gonna do read here. And then I go out to the example and we see that now it's red eso Although we do have all those additional styles that are available, we see that within the deaf tools they've gone cross state because actually, they're being over written by red. So once I get rid of the red one, we see that the blue one now takes pray place because that's the next one in line. Eso blue was the second color. First we declared it as green, Then we declared it as blue and then we declared it as red and we can see that within the browser. So if I get if I remove or disabled blue, then we end up with green. But by default, we're gonna have blue, and we're gonna have red, so red is gonna be enabled and blue and green are going to be disabled by defaults. That's what's gonna happen as a default. And that's the hierarchy of styling and something to always keep in mind when you are creating styling to make sure that you are setting it in the proper order. Eso that you're not surprised about why you're getting certain results because you might have a whole bunch of different pieces of styling. They're attaching to the same piece of content, and you're going to get that end result within that hierarchy. So another reason why most the time you're going to see styling within a style sheet. Sometimes you will see it on page, and you're very rare got rarely going to see it in line here. And the reason for this is for control for being able to find it for him being able to read it. Eso let's say you have 2030 Web pages and you're looking at the style and you see Header Top has this red color font, and if you want to update it to blue or Green, you'd actually have to go into every single page search through the code until you found this particular header and then you could do the update. So that's why doing it in line like this is always a bad idea because it's it's readability . Finding updating that's makes is made more difficult within this type of format, and typically if we do have site wide styling. We're gonna put it within the link R E l equals style sheet and then the a h ref location of that you are I where our staffs style that CSS is located. So this is when we're doing site wide. And if I did have some particular styling on this page and only being applied to this particular page, I might want to use the style tags. So those are the three options for Bring style within your HTML and again, those air the use cases for the different styling options. And then when it comes to syntax, it's always gonna be the same thing. Eso here for these two options for the external and for the styling here internally, we're just we have to be able to identify that particular element, and that's where we're using that I d in orderto link it back and be able to pick out that element within our HTML. So it's not important here within the in line styling to be able to pick out the element because we're only applying it to this particular element s o the inn line styling. We don't need to be able to select ah selector or select by the I d or any any other means we can simply doing it in line and applying the styling within that format. And we can see again that styling syntax is the same. S o. I'm just indicating what style I'm trying to access and then a property for that style. So we're going to discuss this in upcoming lesson in more detail. 5. 4 CSS Basics syntax: we saw in the previous lesson how we're able to change the font color by plying styles and most the time, you're not gonna be applying styles in line, so I'm going to just remove. That s so it's just important to understand that the syntax is gonna be the same, whether it's in line or whether it's on page or external file. So I'm going to remove that. And we're not going to really work a lot with these in line stylings just because it's not really commonly used. Unless there's specific cases where you would need to use that eso I'm gonna be doing styling either within on page here or preferably within the style sheet. And that way we can simply attach our styling into arch HTML as needed. And then we can actually use a styling on create some additional HTML pages, and also it's gonna make a lot more sense why we've got I. D. S. Why we've got classes for the external style sheet as well. And just in the general scheme of why we do syntax in a certain format, it's gonna make a lot more sense within that external file and in General, you should be working with an external file because the whole idea of CSS in the first place is to separate it out of your HTML. So you want to be able to use HTML to structure the Web page, and it should just stay with the structure of the Web page. And all of that presentation that's handled by CSS should be separated out of your HTML. So when you want to update the way that your Web page looks, all you have to do is update that one style sheet and you don't have to worry about any of that html code as long as you've got it structured in a format that can take CSS. So now we're gonna look at General CSS syntax eso the first thing that we have here eso where we've got header talk. This is what's known as our selector and what the selector does is, as indicated earlier, it allows us to sort out and separate out any piece of content here we have within our HTML document. Eso If we wanted to isolate out different pieces that content eso what if we want to only attach it to this particular Div class main container. Ah, and we wanted to turn all of that text green. So how would we access that particular piece of content? And this is where, when we're setting up selectors, we have to use a good format in order to be able to access that content and the way that's selectors work. We can either use the tag as a selector, so I can apply it to all dibs within this type of format. And just so you know how that looks, So we see that anything that's within a div now automatically gets that green color and so there's gonna be within the later lessons. We're gonna look at how we can do Ah nested selectors and dig deeper into specific selectors so we could selective. But then also we could add some additional conditions in the selector to really isolate that it. So we're gonna look at that in later lessons. But for now, if we look at this, we can see that this particular div also has a class attached to it. And the way that classes work for CSS and for html is that classes you can actually apply a class multiple times on the same page, so I could have several dibs or several elements within my HTML that have the same class. So I don't necessarily need to put them all in dibs. So let's say I had it within. I don't want put in the h two, but let's say I had it within this H one and have it over here within this div. So in order to select this particular class and classes, you do a selector via a period and then you do the selector name or the class name, so main container. So now any HTML element that has a class main container is gonna be green. So we refresh this and we see that we actually have quite a bit of stuff here within this main container. Eso Maybe what I can do is maybe I just make a brand new class here and I'm gonna call it Green. And then I gotta also rename this one and update this to be green. So this is gonna help us isolated thes classes a little bit better. And now we see that not all of the text is green. It's only those particular classes or those elements that contain that class, That air coming up green within our HTML. So this eyes the beginnings of helping toe isolate pieces of content and then to quickly review We do the hash tag for I ds. So if I have something with I d content and I was gonna use color again on So here with brackets, we get these drop down preset colors. So this is one of those cool features within brackets. So I'm gonna just set all of that content to be crimson color. And I'm also gonna talk a little bit more about how, um, the options here that we have for the CSS syntax, But now we can see that we've got some red. We've got some green text and were able to isolate out and pick out the different text areas. We can also see the interesting thing here again with that hierarchy of how it gets displayed. So what we did is we applied crimson color to that entire content area, and then we were more specific. We applied green to any class that contains the green class so we can see here by our example, even though we're specifying green first and content here. This order doesn't matter. It's the order that it's being rendered it through the browser eso First we're hitting content, So this all goes red. And then when we hit this paragraph with the class green than the CSS tells it to go green eso with CSS syntax we have what's known as a property. So these air the properties here on the left hand side. So the one that I'm using Ah, it's a simple one called color and this allows me to change the font color eso will have to do is do color. And then here I said of value for the contents and with brackets. It's relatively easy because it's gives me all these preset colors. But I can also use RGB. I can use Hexi decimal as well, So if I want to make it Ah Hexi decimal color. I could do it within this format, and I see that it's ah, it's a reddish color. So again, this is popping up from brackets and then, alternatively, if I want to use RGB, I can use that as well to set the colors s Oh, this is gonna be uh, options that you can set within any of the values you can set the colors In Hexi Decimal, you consent the colors in the preset colors, colors, schema and as well you can set it within RGB color. So it's red, green and blue with values of 0 to 2 55 depending on what shading you want within the color . And then there's also the RGB a eso that's for the newer browsers and that gives us an Alfa as well. Eso just to show you how we can implement rgb a eso we do the letters R g b hey, and then first we indicate red. So how much red we want to it. So I'm just going to read zero and zero for now. And just to show you how this is gonna look so we see that it's actually disappearing. And that's because I've set this at zero eso and that's the Alfa color. So I should actually set it at one s o that is visible. I can also use decimal places here. So if I want to set at 50 50% that's 500.5. Open up the wrong when there and we can see how that's started to look that it's coming through. Uh, Alfa. So it's more transparent and see through. Ah, and then, of course, if we want to change this to zero, so it's red. Next is green. Go back out and see our live example. So there's the green color a to 55 green and then, lastly, 2 55 blue. And then again, I can reset this to two values, such as one. So it's a solid color, and we can also see here that within brackets, it shows us which color that our GP is transferring, translating it so those are the three options, and most commonly, you're going to see hacks a decimal, or you'll see those default color values such as red, blue, green and all those other ones that we see within brackets that are available 6. 5 CSS Basics Backgrounds: so much like what we were looking at here, within selectors and setting up colors. We also have options to do background colors and we can use these same color formats in a number of different ways. Eso with the selectors weaken Select all of these different values here, um, color values in that same format. So if I wanted green the class green toe have a background color eso again, we can set this really easily within CSS. I'm just gonna shut that for now. And we can see what our default site looks like right now. Eso green actually turned it to read. So I'm gonna redo this and send it back to green. Or you could do even dark green and go back out and see our example. Eso What if I wanted this to really stand out? Like what if I actually if I meet this a really light color? So what if I did something like even white or white smoke or something like that s so I wouldn't be able to see the text S o. C. It's really it's really faded there. We can't see it very well. Eso I want to set the background color. So when I have a really good contrast with background and with background color eso typically we're setting it off using background dash color and then so selecting a value. So I'm going to do a black value for that color. So now when I go out here, we can see right away. It's taking that dark format so it's reversed the black background white text as opposed to black text, white background. Now with background. We also have a new syntax that we can use as well, because by default we should be using background dash color. But you can also just use background and this is going to do the same thing s oh, this is available in the modern browsers and that's because we've got the ability to to now to combine background together. Eso ah, short form for background s so we can just do background and it gives us the ability to apply multiple pieces within this background. So if I had a background image that I wanted to use as well, so I could set that image within here, so I don't necessarily need to set that separately, so I'm not sure if I do have some images within this area. So I do actually have images of got header background. So I do have that image. That's ah, brackets. Just giving me some additional information on the image. So I'm gonna set this as my background image. And also, I'd still have some additional options here. Eso where I want it positioned if I wanted repeats and so on. So right, uh, we're going to talk or you could do left top. So this again is a short hand method. Eso no. When I quote to my example and if I refresh it And actually that probably wasn't the best background image eso maybe I need toe do something with an actual picture because that one that one's just simply ah, black image. So I'm gonna update that now and we can see that now with this example, we've got our background image in back of the text eso Similarly, if we don't want to use the shorthand method, we could set background. So 1st 1 is gonna be color and next there's backgrounds. It's it's background image that we want to select. So it's ah, same format here. So we can do. You are l It's essentially doing the same thing. But the shorthand just makes it easier. Easier to read us. And then we've got background position eso here. We've got our options for background positions we can position at the bottom of the screen . We can position the center weaken, do left, right and top. So I'm gonna do center for this one. And then we've also got several positions. Eso we've got the horizontal and vertical so I could do something like bottom. And then also we have the background Repeat. So this tells us how much we want to be repeating that background image s we have the option to know. Repeat, we can repeat it. We can repeat X on Lee. We can repeat. Why only so we go out to our example. We see that our images actually it's gonna be fairly large. Eso if we want only repeat on X, it wouldn't really show anything different. We'd still see the same three eso here. We've got her options, so maybe we're just going to do a no repeat. So they that will make more sense. And, um, with, uh with commenting you can always comment things out within CSS. And the way that you do commenting is do the slash Asterix. And then when you're done commenting Asterix and the slash again. So that's when we see that brackets automatically grays that out. So that means that that's not gonna be visible and sound. Now, looking at it, we've got our no repeat. We've got it centered and we've got it near the top as well. So these are just some of the options you have with background. And as we can see, writing within that shorthand method is quite a bit easier than setting all of this. And as well. We can also set the background, repeat as well within within the shorthand. So it's gonna understand that as well. And because we've applied, we have several classes with green in it. What? Holding the green class? So we can see this, that we've got this repeated a number of times. Eso we've got it up here and we've got it down here as well. So we're replying. That's that same class over across to different elements within our HTML 7. 6 CSS Basics Box model Borders: in this lesson. I want to look at what's referred to as the box model. So every piece of content here, every element within our HTML has a box model around it. And what that means Essentially, that we've got Are we every piece of content has ah, margin. It has a border that has padding all around the content. And we can see this when we open up our chrome Dev tools and we can see that here under style. So I'm just in elements in styles and we see that we've got this box model over here so and again, this is for any element within our HTML. So if I apply and look at my box model for this welcome to my site or if I look at the box model for my head or here we see that we do have some values here. So margin is on the outside and margin refers to how much spacing we have outside of the bordered area. So the border area is gonna be actually that initial center of the box. This is that visible area and then our content, of course, is here on day as we hover over it. We see that it highlights as well within our left hand site. So the first thing that we have here is our content. And also within chrome we're seeing are width and height of our current content. Eso the first thing around it is potting and patting is actually going to be inside of the border. So when you're setting up your CSS, you gotta take note of that. Not padding is on the inside. Margin is on the outside, and that's the difference between them, and we can see that margin as well. It's It's actually our way of shifting and spacing out the different elements within our HTML page. So God going back into our code, eso if I want to take container, for instance, and update the content around it. So the first thing that I might want to do is take container and so that we can see what's within the container. I'm going to set a border. So this is by default one of those first things that you can do and the border, much as what we looked at with in the background. It's got this shorthand, shorthand syntax, where we can set all the border information, or we could simply do it separately so we could do. We can see here we can really isolated the boredom, the border bottom, border, bottom color. There's quite a lot of options here. The first thing that maybe we want to look at is do a border color. And then I'm also going to show you the, uh, shorthand as well. So besides color, another thing that we need to keep in mind for the border is we need to be able to pick out its with. So that's all the way here at the bottom, specifying the width. So we've got some default with Sears. We've got medium thick, thin inherit we can also set up pics with, So I'm gonna set it at one picks eso Now we've got black, we've got a border with of one pick and there's actually going to be something missing. So even when I go out here, we don't immediately see any content around there. And that's because we haven't specified the border. Uh, the border style that we want to set up. There's a number of different options we could do. Darted, dashed solid double group. So there's a whole bunch we can also do none I So for typically when you do your border style, if you just want a plane, border, solid border, I you would do soul it. It's now when I go back out to my example, we can see that Now we've got that border in place and we can actually see what is. We go to inspect element. We can see what our container the contents of our container is and we can begin to see. I need to make the smaller Actually. And I had to reset it to default because I wanna have it enlarged. We're not actually seeing the right values. Here s Oh, I did want to illustrate that now the main container area. So this one here when I hover over and it highlights in the left hand side, we see that we've got a one pick border around it. Yes, we haven't set any padding. We haven't said any margin or anything like that. So I'm gonna go ahead and set Ah, background color here, and I'm also gonna do the exact opposite and show you the short shorthand method to do this So we have looked at this earlier, so we just do border on. Then we put all of this, this information, all of these values within here within the border property. And so this is going to give us the same thing as all of this stuff up here. And then also, I'm gonna set a border of background color so that we can see it. Ah, what's within the border and what's outside? So just setting that up. And now we can see that we've got this, uh, this greenish color. We've got our border around that main container area. So even though I've been using a lot of these bright colors, I am going to tone it down and make it look a lot more presentable throughout the course. But a lot of this is just to illustrate all the different colors so that actually they stand out and we can pick out what they are and what's doing what eso The next thing that I wanted to look at is going over to the other version of example. They've got to refresh. That s so we've got that green color. We've got a one border eso want to add in potting around there. So what do you think adding padding is going to do because the padding is on the inside and it's just outside of the content and potting falls between border and the content itself. So we're gonna look at adding and padding in the upcoming lesson and then also talk about margin and just important to remember that all together, this is the box model. Even though these are separate properties that were setting within our CSS, they do all fit together, and it's important to understand the order that they get presented within the Web page and how that content kids affected. But the differences between padding and margin so that's coming up in the next lesson. 8. 7 CSS Basics Padding: as we can see from our previous example, we've got our content in the center. We've got our border that we've already set and now we want to look at padding. So what padding does is patting is the spacing around your content. So I'm gonna set some padding and we can see that we've got four sides to the padding. We've got atop a right bottom and left and this number of different ways we can do padding eso with padding. We have an overall shorthand method for patting, and we can also specify bottom left, right and top. So if I only wanted padding at the bottom, I could do something like this and then hereafter set how many pics of padding I want to add in So specifying the length on I'm using picks as my measurement. So now I'm gonna add in padding at the bottom, and we're gonna have probably gonna go over here and refresh it and see that we've we've got our padding here at the bottom, so we don't really see too much happening as of yet. We do see that it's added in those 25 picks here, and so this is pushing essentially making that bordered area, uh, 25 picks down and also applying that green background to that 25 picks. So I'm gonna go ahead and show you the shorthand for patting. So that's potting bottom. And I couldn't go ahead and comment that one out, because we're not going to be using that. Typically, we do use the shorthand, and we can also specify the bottom padding within the shorthand as well. Eso shorthand potting. We could do something like 25 picks and by default we can just set padding 25 picks. But we're not referencing what part of the padding we want to access. Eso bottom, top left and right. So this is going to apply to all four sides off that particular HTML element. So when I refresh it, we see that this content got moved in. 25 picks got moved down over here, and we've got this kind of buffer area around our content between the border and the actual content. Now, with the shorthand there's, there's another way to present it as well eso if we want to do top and bottom and as have a different value for left and right. So if you wanted the sides toe have 50 picks, we could set it within this type of format. So we just leave a space there and we specify another value. And when we have two values within the shorthand, this is going apply to, uh, the first values going apply to the top and bottom as we can see inner diagram here. And then the 50 which is the second values can apply to left and right. So what if we want to even break it down even more? We can actually set different values for top bottom, and then as well, we could keep the same value for left and right. Or we could set different values for left and right. So first of all, if we wanted to have another value for bottom and we can see here, it's gonna move in this clockwise fashion. So initially we've got the top value, and then we've got the left and right. It's a right left, I should say, and then the bottom value. So this could give us 10 picks at the bottom. So I go out and refresh it. Always opening up that Ryan example, there s so here. We've got our 25. We've got her 50 left and right and are bottom is Ted. So as I mentioned, it does move in this clockwise fashion. So top right bottom. And because we never said a value for left, it just takes that right. Value s so that means that we can actually set a bottom Ah, value for the left side. So maybe make this really big standard, hopefully get the rates. Ah, window there. And we see 25 50 10 and 100. And we see the effects here within our example here on the left hand side. 9. 8 CSS Basics working with margins: In the previous example, we had looked at how the box model works. We had looked at where the content is on how it relates with borders padding. And then now we're gonna look at margins. So with margins, it actually moves that entire content down. And I had to actually move it into this section here. So I'm gonna update that each to melt, and I'm gonna bring out this and w c l ss, and I'm gonna put it within this main container. I can't do that. So I have to create a class here, So going up to our file. So this is what we were looking at before essentially where we had our border of one pick. We had padding top, right, left and bottom, and we've got a margin of 75. So we see that when we add in margin, it actually shifts everything down. So margins work in a similar way to patting where we have the ability to set margin top. We can set margin, bottom left, right, and as well, so similar to what we did with the padding. We have the ability to set margin as a short cut as Well, so I've got margin eso here. We've got all of these options for margin and swell eso that's thanks to brackets. So the same way that padding works where we've got our top when we've got our right bottom and left weaken setting margins for all of all of that spacing. And also I just want to note as well. So we've been using picks, but we do have options to use other measurements. Eso weaken do percentages as well, so show that works. So if I want to do 5% margin eso I could have a more fluid design where I'm picking up a 5% margin all around refresh it. So we've got that same marginal around and we see the way the difference between padding and margins. So pad ings on that inside of the border and it's pulling in all of the content and that's how it's affecting the content. But the margin is dealing with that entire boxed area from the border in words. So it's plying that margin all the way around. So all this white space is the margin that we've applied and also notice that even though we have a background color, and it's applied to this element. That margin is not taking that background property. It's just pushing it in to anything within the border. Eso That's another important difference between padding and margins, margins on the outside. It doesn't contain the me about those properties that are within that element. It just pushes that in pushes in essentially the margins, as indicated by the name eso What it's called. So going back into this, I can do a 5% all around. I can do 50 picks left and right, and this probably isn't the best format to be doing it. Where I've got Inter changing, I've got a percentage, and then I've got an actual fixed pixel with so actually turned out roughly the same because it's roughly around 50 50. But if I change it bigger, we see that our margins are no longer going to both be 50 as we re size the page. And then, of course, we can set bottom and we can set left hand side as well. So those are the options for margins, and that's what we're able to do with set with margins. You're also going to see, uh, with margins. You've got this auto. So what auto does is it allows us toe horizontally, center the element. So see if, um what happens here s so we don't actually see anything because we're not a plot. We're applying it to the mean that mean container. So I'm gonna move that off of the main container, and I'm gonna pull that into maybe one of these paragraphs here. Eso just gonna pull the class off and move it into maybe applied into this paragraph because we don't have anything within here yet. And also, I want to set a width here as well. So I'm gonna do 50% with we're gonna look at with in upcoming lessons as well in the more detail s so we can see that once I'm setting that, I gotta actually save that. So keep forgetting to save it. And that's why it's not translating the same way s so you can see that when replying that style to this particular pizza content. When we set margin at auto, it automatically centers it, and this is good for responsive building. And as you can see that it stays centered, as I just the size eso I've got my margins here. And when I take a closer look at what's happening here, if I can select the right one, I've got my borders that I've said. I've got my margins that I've set. So I've got my left and right have got my padding as well. So all of that information is now within that you one s Oh, sorry. It The margin is auto one. That's what's automatically centering centering itself. So that's how you center content fluidly. You just use auto. And then, of course, the padding in the with. So the next lessons we're gonna talk about text fonts on Dennis Well, where you look at some additional really useful syntax and really cool things that you can do with CSS. So it's all coming up in the next lessons 10. 9 CSS Basics Height Width Overflow: in the last lesson we had briefly looked at with and how we can set with. So we had set our with the automatically 50%. And as we can see when I remove it and when I add it, it's actually taking up only 50% of the allocated screen size. So what happens if I've got something? I've got an image in the background, and I don't want to shrink it less than the minimum size of my image. And maybe I don't want to grow it wider than my maximum size. So when you're doing responsive stuff, it's really need toe. Have this ability to have this fluid with sizes, but you also want to be able to set minimums and maximums, and that's where these come in. So if I want to set a minimum with for this particular element in CSS, maybe I want to set a minimum with the 400 picks. I can do that, and, alternatively, if I want to have a maximum with So essentially, these give you the ability to control what size is what size is. The browser can resize your content to, so I've said it at a minimum 400 maximum of 600 we'll just see what happens. Here s so now when I get under 400 picks wide, it automatically doesn't resize less than 400. So this no matter what my screen sizes, it's gonna always stay at 400. Ah, and then this is, of course, what I want toe happen when I am doing the re sizing, and that's why we're setting it within that way. Eso over. That's just that blocks model s so you can see that our content is 400 by once 26. And no matter what, it's not getting less than 400 eso. Alternatively, when im re sizing and I'm growing, So now it's taken up that 50% because none of these air applying it's greater than 400 less than 600 we'll just see what happens once we get over 600. It's not gonna change in dimensions after that is going to stay 600 by 90. It's no longer gonna be expanding, even though our screen sizes expanding. Eso this. These are some things that you should calculate out when you are thinking for responsive design and mobile design. You can set these minimums and maximums and the same thing goes for height. You can also set a minimum and maximum height as well within that same four months. So height. So if I want to lock it in at 50 picks, I can set a minimum height and minimum and a maximum height as well within that same within that same format that I'm using. So over here when I set, um, height of 50 we see that, actually, that contents are flowing out of there. And this actually brings me into another point with when you're when you're working with heights and widths, we've got what's called an overflow. Eso were able Teoh, adjust how that overflow gets handled on swell within CSS and overflow is just this where we're actually outside of our allocated space. Eso we can set different options for overflow. So opening up that same that same class that we're attaching this Aiken dio over flow and I've got a few options here. So I've got auto. So that's what's happening right now it's automatically I've got hidden eso I could hide any of the overflow s Oh, this is a useful one. I also have scrolls. So if it's overflowing, weakened by default scroll s O. C. Here. When we do hidden it, actually, heights, the content that's flowing over are allocated size. So I set up scroll. We see Now we've got our scroll bar there and we can scroll are content and eso sometimes that it is a good idea, especially when you're pre defining thes heights and widths on. Do you wanna have thes set heights and widths to dio toe? Also add in the overflow options and what you wanted toe happen in case the actual content within the the allocated area doesn't fit the allocated area. So and that's where overflow comes in and how you handle that s so in the next lesson, we'll talk about text and fonts and how to adjust those and how to make changes within your CSS to make your text influence look different within your web content. 11. 11 CSS Basics working with text: this lesson. I want to go back to this green class and we're gonna update what our text is gonna look like. So we had already looked at, um, just actually comment The stuff out here closed on office. Well, eso I did want to comment The state s O that we only have access to that one particular piece of content are funt eso. We see that our front is white. Here s so I'm gonna actually update that swell eso I'm gonna maybe bring it back to black s so that we can see it. So do it. Using color is the way to set your font colors on. We can see that now are font is once again visible. It's black. So what if we want to actually align the text? We have several options. You'll usually see it in any of the word editing on. Do you have options to left align to write a line to center eso the syntax for that is text align. Ah, And so here we have these abilities to do center we can even justify left and right. So I was going to do center for this one now and just so you know what that's gonna look like. So refreshing it. So our text now is centered and are bigger example Over here eso these air the same web pages. Eso just in case you're wondering why I'm looking at two different ones. They're actually the same ones just when this one I've got that deaf console open. So I was able to Seymour information and that's why I was using that one. But I'm gonna maybe flip over to this one s o. This is our essentially our life preview. So if I refresh it, there s so we see that are centered text, weaken, do left, weaken do right. And as well weaken justify It s socially what justify does and go back it and we see when it's justified it makes up for those spacings And if we had any ending lines, it would try toe to space it out. Better stretch it out better essentially eso with, um text we also have If we've got hyperlinks here by default, we see that these hyperlinks always have on underlying So we do have some options for that under our CSS that we can do so. It's gonna be that same texts and tax eso I'm gonna just set for all of my hyperlinks set what's called text decoration. Uh, and I'm gonna just do none. So this should remove out any of my underlines for any one of my heart for links we can see here. These are all the ones that have changed. So we're getting that box around them. So if I refresh them, that's going to go away. But we can see that we got rid of that underlying on the text. We can also transform text. That's another really cool thing s so we could do text transform us. We have some options to do. Inherit lower case uppercase capitalize. So I'm gonna do upper case, because that's gonna be the most visible. But of course capitalizes Also very useful eso. Now all of our links are uppercase. We can also adjust our letter spacing. So you see, this used sometimes a swell where we maybe do a letter spacing, um and then set particular spacing value. So going over here now it's Space state. So this means the space between each letter. We also have a lying height, property on and then we've got our word spacing as well. So similar to letter spacing. I've got word spacing. So update that. And again, this is gonna be by pixels. And actually don't. Well, actually, no. I do have separated words down there is going to say I don't really have any separated words up here, but these links airlink 12 and three. We can see the spacing now has been added. There s O could make it maybe a little bit more prevalent, but adding that in on. And then, of course, we do have line height as well, so I'm not actually we should be able to see that s so this is the actual space vertically between the the lines. And so now we've got more spacing here, but we're not actually seeing any line spacing cause we don't have more than one line happening. There s o. If we did, we would see that that spacing. So I think that we could implement it within that way, and we could see that we've got our ah different line spacing there as well. Those air several different things that you can do with fonts as or with your text and as well, you can also set fonts s. So if you want different fund families, you can set those as well. So I'm gonna show you how to do that and as well adjust the font size in the upcoming lessons, going to just remove that out. So again, looking at the text and what we can do with it, we're gonna be looking at that end upcoming lesson. 12. 12 CSS Basics updating and selecting fonts: So when it comes to fonts, it really gives you that ability to distinguish text on your web page. Ah, and with fonts, you've got a whole bunch of options. So in the last lesson, we looked at how we can adjust size of the text. And what if we want to overall just the fought the font family? So in order to do that or if we want to even just the font size so we can set fonts family . And from here, we could set select any one of those default families weaken set it, Ariel or any one of the families that we want to specify. And also, we've got size so far, sighs eso you gotta go sit this and picks. So this should actually make our fought fairly large. So going back out to our example, we see that we've got that Ariel font. So it is different from this one Eso aerials only one that I could think of offhand on. And we see that our fought science is really big. Eso with thoughts Are you really have the option to have unlimited numbers of fonts ous over here on Google? I'm looking at Google fonts. So we have the ability to take any one of these fonts, and I could do something like Click this quick use and it gives me the actual code to bring in to use that font so I could bring it in. I can import into my style sheet. I can bring it in with JavaScript, or I could link to it in my HTML and then, in order to integrate and access it all have to do is to fought family within this type of format. Eso. Either way, I can bring it in. If I want to bring it directly into my CSS, I would do it within this type of format, so I just place the import here at the top. And now instead of that Ariel, I'm gonna use this funt this as the font family and save it and go back it to our Web page , and we see that now we're accessing that Google fought, and it's updated the font on our Web page to match with that Google Front and then again with Google fonts. There's a lot of options for fonts. I believe they have several 100 different fonts available here are 708 fund families showing, uh and see who's select through different categories. You can search on there as well for different fonts that are available to find the exact one that you want to be able to access and use. So with fonts, we can also set our farm. Wait, s So this is something that we can set within here as well. So if I did something like font wait, I have an option to set one of these valued waits where I can just set up toe bold, and I'm gonna make it much smaller. Now go back out and show you what that looks like. So now we've got our bolted font Andi as well. I just did the font size. So a number of different options that you can do when you're working with Fonts s Oh, these are just some good illustrations of all the really cool things that you can do. And we can see that our company local updated as well us because we've got it tied to that same stuff. Uh, that seemed class. It's enough coming lessons. We'll look at some more really cool things. You can do, including working with lists. They were to look at positioning, floating and how we can line this menu and a whole bunch of really cool stuff that's available in CSS, so it's all coming up. 13. 13 CSS Basics turning UL into OL: So when looking at our example, we've got several ordered lists here. Um, were un ordered lists. So we're not actually specifying what list values were using eso. We've got these lists. Here s so what I want to do within this lesson is talk more about the lists where we can select different list types on update how it gets displayed. So these are on ordered lists. Um, so we do have some options with the ordered list as well as the UN ordered lists and updating the different styles and what we want to show up within those styles. So now, going into our CSS. So I'm gonna simply do ul So selecting out all the UN ordered lists and this is where we've got our list. So we've got some options here for list style images, list style type, and we want to do a decimal or circle s. We've got a whole bunch of options here. Uh, maybe I'll just do it. A lower enrollment go up to our content. We see that now we've turned our a new ordered list into an ordered list style format. Eso now you can really work with those interchangeably as well Eso again. We had a whole bunch of options for different list types, So maybe I'll just change it to square eso This effects all the list items in the UN ordered list and as well worry we have the ability to position the style as well as adding images. So quite a few options here with all the different things that we can dio with lists. So now when I go out here, we've got that square list there. So in upcoming lesson, I wanna talk about links and how we can make something happen different, uh, difference CSS for different link types. So we're gonna have hover and so on. So we're looking at that enough coming lesson and then also positioning and floating. And then also aligning thes Maurin a menu format as well. So that's all coming up in the next lessons 14. 14 CSS Basics hyperlinks hover active links: So within this lesson, we're gonna talk about linking eso. I'm gonna change these honored lists to actually to display none to completely get rid of those bullets there. And I'm also want something to happen whenever I hover over my hyperlinks were I wanna up be ableto update my hyperlinks. So now going back in the code I've got my hyperlinks there as a so initially I've got them with text decoration. None. I've got it moved over to upper case and also want Teoh add in even a text a line and central allying that So this is how I access the default links eso just a and link eso Additionally besides the links, Well, what if I want to do something with hover So the same thing where I would do a and hover and maybe I want to update my background image whenever we're hovering over it. So I'm gonna set some default colors here. I'm gonna maybe set this to white in the background here. I think you have a background color, so I'm going to do maybe a darker color eso Whenever I hover over, I want the background to change too. Another color I was doing some short cords there for the hex colors. Eso now we see, actually should update those a little bit better because it's actually not visible. The color said I'm picking, so maybe we'll do something like red. And of course, we could always change that. Afterwards s o I get that pop up whenever I do background color. Um, so then that way I get the pop up from from brackets, but we'll just leave it at red for now. Do orange red on and then the actual font color eso we have it as white by default eso maybe I want to set it at, so I want a dark ah, dark color. So you'll just do it black, usually a quick tip when you are designing, try to stay with some, uh, gray scale if you haven't been able to pick out your colors yet because that's going to help you along the way when you actually do pick your colors with shading of the colors Eso what along with hover. Uh, we also do have some options for visited an active, so show you how to access those ones. So visited our links that have already been clicked. Eso got visited and lastly, we have active as well. So this is a way to combine styling for multiple multiple properties here and set the same values for both of those properties. Eso maybe I just Maybe I keep it all the same. Or maybe I have something different. So so. Backgrounds, color and aqua. Of course, we probably have to change because probably none of these colors air gonna even go together . But just so we have something there. So now whenever I click hold, I can see that I've already clicked to that URL So they're all going to go on my visited colors. So coming up in the next lesson, I'm gonna talk about display and how to update how these items get displayed. And I really don't like those values. So I might just entirely get rid of that all together and go back to the page Eso Now I should have a font of white. Just get rid of that to see how that looks. So that brings it roughly back. Teoh. What? We initially had it. So that's what I wanted. So we wanted to look at some the display values, how to display them in line and actually turn them into more of a menu style visual. Eso show you how to do that in the coming lesson. 15. 15 CSS Basics display properties: in this lesson. I want to talk about display. Now. Display is probably one of the most important properties within CSS toe Help control what the layout is gonna look like. Essentially, it's how the element is being displayed. So we have a number of auctions when it comes to display, and I'm gonna be showing you them. So it just opened up our editor here, and what I want to do is I want apply that display to the list items s so I'm not gonna go with the u l Exactly what? I'm going to do it to the list items. And the reason that I'm selecting the list items is because I don't want to apply to the u L S O. I want to apply to each individual list item, and that's going to give me the ability to really update the display. So first of all, I have an option for displaying it in line. So if I chipped this display, eso have some options here I can do in line. Aiken do in line Block and Aiken do block as well. So by default, it's gonna be it's gonna be Block was going take up that entire available space across the screen on DATs What we mean by block. So typically, when you're looking at dibs, these air gonna be block elements is they're going to take that entire line of code eso seem with paragraphs, headings and so on. They take that entire available space as the same with list items. So by default, it's a block. So I'm actually gonna flip it over to in line. And what in line means it's going to behave more like a span. So when I go over to here and I think it actually updated, so now it's updated it to be in line. So now it's starting to look more like a menu because of all the times you see these menus and they're gonna be horizontal. So not going to see a lot of these vertical menus. They're taking up that entire block space. Eso also with display. We have some really paid powerful capabilities. Eso we could do something like display none, and the difference between display none and hidden is that hidden. It's still you take up that spacing, whereas display none is completely removing them off of the visual part of our code. So we're not even reserving any space for for that display eso again. Typically, we would do eso Yes. So there's a difference between visibility hidden where it will still take up that space and reserve that space. Eso We also have the option Teoh to do an in line block. And what the in lined up block does is that it's allows you to display in line elements on and give them ah, height in a with. So that's gonna be the difference between in line block and these air. Now they're gonna look more like menus. So even though when we do display in line, it looks kind of like what we want. But we want to set that in line block. So it's gonna make a difference because it does allow us to set that heighten with capabilities for that particular item or particular element. So now I can set a width of 100 pics and just show you the difference here, see if that makes a difference. So we should actually said it, Teoh be larger than that. So we see that with the in line we don't have any 200 pics. But when go in line block we see now we're taking up that 200 pics Space s so that's the difference. And when you are using a menu, if you do need that functionality than it, please do use in line block. If you want to be able to set the heightened with eso without setting the heightened with, they look relatively the same. 16. 18 CSS Basics applying it to web pages: So for the next set of lessons, I'm actually going to be looking at code pen and what we can do within code pen. So I want to actually pull out all of that HTML code that I have s O. This is just the code that's contained within the body area. And I was gonna copy and paste it into the HTML section and also tidy that up a little bit . Eso Now we've gonna on a high JavaScript because we're not gonna be using it. So now we've got enough information of it. CSS toe actually start transforming all of this content into a web page so similar to what we've done over here. We want to start really updating the look and feel of our content. The first thing that I'm gonna look at is just the container overall, and I'm gonna set some values for container. So this is gonna be my entire contents, and I also want my contents to be fluid. But I also don't want to get too large. So I know said it as a knocks with of maybe 800 pics. Eso This is moving all of our content into 800 picks and I'm going to bring it back to the default, and we can see that now It's, um Now we've set a default of 800 it's not centered anymore. Eso Do you remember how we do centering off our content s? We can do it with auto, so we don't need to necessary center the top and bottom. But we want to center the left and the right, and that's what we do. Zero auto. And so now we've got our content centered. Eso next. What I want to do is actually want to split off the content area and that side menu. So we've got our main content area here and I've got this side menu eso These should be actually in separate columns. I should have us this content and I should have the side menu here in the right hand side. So in order to do that, we've already set up the dibs for those particular elements and I'm going to do content eso for content. I have set a background color, so maybe something like light blue or something like that. I want to give it some padding because I don't want that text to be completely touching, So I'm gonna give it padding of 2% eso This gives me a little bit of a buffer on the left and right hand sides. I also want to add in Ah, with eso. I only want to take up roughly around 60% of the page. Some mind you've already added and not padding. So I'm gonna set it at 61% because I've got 2% padding, So this give me 65% of the spacing. Next, I want to look at that side menu and update the same thing on the side menu. So when I add that seem potting as we did over here on a set that ah ah with And so now this with is gonna have to be so we've got 100% in total were subtracting 65 over here. We're subtracting another four over here cause remember, left and right side eso that's gonna leave us with the value of 31 to give us that full size. I also want to set a background color for this as well. So maybe something like late Red Way have a late right so for yellow right now and tidy that up. And I did miss suit you there. That's why it's not so Maybe there is a late, but I put it to you s Oh, I'm going to just save this. Ah, as we go along here as well. So now one of the challenges is that we want to reposition our thes two elements, so we see that they're actually one on top of the other. And I actually want to move this piece over to the right hand side. And that's where we use floats. Eso with floats. It gives us the ability to actually position content and float it Teoh a specific section. So it specifies, um, it gives us the ability to control how the elements react to each other next to each other s o by default were floating. We're not. We don't have anything that were floating. We're taking top and bottom here, So to move it over to pull this content over to the right, it's probably easier just to show you how this is gonna work. So I want to pull this one over to the right hand side. That's the side menu and the top content we see now we've pulled it over to the right hand side, but we've got this footer information taking place. That's because we don't have this pulled over to the left yet, So I wanna float that over to the left. So now that brings this content right up to the top there. Ah, And one thing that we do notice here is that we've got our footer information is actually getting caught underneath. There s So we need to add in something additional to that, and that's clearing it. So going down to since they remain content, this is content. This is the side menu. And I want to bring out that footer container class and do a clear of it because I don't want that going in by default. It's gonna take whatever spacing was available after the float. So when you're working with floats on, you want to clear the floats, it's simply clear both, and that moves the footer area back down to where it belongs. So the next lesson we're going to continue to build this out. We're also gonna update that menu as we've done before, and update some of these links and update the footer. So it's all coming up in the next few lessons 17. 19 CSS Basics setup navigation bar on website: So in this lesson, I want apply mawr of what we've learned within the previous lessons. When it comes to CSS, I'm going to make this a little bit bigger so we can see the the content here. The text better s So I wanted to actually apply some styling Teoh the navigation menu. Eso we've got up here at the top under knave and I'm gonna access it within my CSS just using now. So first thing I want to do is I want oh, bring that they would want to set a background color and, uh, maybe just pick something fairly basic like a grayish color. Um also want to do margins zero just to make struggle, have any margins I want also overflow hidden because I don't want anything whenever resize is, I don't want it to show up inadvertently, and I want said it's with to the full width of the page. So 100%. So even though it is taken up 100% right now, I just want to ensure that it's not gonna overlap with any of this stuff that we've got below. I want to make sure that we always got that 100% eso Next I wanna access the knave and this is how we access nested content within our HTML Eso here we've got knave is the parent. The UL is underneath there and then the list item. So you're probably wondering why it is don't do list items. And the reason is how we're selecting particular pieces of content elements in our HTML. If I just did list items, I'd also incorporate all these lists items had any other list items in my Web pages, those who get incorporated as well within that styling. So I only want apply this styling, Teoh this particular navigation bar I want apply it to a new ordered list and list items. And I don't want to go in here and set a bunch of ideas and classes and so on. S So this is why I'm just using the tag and I am nesting the tag within it to really be specific that I won't apply it to those list items and again with the list items. We had that ability to get rid of that list style type and set it to none that gets rid of these bullet points as we can see here, I I also wanted to display it in line block because I do want to set a with so And I do want my with to be 150 picks and I need to spell display, right. In order for that to take effect, It's now it's starting to look more like a menu, and now I'm going to continue to build it out. So I've gotten me now, and any hyperlinks that air within my knave wanna display them as block items so they could take up that entire space and add in some margins at the bottom to move it off of the bottom area. So I'm gonna add in a margin of 10. So this is just to bump it up slightly, maybe even some padding. I do want to definitely get rid of that text decoration. We'll set the text decoration to none. Get sort of those underlines eso I can't really see it very well. So I'm gonna set it to color off white and do background. So maybe we could even just do background of black, so it really stands out. And now, once I did that I realize maybe I got a center, that text and I've got an advance of padding, so it's not immediately right next to the text. Remember how we did that with the padding? Eso patting is on the inside. Margins are on the outside. So he added the margin of 10. So that added some additional spacing there. Uh, so we wanted to do text align to bring the text into the center and also want out in some potting. So in general, maybe we only want out the padding at the top in the bottom and we don't want apply any padding toe left and right. And then lastly, what I want to do as well is I want apply some additional styling. So I want something to happen when every hover over. It s o these air. Just typical things that you would expect for any navigation menu. Eso I do need to have some type of color change or something like that. Eso maybe Aiken go to teal. And now whenever I hover over it, I get that teal color. So it's in line with my menu. There s so I don't even have to change that text color either as well. Eso That's how we set up our navigation menu. And now it's actually starting to look more like actual real Web page eso in the next few lessons, we're just going to finish up, uh, updating this content here. Maybe we're gonna add in some of those Google fonts because those were really cool, and that had a really nice effect on the text. So we're gonna be looking at that in the coming lessons. 18. 20 CSS Basics tweaks and updates to CSS for website: this lesson. I want to finish up our web page, apply some additional styling on. And, um so one of the things that I want to do is bring in that fought style that we had looked at earlier. So I'm gonna just use that seem one that we had access to do an import on it And Nana's do font family go back over to here. So maybe I want apply it to all of my main container. So go down to where I have that main container, which I don't see exactly where I have it. So do it within the content there. So this gives it, uh, kind of an interesting type of font effect. And now I'm also looking at the side menu. So I do want to do some updates to that as well. So I'm just seeing ah, we have side menu over here on the right hand side. Um and maybe we want to specify what we want toe happen with list items in the side menu eso with the list items. I want to get rid of that. Display eso again. That's display type. So I don't I don't want it to look like a list item. Just save that. Eso That should be side menu list items. That's what I had missed it there. I want to bring that in. Uh, so on. Display it block. So I'm really having some trouble here. Typing Keep putting letters in front of the wrong ones there. So maybe do with 100% as well. Um, there's some padding there and, uh, even update, maybe the background so that they look more like clickable links. And I just gotta update some additional stuff here in the UN ordered list. So when I have a margin of zero Hodding of zero and also I want to get rid of those underlines on the hyperlinks. So again, selecting out those, uh, there was elements and, um, text and maybe do some color to it. Try steel blue. And then, of course, I do want tohave different hover background colors. So a Or we could just do it on that entire list item so it doesn't necessarily need to be on top of that hyperlink. So I could do in a list item, hover to back around and do black. That really stands out there now Whenever we're hovering over it, we can actually see something happening. Something changing in tasing. People more likely to be able to click on that. So might also want to add in the hi there going to get rid of that? And, uh, we're gonna look at the actual footer. I was just remembering what that was called going down. And one style that footer sets the footer container and so good fun content there. So we do have a foot or container s o what I want to do. I want to set this 12 with 100% as well. I know. Set margin to zero and then toe auto and give it a background color and give a color. Or maybe just leave it as a dark one. Uh, we should have some padding. Their swell. Just have some padding around that wording there. And essentially, this is and I'm just looking at our sidebar here, So I do wanna apply quick fix for that. That's the class is main container, and I'm going to just do a background color of teal for so to finish an update on there just going down to container and I'm gonna update it to have a background of teal so that we don't have any of that white space there. And then, of course, we can update the company logo with an image if you want to and continue the updates on this website. So I'm going to see that within this type of format, I'm not provide a link to the court pen so you can check it out and update the code practice CSS on, uh, with the life code that we've been working with throat this course as well.