CSS website foundations | Laurence Svekis | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (1h 32m)
    • 1. Building Websites Web Design HTML and CSS

    • 2. 20 CSS selecting elements from HTML

    • 3. 21 Working with CSS colors

    • 4. 22 CSS Background options

    • 5. 24 Adding Fonts

    • 6. 25 Pseudo classes and design patterns

    • 7. 26 Using the Float property

    • 8. 27 Box Model Margins

    • 9. 28 Box Model Padding shorthand

    • 10. 29 CSS to create a navbar

    • 11. 30 Display properties CSS

    • 12. 31 CSS overflow handling

    • 13. 32 CSS positioning elements

    • 14. 33 CSS tweaks and updates

    • 15. 35 Media Queries making your website Responsive

    • 16. 36 HTML CSS summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

CSS is were you can let your creativity flow, transform your HTML code into a beautiful website.  Learn how to use CSS in a modern approach, learning which properties are most commonly used and why.

Learn how to make your website responsive, adding different breakpoints to ensure your website is accessibility and consumable from any size device.

  • Full HD quality videos
  • HTML and CSS top resources
  • Web development links
  • Step by step instruction
  • Professional training from an instructor with over 18 years experience
  • Modern web design and modern approach to web development
  • Source Files are included

I'm here to help you learn about web development, and ready to answer any questions you may have.

You will be amazed are at how easy it can be to learn HTML and CSS.   Start creating website today!

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor


Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Building Websites Web Design HTML and CSS: HTML and CSS are the core building blocks of the Internet and make up what you see online every day. This course is designed to introduce you to modern website design with a focus on real world, everyday Web development skills. Let us show you where to start and how to create websites. This course has the answers to anyone who wants to learn to make websites with a practical , real world approach to teaching website development. It also includes everything you need to know in order to get started quick. Just knowing the syntax alone is not enough. You need to know how to put it all together. People are always asking me what what do they need to do in order to create websites? What do they need to learn? This course has the answers that you've been looking for step by step training, demonstrating how to use the syntax as well as how to apply it with HTML and CSS together make really amazing Website Web. Our approach is different. Learn to think like a Web developer Web development broken down not only into html syntax but also showing you how to think about your age to melt as you created to better prepare for styling. It saves you time so you can create your HTML and then move on to CSS, making your website come to life. CSS is where you can let your creativity flow. Transform your HTML code into a beautiful website. Learn how to use CSS in a modern approach, learning which properties are most commonly used and why learn to make your website responsive, adding different break points to ensure your website is fully accessible and consumable from any size device. Full HD quality videos HTML and CSS talk resources are included. Web development links step by step instruction professional training from instructor with over 18 years of real world experience, modern website design in a modern approach toe Web development source files are also included, so you can work alongside the lessons. I'm here to help you learn about Web development and ready to answer any questions that you may have. You'll be amazed at how easy it is. Easily you can learn. HTML and CSS start creating your websites today 2. 20 CSS selecting elements from HTML: CSS is the part where we make our website look like we want it to look. So we add our own spin to the website and making things present itself within the Web browser the way that we intend them to and with styling. There's a few different options to add styling. So we saw that with our HTML elements were able to add in attributes and we can do that by adding and I DS and a whole number of different attributes that available within every element. So let's say we wanted Teoh look at Header and we wanted to add in styling into header, for instance so we can see that we've got a div here. We had it in styling over here, but we also have the option to do in line styling and this commonly isn't done. But I'm just going to show you so that you are aware that there is an option to do this. If it ever saw arises that you want to do this eso I'm gonna do background color and there's a number of different properties and we see that one side of Blackground color of red. It shows up as read that particular element takes this style property and takes the stall value and applies it to that container and makes it red. So this is something that is fairly powerful in the way that the content is bringing represented to the user, and the downside of adding it in line styling is it makes it really difficult when you want to make updates to it. So and also it makes it really difficult if you want to share the same styling across multiple pages. So this is where we do on page styling, and we also do external CSS so and it works the same way. So if I wanted to do on on page header style, so not so on on page styling would be typically for any any website content that would be specific for this particular page. So if we were building out a website template, we would actually linked to an external style sheet, and I'm gonna show you that as well. So instead of linking to it over here, I can add it in here. I can see blue, and we see that right away that we get a blue background to that element So one of the things that you might be noticing here is that how were actually attaching to the different HTML content. So here I had done dibs and this property got attached to every single day. If and when we added Header, we did the same thing even though we only have one header. This could become a problem if we have multiple headers. And this is where we got to be more specific, how we're selecting the different elements from our Web page and how we're applying styling to them. So we can also do things where, where nesting that content. So if I had let's safe in this section, I had a header as well, and I had a bunch of content in there. So I'm gonna just duplicate the suit or somewhat duplicated there, and so that this will give us a bunch of content there. So we see that now both header sections are blue, but we're only intending the 1st 1 to be blue. And what we're doing here is we're selecting it via the tag name and we have different options here. We can select it via the tag name. We saw it in selected via the I d and those air for specific elements. So if we want to be really specific, we could select weaken give this one night I d We have another option as well and we can assign classes here and classes air indicated with a period and then the class name so we can assign classes as many times as we want. So if we want to sign the value of class here and take this background here and then refresh it, we see that we only have the background value there. And the good thing about classes is we can use them on any different types of elements. So if I want this paragraph to be blue or if I wanted a specific piece of content to believe blue So maybe this hyperlink even to be blue. If I want to specify that this little chunk of content is blue, I can add in the class to there and then add the content in there and so on. And this is where we start using spans because this gives us the ability to break apart that content and apply styling to it. We can also be very specific by specifying the parent. So let's say we see that this particular header is within If we had a parent that was wrapping around it or let's say we have header and then below that is a knave so we can specify this as well by nesting it underneath it and we can be really specific that we only want this particular header with a knave there to take that value. We could also be specific that we want a header with a specific class to take that characteristic, and we see that it's only this one. It's only the headers that have a class that turned blue the rest of the class elements. They don't turn blue because we're being really specific and we're really isolating out those elements that we want. Apply that styling Teoh. So this is part of the strategy when you're developing your HTML to really think about how you can isolate out those elements and all of those elements that you want to make apply different styling to need to have a way to be able to pick those out. And of course, these this ways to sign ideas to all of them so you could do that. But then that also right leads to a lot of attributes within the elements and so on. And if you're ever changing them, so it couldn't lead to some confusion. So usually the best way is to really kind of plan it out and figure out which ones the parents are and then which ones? The ones underneath our. And if that's a unique way to identify it, then use that way and really try to pick out the best way to identify the elements within your HTML page To apply your styling, too. There is another way to bring styling onto your Web page. Eso we showed you how we can identify it on on page in line and lastly, and probably the best way to do this is to actually link to an external file sheet. And the reason that this is the best way to do it is because this gives you the ability to reuse the style sheet over and over again. And all I mean by style sheets is that we're linking to a file and the file is going to be spelled out CSS. So it's got the extension CSS, which would indicate that this is a style sheet and then for setting up the link. We do that within the head area here because this is not something this is not content that were out putting for the user to digest. So we specify that it's a link and it's R E l. So that's type of link that we're doing and the type of link is gonna be a style sheet and then last sweetening toe H ref to the location of the style sheet so the stash is located locally. You can also link out to online style sheets. You can use either relative or absolute leaking paths here toe link to the different files . But this is just to show you that I'm linking over to this style dot CSS. And now I have the ability. If I create multiple pages, so right now I've got index dot html. But if I create about dot, html and so on, so it doesn't matter how many pages they can all link toe one style sheet. And, for instance, if I wanted my background of my body to be particular colors, so background color, so any page Now, linking to the style, she is gonna take the properties there and display the background color as beach. So anyone now that links to it, is gonna be able to take that properties there. That air within this page within the CSS file. And this really, truly is the best and easiest way to work with style sheets, especially when you do updates. It really gives you ability to open up just one file and make all of the updates to interior to your entire website so really powerful and best way to go about applying styling and creating out styling for your entire website. 3. 21 Working with CSS colors: we saw how with CSS there's three different ways how we can access different elements within our web page. So we've got classes we've got via the I d or just via the tag itself. So right now I'm gonna select this particular header area and I'm gonna make thes paragraphs stand out a little bit more. So how would I go about doing that? Taking look at my HTML structure. I see that header paragraph is is unique. So I've got header and I don't have any paragraphs in this header. So this is one way that I can access these particular elements so I could do header in any paragraph that's underneath the header is gonna take these properties s over. Here is where I can set a background color of blue. Maybe you want to set it as yellow, so it stands out quite a bit more. I can also update different things like the font family. I can also update the font size. So I want to make it really standard. Make it really big s. Oh, there we go so we can see that we can really start to bring out different elements within our Web page just by doing this by applying styling to them and get them to really stand it . And background is one of them were commonly used ones as well, a setting the color of the actual text. So we see that by default it's black. The default background color is white, so I can actually update the text color by using color. And this is just something that brackets is giving me a drop down. There's a number of different options for applying colors. We can do it with a color name, pre defined caller names. So this is what brackets is suggesting to us here. We can also do it via Hexi Decimal, so this is hex value for the color names. So if I wanted White, it starts out with F f F s 06 efs X. A decimal is a white color, so it's equivalent Teoh to 55 on white or 2 55 red to 55 green to 55 blue. For RGB. That's another way to attach your color values. I So this is Hexi decimal values. The darkest colors would do a hash and weaken do zeros that would make it black. So the complete opposite. So starting at 000000 and going all the way up to F f f f f f and case doesn't matter. So it's not case sensitive, so you can do lower or upper case. And there's also a short form. If all of the values all of the characters are the same, then you know only to specify the three in order to you specify it white so we can do a short form for White, where we do f f f instead of the six chefs. Now that we've got named colors, we saw that we've got hex values, but we also have RGB and RGB is we can use these hex values in background colors as well, so they're all interchangeable. You can pick up the color names and use them. However you want to use thumb s. Oh, this is not specific for any particular property. You can use colors interchangeably here, and for the most part, people are using the Hexi decimal colors because they're more probably one of the more specific ways to do it. I'm gonna also do another way so background color so if I wanted a background color, I can do an RGB color so this you might not find as commonly used. But again it is. It is used. And what, uh, ability to set Alphas. It's It's used more and more now. So with RGB, we would just set the color the background color and we specify RG be So that's red, green, blue and how much tint that we're applying to it so white would be the top one would be 2 55 to 55 to 55 black coinciding. Lee would be 000000 Now, with with CSS three coming out, we also now got the ability to set background colors with an Alfa. So a transparency going through them and this probably isn't gonna be very noticeable. It's gonna look like a great out shade. But I can see I can set rgb a and there is looking for four values. So this value is gonna be starting with zero, which is completely not visible so completely Alfa on, and one which is a full solid color. So if I want to do something in between, I could boot 0.5 and we see that we get this great out color and all this means is that we can actually see through these. So if we have content underneath here, then we'd be able to see that content. So let's say, for instance, we have a background that we had a background image. Then we would see this Alfa color going through, and we'd be able to see whatever content we've got underneath there. So the next lesson I'm gonna show you how to set up background images, so it's coming up. 4. 22 CSS Background options: backgrounds are actually some of the more complex properties that are available within CSS . So we saw that we could set backgrounds for different elements, and we can also set backgrounds for the body. So I'm gonna show you to do that. Within this lesson. Let's open up our style dot CSS. And we're gonna select body and from body. And now we're gonna add in a background image. So we need to be able to have a resource for an image. We've got place. Hold it. And we've got Laura, um, images, Lauren pixel images. So maybe we're gonna just grab one of these Laura, um, images here, so it's gonna grab that path here, copy it and go open up my editor and add background image. So much like way specified background color. We see that brackets is actually giving us options here. We've got color, which we've already looked at, and we've got a bunch of other options here as well. So we've got image. We've got position, repeat size, and so on. So for this one, we're doing a background image, and here now we need to to specify the URL off the image, and we need to put quotes around. There s so we specify within the brackets the you Earl of the image we want to use for the background. Let's take a look at that. And now we see that we've got a bread image in the back there and now we've got a bridge and so on. So some really nice options there that we can do with background images. Now, there are some things that you need to be wary of off. When you are creating images, we see that we get this background and we've got our text is hardly readable. So this is stuff you've got to be cognisant of that when you ever add in on and you want to make sure that you've got contrast. Although we do see that we get that RGB a effect here where we can actually see through the the colors there so that Alfa transparent colors and this is CSS three, so may or may not work, depending on the browser, the age of the browser and so on. So that's just a warning about that s o just like what we were doing over here within the header paragraphs where we set multiple properties, we can do the same thing for the body. So let's say we don't want this background image to repeat or we only want repeat on. Ah, particular angles. So we've got background. Repeat and here we've got all of our options so we can do in no repeat, so that only shows that one time we can also set it up to only repeat on X recon. Repeat on why, by default, it's repeat, and that's where we've got it. Right now we're showing them all if we go X, so it will only repeat across the horizontal line. If we do why, it will only repeat vertically. But we see that depending on the image size, it's only taking up its allocated space. So we also have some other options where we can repeat eso. Let's just keep it at repeat and let's check out some of the other options that we have for background images. So we see here that we've got it repeating, but we can also, so even when we scroll down, it's pretty much infinitely there. It continues to repeat and so on, so let's actually set a background position So we've got an option here for background position where we can set it to the bottom weaken, set it. And maybe we need to update this to know, repeat so that it makes a little bit more sense when we're actually positioning it. So we see that the image now is positioned at the bottom, and whenever we scroll up, it stays fixed there at the bottom because we've got no repeat. So it's actually going from the bottom, and it could be cutting off at the top as well, so I'm not sure if the repeat was cutting off. But if we do repeat it, we see that the cut off now should be at the top. And because it's starting from the bottom, it looks like it's fairly well sized for this. So we're not really seeing that effect if we go back to no repeat. So let's bring this one up to you. The tops Bryant rack up to the top, and we also have some options where we can put it on the right hand side if we want. So now it's talk rate. Let's just save that and give it a second here to refresh. So now we've got top right. We can also do left, So bring it over to the left and this is the default again. So we also have some options to fix the position. So instead of having background position, we also have an option here for background attachment s weak and fixed, inherit local scroll and so on. So by default, it's not a fixed position. So it's a scroll position. But the fixed position gives us this effect where the background stays still and we can see the content hovering on top of it and just to finish off eso we've got what we see. We got a lot of options for background. But we also have a way to right this a lot shorter because we keep having to repeat this property and then the value and another property and value. It wouldn't be a good wouldn't it be good if we could just do background and have everything in one place, and we actually can we can apply shorthand to it. So if we have, I'm gonna add in a background color as well. Just that we have that as the defaults of background color red there and so on. So let's take a look at this shorthand option so we can accomplish all of this at the same type of format where we can do the color there we can add in that you are l There should be a space there in space. There s o the color red. You are L S O. Now it's repeating by default. So it's odd in that No repeat. So now it's going back to that no repeat and now we can position it. So we've got it left. So let's put it up. The right, put at the top And there we go. So now this value is overriding all of this, and it really does look a whole lot Niedere. Instead of having that, we can have it within the shorthand method and accomplish the exact same thing. So with backgrounds, there's quite a lot of options, and there's a lot you can do with your backgrounds, I would say First, try it with the longer methods until you get used to all the different options, the properties that you can apply to the backgrounds and then you can go ahead and bring it all and create a shorthand version of your longer CSS properties here for backgrounds 5. 24 Adding Fonts: one of the others Really neat things about CSS is its ability to really get a different feel for your website. So we saw that just by adding and background images, we can do quite a bit of control with the way our website content is being output. So I'm actually gonna change this back to a white background and I'm gonna keep that image in there and I'm gonna pull the image into center. So it's centered if within that position and we see within our content here, we've got different text. So usually I like to set different main properties such as the thought that I'm gonna be using throughout the entire website just up here within the body. So this is a typical thing that you would set within the body. So fought family. We see we've got some defaults here that are being suggested by brackets. But one of the really nice resources that I usually like to use is Google fonts, because this gives you the ability to pick out some of these really nice customized fonts and add them into your website and this is gonna be so easy to do. So all I need to do is go over here, click the thought that I want to use. I can take a look at it and so on. I could get some additional information. And when I'm ready to do it, I'm select the font and finally selected. And I've got two different options to bring the front and so I can link it within my HTML. So this is the standard way to do it. And this would require if I want to use this font on top my entire website, Then I would need toe at in this link and each and every web page. So this isn't ideal for me. Eso usually the way I usually try to do it is import, and this is gonna work the same way, allowing me to import that fought up here. So I do it right it right to the top of my style sheet. And then I go over here and whenever I want to use the font, I could just simply add that in as a farm family. So if I want to do fought family as the one that I've just selected, we can see that now it gets applied to the thought family. And now I've got Oswald Sant's right sans serif font on my website. It's Azizi. Is that added into the background. So I'm also looking at this background and for now, let's just comment about this background and we're gonna bring it back a little bit later on within this project. So that's not interfering. We can actually see the text on our website. So next thing that I want to do is I'm looking. I've got a bunch of hyperlinks on my website and I want to update those. I want to update the look and feel of the hyperlinks because with modern Web sites, this is an old This is the old way of doing at thes defaults, words blue with the underlined, and we're gonna take care of this and update this toe holding you look and feel in upcoming blessing 6. 25 Pseudo classes and design patterns: so we saw. When we add in our CSS, we can really control the look and feel of our website. It's another thing that I usually like to include at the top of my Web page is specifying the different way to handle hyperlinks. So within our Web page, we've got a whole bunch of hyperlinks and I typically don't like to see this this underlying. So this is one of the first things that I usually removed, and it's just text decoration and we just do text decoration. None. So that removes that default underlying that is attached to every anchor property. So now we can see whenever I refresh the page, we've got no underlines on them and also by default, the font is blue. So I want to update it to a more modern look and feel, and actually to be more in line with the website that I'm designing. So maybe I wanna have red instead of blue because it just makes more sense with the content that I'm producing. And maybe it works better with my background images. This is where you select it, the different color schemes that you're going to be using and start applying them within your website design. It's another thing here that now that we've changed to read text, it doesn't actually exactly look like they're hyperlinks. So this is where we need to add in a pseudo class so we can add in pseudo classes and their classes, and they're indicated here by the the coal in there. And then we specify what type of pseudo class we want to add in, and what we want to happen is every time the user hovers over it, we want to add in. Maybe we want to add back the underlying so this is commonly done. This wealth, we add in underline and so text decoration underlined and maybe we want to add in a different color. So we want to make it really standing up. So maybe making gold completely red. And now, whenever the user hovers over it, they can see that this is commonly used for hyperlinks and that now these air indicative of what hyperlink looks like on on the website. So the user now knows that these air hyper Ling's and when you are looking to make updates on your website, there's a really good resource at Yahoo, where we've got developer Yahoo patterns. So these are what we typically see as design patterns for designing websites. So we've got some typical uses of different ways to set up patterns and that users can understand that this is how you can present different elements on our Web page that the user would understand because, of course, it's really important that the user can come in and understand that these air hyperlinks. So, of course, this is a lot more advanced here, where we've got Accordions and we've got red crumbs and so on. But this is the idea of when you're designing your website, you're applying your CSS always stated, take into consideration what the user is going to see and how they're gonna be able to interact with that content. And this goes all the way to how you're presenting hyperlinks because hyperlinks are one of those basic essential pieces of elements that are within your website that you want the users to be able to recognize. So by this I mean that you don't wanna have hyperlinks and turn them black or something like that with in line with the rest of your content because when that happens and we refresh it, we actually don't know where the hyperlinks are. So even though we can still hover over them and you see the color changes, we need to have something that the user can understand that would represent that these are hyperlinks, so always keep that in mind. Always keep in mind common design patterns and just different ways that developers have been creating user interaction so that the user can come to your website and really understand how your website is to be interacted with. You don't want to leave the user confused as to something simple as hyperlinks that they're looking for your website and they don't know where they are. In the next lesson, we're gonna look at some more common CSS properties that were applying Teoh basic websites as we're designing them. To really bring out that look and feel that we're looking for toe, create HTML structure into an actual website. So all of that is coming up in the next set of lessons 7. 26 Using the Float property: in this lesson. I want to talk about floating values, and floats are used in order to set elements and position them either to the left or to the right of different other elements that it's related to. So, for instance, if we've got our images here, we see that we've got images scattered throughout our HTML code, and it's I just in line with the text. So it's actually not floating with the text, so it's not being pulled over. We've got these huge breaks in the text, so we can really easily fix this by adding afloat, tow it, weaken, float all of our images over to the right hand side. And now this is going to present it in a much neater fashion. So I do have some issues here because we've got the images too close together and so on. But essentially now they're floating better in line with available text, so I can also put maybe a max height off 100 picks, so that will show you a better example of how that how those images air floating in line. So maybe if we want to have all over images float over to the left hand side. We could do that as well. On we can see the way that float handles and better lines different elements within our about page. So also commonly used within websites when we're developing them is when we come up with their structure for content. So typically, if we've got a website and we've got maybe two different sections, this is where we're gonna use float again. So I've actually divided up our website. So I've created a div here that have called main and essentially, this is gonna hold all of this mean content. And I want to add in a sidebar that floats to the left to the right of it s Oh, this is gonna be essentially like a two section type web page so we can add in floats in here as well, eh? So we can identify it by main, and we can set a with off. So I have said it a with of a percentage with So maybe we want to set it at 60%. And I want to add in afloat here where I want to float it over to the left hand side. So this allows me to ad in my sidebar menu, but we see that the footer is being added in there as well, so we don't probably want that to happen either. So let's take a closer look at what's going on here. And I got a copy out some of this content here so that I can place it into my side bar. So I've got a little bit more happening here. So now I've got my sidebar created there, and I want to get rid of some of these. A swell. So now I've got a sidebar, but I'm not very specific on how I want my sidebar to show up. So let's let's create a border around here. One pick, solid black border so that we can better identify that main content section. And now let's work on the sidebar. So I have a copy this over, and I and a type identify it as slide bore, and we can't have it. 60 and 60 is over 100% on. Also, there's some default border sizing there, so this one should be quite a bit smaller than the other one in order to make it to make it line up next to it because, as we know, whenever we float to the left, if we're taking up 100% is not gonna be any space for any additional elements. So we want to make sure that we're leaving some space. So 60% and 30% is pretty good spacing. And we see that we've got the footer. They're showing up a swell, and this is where we need to implement Clear. So I usually like to set up all of these floats to the left and the right as classes and utilized them so I would have one class where I would have float right, and then I could just simply call to these classes as needed. I'd have another one where I would have a float to the left and I would also want one that clears of its float left. And lastly, I want to do one where maybe I can call it clear, and this is gonna be actually different than float. And essentially, what this is going to do is it's gonna clear out any of those float properties that might be lingering, and that might be interfere with some of our other content that we're creating and adding so we do have an option to either clear so we can clear the left. We can clear the right or we can clear the bullets. Let's do a clear off both and then now all I need to go to footer and apply class and I could just supply class of clear and now we see that the Footer is actually moving back down to where it was originally supposed to be positioned and where it's intended to. So it's not attaching to this side bar and the sidebar probably looks better if I floated over to the right because I've only got a two content area section here. So I've got a left and a right hand side and we can see that even when we're re sizing that really nicely. Resize is I can even make this a touch bigger and it's not gonna interfere with any of the other content areas. So whenever we re size, we see that we've got this nice division of are too content areas and you're going to see float again whenever we when we style our navigation items. So in orderto line them to the left of each other. This is where you're gonna see float again. So that's coming up in one of additional lessons. 8. 27 Box Model Margins: so another thing that I usually set within the top of my CSS. So we saw that we set some of these content areas. So I'm gonna move those down and I'm gonna move these ones up because these ones would be classes that I would use throughout my website and then these ones are intended for specific sections and that's what we're gonna move those down. And usually the way that I like to set my values is I start with the body s. We've already got a body tag there and then I moved to the next, the next level down. So from the body, there isn't anything equivalent to the body. But I do have the next main level down and remove that script. There I have is rapper s O. This is the main container from my Web page s. So this is what's gonna be surrounding my website on? I've given an I d of rapper also, sometimes you could see them used as classes and so on. Eso Typically, I leave like to given an I D. But we can also give it a class as well. Eso class of rapper So whatever the preferences For the designer, the developer, the results are the same because we want to really isolate out all of the content. And this is where I can do a background color. So if I wanted to do a white background color and I can go over here and I can specify my background like that s so now when I refresh it, we see that it's covering over the background. So not seen that background image. And it's allowing me to set a background color for that entire section and some of the other things that usually when you're developing a website, you might not want it to scale all the way up. So if someone has a really huge massive screen, then you want them Teoh, maybe contain a max with for the size that's allocated to the Web page. And this is where we could set within the rapper as well. So we could set something like we could set a Max with for the rapper. And this is gonna work the same way as it did with the images we've got a Max with. But we're gonna set a pixel with, so I'm gonna set it is a max width of 11. 80. So it doesn't matter how big of a screen the users on it's gonna be on 11. 80 max with also going to get rid of that border there and added around my rapper entirely and so that this was just give us a better idea of where our wrapper is sitting. So now one of the things that you might notice is well, you know, whatever. I'm re sizing it. It's still pulling over to the left, so that doesn't really look that great. Eso This is another area where we can set the margins and update where we want the positioning of our website and with margins. We've got an option for margin bottom left, right, talk so we can set the margins in this type of format where we can do margin of left auto margin of rights auto and what this will do is this will actually center our website content center, our whole rapper element. So this is a really nice feature, especially when you're doing a fixed max with on your website and we see once it shrinks down below the max with that goes by default to 100%. So it only allocates dot much space. Now when it comes to margins, just like when we looked at background, there is a simpler way of doing this. A swell eso with margins. We have what's known as the shorthand method as well. So just like the background weaken do margin and we can specify what types of margins we want on a particular element. So let me take one of these elements here, and I'm gonna specify the different margins. And so and open this up and within this content area within the article, I'm going to give it an I. D. And this is just something temporaries attempt. So just save. That s so this is in order to demonstrate the shorthand of margins s attempt. And we see we've got margin left margin right of actually going to give it a border stands out. Maybe also give it a background color. So I'll give a background color of quarrel so that we can really see where this element is sitting. So let's add in some margins here so we can set margin values s so we can set a margin at the top there, so we can 10 picks. We see it, moves it down. We can do 100 pics. It really moves it down. We can do 500 picks, Weaken said it house 10% so we can do percentages. Eso all of these air options. And then the percentages, of course, depends on what size of screen were on. So the smaller screen, the smaller the percentage and so on. So that's the idea with margins. So shorthand for margins gives us the ability to set values for the top there. But whenever we do 100 pics, we see that the 100 picks is all the way around. And there's actually something within chrome where we can see the box model of a particular element. Let's take a closer look at that, and we see that we've got the margins or set there, so I'm not sure how well we can see this. So the next value within the margin shortcut and I'm gonna show you another screen as well . The way that chrome box model works so we can set maybe another one of 50 and we see that now we've got a value of 100 at the top value the 100 the bottom and 50 on the left, 50 on the right. So we also have another option here. We can set another value here so I can set it at zero pic. And now what's happening is we've got zero pick at the bottom 100 at the top, left and right has 50. So if you think of it that the way that it's working right now is essentially if you've got all four values in there, so maybe I could do 200 pics To really isolate that one out and save that we can see the way that it's working. So 100 at the top 50 on the right is zero at the bottom and 200 on the left. So this is in a clockwise fashion. So if you include all the different four values in there, which is the max that you can include for the shorthand you cover off top, right bottom left. If you've only got three the 1st 2 so that this one is the top. This is gonna be the left and the right. If there's not a second value than it die, then it he falls back to the value of the left or the right side and a prize that value to the left. And if there's no third value than it's gonna default, the bottom to the top value and so on. And if there's no second value that it's just going to default them all 200%. So let's open it up in our other editor here. And this way we can see it in a little bit better fashion there, the way the box model is gonna work s so we can see that we can select it, that particular element that we want to look at and here we can see the blocks model in a visual visual ization here using chrome. And this is available within any about version of chrome. This is just the chrome deaf tools, and we see we've got our margin 150 0 and 200 it's also giving us the full box models. We've got our border value, and then there's one other property here, which is the potting eso. We can also set that and we're gonna show you how to do that in the upcoming lesson and another really neat thing about Kronwall. Have it open is you can make some adjustments to it as well, so we can update thes margins and here can completely remove it out. We can also make some updates and here and just to see how it's gonna look. So maybe we don't want to have that money values there. We can update it and chrome and get a better idea of how it's gonna present out. Same thing with the colors you can update the color eso If I didn't like that, I could change it to read. I can change it to it. Looks like our it's just a ride back up Purple eso is a lot of different options here, Rosie Brown and so on. Eso just keeping in mind that these values are only at this current open version of chrome and these air not gonna be values that are gonna be staying within your source code s Oh, this is just another way to kind of practice and work with your code to get it looking and feeling the way you want it, present it. And so now, whenever we go back to our source code, we see that we've got some options here for the mock box model for the margins. And if we've made some adjustments here, we can always update it within our source code to get it aligned with what's being presented on the Web page itself. So the next lesson we're gonna look at potting, so padding is gonna be on the inside of the border, whereas margin is on the outside, So that's coming up. 9. 28 Box Model Padding shorthand: So now that we saw how the shorthand method works, let's have update our rocker and remove out the left and the right, and we're gonna set it to the left and the right would have zero or auto and the top in the bottom would have zero. And this is how we can set up our wrapper in our Web page in order display. According So now when I refresh, it s So now I've got my centered, Paige, just as I wanted close this one down and I've got my page centered just as needed. And it works the same way as left and right. So in the previous lesson, we looked at margin, so we can also do padding. And this is on the inside of the border. We've got several options, just as we did with margins. We've got bottom left, right and talk. And the shorthand is gonna work exactly the same way. Where if we've got a set of values like this, we can add them all in and have them show up within our Web page here. So now whenever I look at this particular element now into select again within that chrome deaf tools. We see that we've got our margins here of 150 0 and 200. We've got our border, which is 100 all the way around. And then we've got her pouting. So 150 0 and 200 the the potting is on the inside and notice as well that it's also moving that text in because that text and the images and all that content is sitting on this inner part of the box model. So it's sitting inside of the padding, so the padding is actually outside of it. So essentially there's four different layers here within the box model, there's the margin, which is on the outside of the entire element. The border, which is sits on the border of the element and creates that border so we could set different border values as well. And we've got padding here, so the padding sits on the inside of the border, but still on the outside of the content. And then finally, we come to the content. So whatever values we've set here, the content is going abide by what's available for it. So typically, whatever we've got to content sections especially. We've got a board around like this. We don't want our text sitting right up next to that. And this is where we would use the potting and the margins in order to accommodate that. So typically, I don't want my text sitting right next to it. So let's open up our sidebar and add in a little bit of padding there for the text. Now, if we refresh it so it gives that text a little bit a better feel they're on also for the main content section. We might want to do the same thing where we add in some padding around there and also keeping in mind that we want to make sure that we're not using up too much space because then we're gonna bump available allocated space so we don't want to run out of that as well . And eso now it's much neater way to present our content on our web page. Open up. This display s so we can see the live displayed as well. And now I can get rid of some of this border around there. So typically I wouldn't have a border here. I probably wouldn't I could maybe keep this temp in here might come in useful a little bit later on, so it doesn't look that bad. So maybe believe that in there and remove it. The border for that surrounded Save that refresh. And I could see what are what Page is gonna look like. So we've got our side area here. We've got a board around it and we've added in some padding around the text. The next lesson we're gonna look at moving down from the rapper. So the rapper was our main container here, and we don't have anything next to the rapper s o any siblings to the rapper. So now we're gonna move into this section with is our head section. We've also got our navigation bar in there, so that's coming up in the next lesson. And we're gonna actually style this and make it look like a navigation bar. So that's coming up 10. 29 CSS to create a navbar: in this lesson. I want to talk a little bit more about setting the font sizes and then we're going to set up our navigation bar to actually look like a navigation bar. So typically within a website, we've set our fault family and we're also gonna set a fought size. So font size is you can set any size you want. You can use different values, different units for size measurement eso We've been using picks, but we can also use e m e m. What essentially e m means is it's in relation to the size of the current fought eso won E M is equivalent to the current fought size. So if we do a 1.2 PM, let's could be slightly bigger than the current spot size. And if we did a 2.2, it would be twice point to the current fought size S O. This is just a unit that it's always a good idea to set these off hand, and this also gives you the ability if you want to set for paragraphs and you wanna have specific font size just for anything contained within a paragraph, so maybe you wanna have it one e m for the paragraph size. So that will give you a little bit of diversion from different content areas within your web page. And you can also go to set your typography. So if you've got your each ones and sometimes those each one's get really large where sometimes you even want them really large on your websites website. So this is where you can set different things like that heading size we can set to e m size . So there it stands, it quite a bit more. We can also go down and do an H two and maybe we want to teach twos to be equivalent to the H ones. Eso we could have them within the same size and so on. So a number of different ways to represent this type of content And if you are setting the H ones h twos, you probably should set the rest of the handling of the header sizes s so that you don't have any kind of varying sizes in case you do use them. Eso you could set your H threes and slightly smaller than the each twos and moving all the way down eso Maybe this could be a 1.8. This could be a 1.5, and then you could set all of your H fours. So h four each five and h six is to be the same fought size. And maybe you don't want them to shrink below the one e m size. So this lesson we're gonna build out the rest of our navigation bar, and I'm going to actually sign a class to the navigation bar, and I'm going to get a class of knave eso. This is in case we decide to use the knave tag somewhere else that it's not interfering with the way our content is being displayed. It put it above the main and the sidebar, but underneath the rapper because this is essentially the order that these elements are falling in, I'm gonna take these ones and move them below. So these are some of the default ones eso these air defaults, these air, the tags mean typography. And so on on below that I've got the rapper and then below that I've got the i ds here so that I have a good way of kind of reading through and understanding how my CSS is being laid out. So now we want a attack. Go to the naff bar and see Makesem updates. Totally. The content is being presented. So if we notice that we've done it the nav bar we've got on a Nordic list. So this is one of the first things that I usually like to take care of and get rid of are the default styling for the an ordered list. So that's the potting there. So just to make sure that I set it at zero picks and also margin so it doesnt bite default , have a margin. But it did have some padding, so it pulled it all the way over to the left hand side. So you can see that now we're pulled over to the left hand side rate away just by updating that I can also update. So if I don't remove out that padding, we see we've got the list items there, so we should definitely take care of those as well. So now, class list item and we're going to remove out all of the lists style types. So we've got an option to set different style types s So this is another way that you can actually transform a Norden list into an ordered list. So just to show you how that works so we can actually transform the type of the list style type. So that's a real anything. But for now we want to do is we want to completely remove those bullet points. We also wanna have ah, horizontal menu. So we don't want to have this vertical style where we have a whole bunch of different list items. It's going to continue to go and flow down. So I want to remove out all of those that styling there, and I want to make it float s. Oh, this is gonna be the same thing that we looked at earlier, where we can float different elements. So I'm gonna just float the list items to the left of each other and also you're not in the border, so we can easily identify where the end of the list item is. One pick solid, and I'm gonna add a really late border. They're real. So now we can see and identify all of our list items. So next what we want to do is look at the hyperlinks and eso. We can identify those. We've got a class snob list item and we're gonna die if I the anchors that earn within those list items, and this is where we could make it differentiate from the actual hyperlinks that are throat my Web page itself. So let's add in. First of all, it's out in a background color, so it really stands out. Eso let's pick something. Maybe not that color. So pick something that really does stand it there. We also see that the text is right up against the border there. So let's add in some padding there. So maybe we can do 10 picks all that we around. So that can really style that out quite a bit better there. I shrink that down a bit and refresh the page. So now we've got all of our hyperlinks there. We've got some padding there. I want to display it as a block, and essentially, what this is going to do is, if you saw there essentially decides that block styling to that each hyperlink. So block is the same thing that happens with dibs, where it takes all of that allocated space Also, I want to make sure that the text decoration is removed, so I know we've already done it over there on the hyperlinks. But whenever you're styling out your individual elements, it's it's always a good idea, even if you have to repeat certain properties toe add, the was in just in case you decide to remove those, and then your navigation bar all of a sudden has underlines to it. So we want to make sure that we're accounting for any changes that might be up and coming in the website. And also, I want change the color of the font to be something different than what our default is for hyperlinks, because we want to be able to distinguish them from the actual paper mix. So let's turn them great like that, and we might even want to do a black background. So or maybe we want to do white in a black, so it really stands out so we can see how our navigation bar looks. And now it's still still missing something because typically with the navigation bar, whenever you hover over it, something happens. So this is the same thing that we looked at earlier with the hyperlinks where we've got that suitable styling there that we had in the hover. So let's copy this one out, and we're gonna do the same thing that we did up the top where we add in hover And now we can add some additional properties for hover and I'm gonna just reverse out lights and I can change the color to black. So there we go. So now we have ah, fully functional navigation bar. Whenever we hover over it, something's happening and the user coming in can really usually tell that this is the navigation bar meant within our website design. So the next lesson. We're also gonna continue to look at some of additional commonly used CSS properties that are available when you're building out in your styling, your website. So it's coming up in the next set of lessons 11. 30 Display properties CSS: in the last lesson, we build out the navigation bar we saw that we used displayed block. Essentially, what display block is it gives it the properties that a div would typically have. Now we can also flip this around where we could do a display in line eso. This would give it the same properties as you typically find when you're doing when you're doing a span, so in line would keep them all in line with each other. So if I were moved out, this left here, it essentially and if removed this out. So we do have another option here when we do our display so we can do a display block. Massoud. What happens now? So take up the full width. We do have a non option to display in line, so that's going to display it in line with available the rest of the content there. So it's moving it up. It's not allowing. Take that full available styling on Also, In addition, we have another option where we have in line block and what this is doing is this is a mix between the two, where we've got that block styling available to us but we're still in line as well because we already have thes list items already have block values to it. If I was to move this in line block, we see that whenever we're applying in line block there or even if we're applying in line, all of the elements line up. So this is what we do with display. We can set up how it would typically display itself. We could use in line and so on. So I'm gonna switch this back. And sometimes you do see that navigation bars are created with in line block eso. You can do this as well, where you can transform the list items to be in line block and handle it in that way as well. So I'm gonna just flip this back, and there's also one more. So this was originally float left. So different ways to essentially accomplish similar type of actions within your Web page. Eso Another thing that we have. Whenever we do display, we can also display or display none. And what none does is it simply heights it So it's it's like it's not there. It's removed from view from visibility and keep in mind that this is different than when you do visibility, because if you do this ability, visibility to hidden, it's still going to reserve out that space there. So we see that the visibility hidden reserves out that space of those blocks. But it's eso it still keeps that in reserve, but we don't see it. If we do display none, then we don't see it at all. And if we do display block, then it allows us to take that full block spacing that's allocated to that element. In the next lesson, we're gonna take a look at overflow on how that works with the various elements on her HTML page. 12. 31 CSS overflow handling: got another property that's commonly used within CSS, and I'm gonna demonstrate it down here within the temp element. So what I need to do is I need to set a width of 100 pics. I need to set the height of 100 pics. And what's happening now is that I've got some content and we're not able to see the rest of the content. And this is how we handle overflow eso with overflow. And we've got options with overflows. Wells, we can overflow, X weakened overflow. Why as well. So we do have a few options there, so by default, were hiding that content. But we can also make it visible, so refreshing it go up to her. Html. We can see that all of this content here is within temp. So if we had a large each one there, we still have all of that content. But it's overflowing. That's going on top with the rest of that content s. So this is the overflow. There s oh, no, it's hard. It's a little bit hard to see what the difference is because the background is not actually overflowing. It's just the content that's overflowing So this is where we've got a visible. And when I removed, that s so it's still visible there. So by default, it's actually visible. We do have an option to do hidden eso this lights, any of that content that's overflowing eso This allows us to hide that content. We can also add a scroll there. So that's another neat feature with overflow eso. If you've got a whole bunch of content, you can add these really nice neat scroll boxes as well. We can also specify, uh, we can do an auto A swell so the auto automatically scrolls it and so on. So few different options for overflow and with specifying the overflow. So if we've got Overflow X, we can have a scroll. So if we want to really specify that, we only want to scroll on the left, weaken do overflow of why, and we can hide that order flow. So if we only want the scroll bar to be horizontal, we can accommodate that as well so that this doesn't give any options for the user to scroll horizontally. And typically, whenever we're writing our HTML, if we want to make sure that's fitting within a particular space, then we just leave it hidden like that 13. 32 CSS positioning elements: in this lesson, we're gonna look at positioning elements on our web page. So this is another common use for properties and for CSS in order to position in certain locations, different aspects of our web page. So here I've got my and I said, overflow to scroll s. So what I want to do is actually want a position attempt element. And I'm gonna just add in position here and we can see we've got a number of options here. So we've got absolute. We've got fixed in hair, relative static and sticky. So let's try Absolute. And what absolute does is it allows us to actually float over, not content that's underneath it. And now I can actually specify where I want a position, this particular element so I can do 20 from the tops of 20 picks from the top. Aiken do left. So maybe zero picks from the left bring it right over to the left hand side and notice whenever I scroll. It's in line with the rest of the content there, so it's sitting as a position there as an absolute position where it's not actually moving , and it's positioned accordingly to the rest of the content on the Web page, so it just floats on top of their. I can also position it from the right. I can position it from the bottom. It's a number of different options here and notice that the same thing happens that it positions itself from the bottom of the screen. So 20 picks from the bottom of the screen, so it's positioned to the nearest ancestor. So if you position it this way, then it's sitting to the rest of the content there as positioning itself in that type of a fashion. Now, if I change this Teoh a fixed position, the shoe, what happens with fixed? So maybe I'm gonna do top on swell, and this is useful if you want floating menus and you see now, whenever I'm fixed, it's staying in line with the screen. So the viewing area of the user and this is what's different than absolute because initially it's gonna look the same way until you try to scroll and you see that it stays fixed on top of the content there, and it just floats there in a fixed position so it doesn't matter if the user is scrolling they're gonna fix position. It s o relative. There's another option here, which is relative, and this is just the normal position. I would see that goes back into place here and talking, right? Actually aren't really gonna be doing anything anymore. It's going to just give it some positioning from the previous elements of top and rate. It's not in line topping rate with the rest of the elements. It's just within that one. That's it's relative to. So I'm gonna bring the top and right back, and we can see it's still gonna move that over. And we can still have a little bit of movement there with the with the Element. And lastly, there's also one other one that's not positioned it anyway. And that's static. It's a static position, and then when I refresh it so our static position just keeps it. It's lake relative, but it doesn't use. It doesn't allow us to use the those positionings, the top in the rate, so it's static within its position. It's not defined in any way. It's just according to how the normal position would have been. Therefore, different options for positioning your elements within your Web page. 14. 33 CSS tweaks and updates: I want to add in some updates within this lessons, we notice whenever we get really big and we've got the spacing there are navigation bar doesn't fall exactly in line with the rest of our content. And that's because we're using the floats. And we didn't clear out the floats, so it's always a good idea toe. Add in a class to clear out those floats so that all of the content gets presented and falls in line properly. Also, when it comes to So what if I refresh it now? So it's gonna look quite a bit better. Us? We've got still this temporary one that's floating s I mean, that doesn't really look that great, so we can take care of that as well. And we can get rid of some of that styling that we have added in there with that position styling and so on. So I'm gonna just rename it to attempt a on that will give us our temporary section that we were using over here back. So now when I'm looking at this, we might want to actually align these two center them s We have the option here to center text So we've got a class here, Sold seal s. So I got a copy. This one and, you know, week some text text alloy. So center that text that centered it there And if want to apply something particular to each one of those paragraphs. So we noticed that we've broken it down, or we've got them as hyperlinks there. So as each one of those anchors, we might want to do this plea block to display across the whole available section. We might also want to add in a border, so one pick solid and will make a really late border. So now we can distinguish between the two different hyperlinks that we had there. And what I really want to do here is try a border radius. So someone out in a background color so that we can see those standing out as well. And me I want to do fought size, so fought size and to gm's that really stands out. There s Oh, yes. So I wanted to add in another one that I really like to use, and that's border radius. So this one is a new one with CSS three and what it does is it allows us to set a radius for the border and we can see that the larger the value is that we get these rounded effects to it. So that's a really neat thing. Toe be ableto add in because this gives us the rounding of it. I can also add in some padding there, so padding of maybe just do five picks padding. And now I can actually get rid of those line breaks so I can get rid of some of that formatting that I had with in my CSS. Maybe also margin talk five picks so that we can distinguish between each one of these different hyperlinks here on our website. And actually what's happened now is we've got the border radius because I believe we've got the CLS applied there as well. So you might want to get rid of that. Unless you like that effect where we've got those rounded buttons, there s So now it's back, back to normal, back. Our navigation bar is back to normal. We've got these rounded hyperlinks here, and I also wanted to look at pseudo elements within this lesson as well. And so what pseudo elements we use, um, within CSS. And they're very useful ways of identifying all of the different elements. Eso Let's say, for instance, here we've got a number of paragraphs and we want to be able to distinguish between all of the different paragraphs or one distinguished between the different articles here. So I've got two different articles, have got a bunch of sections as well. So maybe I want toe split off my sections or split off my articles or just split off my paragraphs. So, first of all, let's just try to split off the paragraphs first and see how that's gonna work out so I can identify. Usually the hard part about CSS is really isolating and identifying it, the different elements that you want to use. So I want to use this one here. Or maybe I want to use eso. Just use article and I'm going to do the different paragraphs. So I want to select the paragraphs and I will apply some of properties to them. Eso by background, background color and deploy slate slate tend to them s. So what happens if I actually want apply it to every other one and this is where we can use elements such as a child. So if I want apply on Lee this to every even element I can do an end child and I can set even. And we see that now that sets it only to the even ones vice over. So I can do it to the odd ones s so that they can really distinguish out all of these different paragraphs. And I can apply any of the styling properties now to any one of these paragraphs as well s So this is a great addition within CSS because again, it helps us identify the different elements and be able to work with them within our HTML structure without actually having to add I ds and classes. So the left side using classes that we can add the better for us and the more that we can pick out those elements and isolate them out just within our CSS code, the more powerful and the more easier it is to write that CSS code. So we have looked at these pseudo classes before eso even if I want to only pick out the first child, I could do that as well. There's a number of different options there. So I can see that whenever I see that now, this is only going to be applied to the first child within that order. I can also apply to the last one. So this is going to that last one there. And so it's a number of different options there, so much like what we're doing here is we've got some other options as well. So I'm gonna bring back that inthe child and just said it to the odd. And I got to show you how to apply pseudo elements and pseudo elements give us a little bit more flexibility as well we find within our pseudo classes, so it can be really specific here. So let's say I want take the paragraph and I want apply to all of the first letters of each paragraph and I want to make the fought size. So let's make it super Super Big 4 a.m. So this way we can apply some really nice styling, some cool styling to all the first letters and so on. So we've got a lot of different options here. We can apply it to the first line if we want to do that? Eso first line We can apply to the first Linus Well, making a really big pseudo classes. Pseudo elements really help us isolate out that content that's being presented with an original class. Eso wrenched HTML structure s Oh, there's a really good resource over here at Mozilla, where they give you a whole listing of all the different pseudo classes that are available . And as you can see, there is a whole ton of them. So we're just using that and child, but we do have a lot of different options. We saw the first child last child in so one. In the next lesson, we'll look at how to make your Web page responsive and how to make it resize, depending on what the screen sizes that's coming up in the next lesson. 15. 35 Media Queries making your website Responsive: within this lesson, we're gonna look at how we can make our website responsive. So I'm gonna open up our website that we've been working on in the last several lessons and I'm going to do and inspect on it. And within Google deaf tools, we actually have the option to be able to view this on different sized screens. So I can actually toggle the different devices that are available and change it into a responsive you and this view. I can resize the website and make it any size I want. So I've got my width there, got my height, I can do 100% and change. Change that as well. So look at 50% and so on. I can also see how it's gonna look like on iPhone six and some of these defaults I can see on an iPod. I can rotate the iPad and so on. So a lot of good options here and this is where we begin when we look at when we're designing our website, how it's gonna perform and how it's gonna look on different sized screens. So we know that we set a maximum pixel with so any size screen that gets larger than 11 or 11. 80. Think it was 11 80 that we said it, no matter what, our main content areas not gonna expand beyond that. And we will get smaller than that main content area is contracting. And we see that we do have some issues here. So whenever we get less than roughly about 800 we don't have that spacing because we had set both of those containers on a percentage and we don't have that spacing anymore. So that one, the sidemen, you actually drops down and it looks very ugly. So we need a way to fix this. So let's take a look at our code and make some updates in our CSS. So we know that we want to set some break points and in order set break points. What we use is we use Media Query s 02 different approaches. There's setting a max with, and then they're setting a min with eso. Setting a men with is a mobile first view way of designing on this way you set all of your default CSS styling properties and then whenever it hits the brake point, then you add in additional styling to accommodate for the different sides screens. But by default. And since we've already done all of this work, we're gonna work down. So whenever we resize it to a smaller size, then we're gonna add in that styling property. So let's take a look at how this is gonna work. And the thing is, you can set as many break points as you want eso what you initiated by media Onley screen and was set max with. So we did have an option between Max and Min with eso we're looking at roughly when we're re sizing that we hit a point here roughly around 8 50 maybe around 8 60 So let's say 8 70 Just to be sure that at this point, this is where we actually want something different toe happen for those particular elements that the main and the sidebar because they're just not re sizing properly. Eso just to give you a better idea, they usually the way that I usually like to do it is what I'm working from a desktop version to the mobile. I usually just copy these the ones that I've used, and the ones that I want an update on the smaller size screens and I make the adjustments here, so we have it at 60%. And the witness may be something that I want to take care of. And I want to bring it down to 50. The float we don't read to reset. And maybe I want to bring my patting down to zero and sidebar so I can set it up. 40 float. I don't need to set. I've already got that set up there. I don't want to set the border either, because this is something that I've already got set and patting down to zero. So we're only updating what we want to change. So now when I refresh it, So watch what happens now whenever I shrink down below that size, we're actually adjusting accordingly. So maybe better to illustrate this is maybe we can set that site bar background color temporarily so that we can really get a good feel that something is happening once we hit that break point. So refreshing it again. We see that whenever were larger than 80 to take a look at the response of size here, we're not We're not getting those properties out of them. But when we do get less than 8 80 than for the smaller screen sizes, we are getting these properties, and we can adjust this accordingly as well. So we can even taken a consideration that now we've set them to zero. So maybe we want to do even larger. So 40 eso, depending again, how we want to represent our content. So this might not be ideal, and we might want to set on additional break point. So whenever we get really low, So now we've got all of this white space hanging there so again doesn't look really that great that fantastic. So planning out our content and how we're developing their content, this is gonna be important. But taking a look at this break point, maybe it's better off to move this all the way down or underneath to make it really mobile compatible. Or maybe we wanna just remove it entirely. So let's set another break point at 700. And whenever we get less than 700 picks, let's just stack these two elements. So same thing, same format here where we do media, media screen and we're gonna set our max with 2 700 now we've got another break point. So this time, let's turn that one red, and we're going to give them 100% with and this time actually want to clear out that. So we have set the floats to the left and to the right s. So this time what I want to do is I want to clear both of those floats up eso that we're not floating at all eso We don't need to adjust the padding cause we already set it to zero Same here and here. I'm gonna set it to 100%. And now let's take a look at our page. See what happens when we re size at 6 98 were less than 700. So we see that we're able to resize. We can scroll down. We see that sat sections red, so it's fallen in nicely in line with the rest of our content and we continue to resize our menu. And at this point, if you divide a mobile menu, this is maybe we won't have a break point. You might want to stack your different menu items, navigation items s So this is all dependent on what your design style is. You might want to just maybe remove some of that padding. I shrink down. How those how those navigation menu items air being presented might simply want to stock them horizontally. So let's do that. Let's take a look and set another break point. So if our Web page gets less, if the user is coming in at less than 500 pics, update some of that navigation content so we don't have to worry about Maine and sidebar those already taken care of now on the different break points. So let's take a look at all of these items here, so we just need to take the list and the hyper the anchor text there within the list. So we've got lists type of nuns. We want to keep that border eyes fine, and we want to get rid of the float here, so let's just clear out both display block is fine. We might want to add something in there, but for now I think that that should be all that we need to worry about there. Of course, we do need to make it 100% with Let's go back into our editor added with 100%. And now when we go back out there now, we've got a full width available to us within our visual area. Here s so we've got all of our navigation items aligning. And we might even want to center that text whenever we get to that point. So we could do I believe we've got our text. Not sure if we just double checking here to see if we're aligning. Our texts were not aligning any of our text so we can add in text the line and maybe center align that text. Let's take a look at how that's turning out. And now that that central lining as we grow bigger, it goes back to its original desktop design size. And we can also set a minimum with as well so we can set a default with for the body or the rapper is another good reason why we include the rapper s O that ever we shrink down to 500 picks and we don't want her web page to go less than 500 pics so we could set a default of ah with of 506. So if we're less than 500 picks were always going to stay as a default of 500 picks. So a number of different options there how we can represent it s o. Maybe that might not be a best way to do it. It's now whatever we're shrinking down now we can drag it over so our minimum with their So let's update that right now, so just refreshing it. So this does when we set these responsive sizes. Sometimes chrome is keeping some off bigger sizes. So now it's re sizing much better, even at a minimum width of 500 picks. Eso all depending on how you're using your website on what your design is, you could set that minimum with three could set that full with as well. Eso also, if I bring this out of the the different type and I can resize it manually to get also, get a better idea of what's happening on our website. So you see that once we get less than 500 it still stays at that 500 makes a scroll s Oh, this is again something that's dependent on what size you want your screen to be. And if you want to be fully mobile already, then you might want to just remove that entirely and allow it to resize all the way down. So let's take a look at that page once again. Eso refreshing. It s so now it's just gonna completely continue to resize. So maybe that is a better option as well. So there does take some time to play around with it and really get the feel of how you want your website in your Web content to be presented. 16. 36 HTML CSS summary: in the last settle lessons. We've gone through all of the HTML properties here that different HTML elements and then how to apply styling using CSS. So we've used a lot of the commonly used CSS properties and applied it to our HTML in order to design a website out of it. Now, of course, depending on what your design is and what it requires, there's gonna be different combinations and different structure that you're going to set up within your HTML. And this is all from the design Web design, planning perspective where you come in and you design your HTML structure in order to better accommodate your CSS. Now there's always gonna be the case. Whenever you've completed your website, they're always gonna be doing some fine tuning and tweaking so you can use resources like what we had looked at earlier, something like Code pen, where we could simply copy and paste some of that code in there and really get to utilize it and get familiar with it within our website building process. Or you could just simply go through your editor and copy and paste and make some adjustments. Or you could even use the chrome interface in order to make adjustments to the way that your website looks and it gets presented so we could do something where we've got the chrome deaf tools and we can take a closer look at the different coding that's within it. And from there we can develop out and we can make some adjustments so we can see adjustment of the max width and salon and really get a fine tuned view and better speaking when we're able to see it within the display area and really find too, in the way that we want our website presented. So use all of the different tools and resources that we've presented within this course and utilize them to create your own version and different web stages and different structures. Note different styling properties and also try out different ways to structure your HTML and also utilize things like placeholder images, dummy text and so on. In order to really build out your website and get customized look and feel of your website when it comes to a website design, it is important to practice and to try out different things. An experiment to see how just to your source code affect the way that your contact gets displayed. So try it out, check out all the different source code and see what you can do with it and see what variations of the website that we've created you can make using the A tent that you've learned within the previous lessons.