Learn what CSS is required on every responsive page.
- [Narrator] Even before we add any CSS to a webpage, the page already has styles applied to it. This is a page with only HTML and no CSS. Every browser provides basic styles, for example making a h1 header large and bold, and making links underlined. For the most part, we can start with the default styles and change them as we create a design. But they're a couple things we need to have in our CSS to make our page work properly. First we have box sizing. To understand this, you need to know what the box model is.
This is an important part of CSS. For every element you have on the page, there are a few other things around it. You can add space around the element, either padding or margin. Padding is inside the border if you have one, and margin is outside the border. The tricky part happens when you have an element like a div that's a particular width. By default, the padding, border and margin are added on outside the div. This is not the behavior we actually want most of the time, because it can get really confusing to trying to make everything the width that you want it. Instead we're going to set the box-sizing property in CSS, which will apply to the whole document.
The default of box sizing is content-box. But if we change it to border-box, the behavior of the element and it's padding, border, and margin will change. So I'm going to go into the CSS, and for every page I'm going to have the HTML element have box-sizing as one of the properties. So it's box-sizing, and then border-box is the value. Once we set everything to border-box, if we have the 800 pixel wide div, and we add padding, border, and margin, all of those things are added inside the width.
So the width of the whole thing is still 800 pixels. There's one more thing that we need to do for box sizing. Sometimes you have an embedded component on the page that you need to behave in a content box way. We're going to add some code so that if you change the box-sizing for a particular element, everything inside of that element will inherit the box-sizing of that element. So I'm going to do *,*:before, *:after. And then the CSS for this is box-sizing, and inherit is the value.
The other thing we always need in our CSS. Is max-width for images. This is important for making a page responsive. By default, an image displays on a webpage at it's actual size. Sometimes this is okay, but often it's not. If you have responsive site, that wide image that looks great on your desktop screen will be too wide for phone size screen, and you'll have to scroll sideways to see it. So you can see when I change the viewport width, it just cuts off, and you'll have to scroll sideways.
The way to prevent this is to add some code to your CSS. So this page, if you look on line 10, it's simply h1 and an image. In the styles I'm going to add img for image, and the property for that is max-width: 100%. And then I'm gonna save. By setting the max-width on an element, you're telling it to never be wider than it's containing element.
So that might be the page or it might be another element that it's inside. So now if I come back here and refresh, you can see that the image is always gonna fit within the width of the page and never be wider than the size of the viewport. You can always set specific width's for images as you go along, or even remove the max-width, but this is your backup for all the images on the page to make sure the images aren't wider than will fit.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox