Build Your First: HTML & CSS

Loading the player…


Setting up base styles for HTML elements:

Now we’re going to get into our hands on exercises. And we’re going to start by setting up base.css. Let’s open the start folder. And then assets > css. And then open base.css. We’re going to work under these two comments. And first of all, we’re going to set up our base rules. Our first selector is the html element and the body element. We’re setting the color to #777, which is a deep gray, and the background to #fff, which is white. Next up, we’ll style a body element on its own. So we’re giving the body some margin of 0, padding 0, font size of 1em, font family helvetica, arial, sans-serif, and a line height of 1.3. Next up, let’s style our headings. Margin 0 for our headings. Color, #424242, which is a softer gray. And then line height 1.1. Next up, we’re going to start the image element. We’re setting the max-width to 100%, which means that we have a fluid image now. They can go smaller than 100% if the layout dictates, but they’ll never go wider than their natural size. The height is set to auto so we don’t get them squashing. Border is set to 0 so we don’t get blue borders around them in certain cases, in older versions of Internet Explorer. And the vertical-align is set to middle so it will sit in the middle of lines, and you won’t get these weird gaps below them sometimes. We’re not going to style the image element but when it’s inside an a. So we’re going to work on the focus hover and active states. So, we have a:focus, img. So, this is any image sitting side an a on its in focus state, has a background of 0. A:hover image, so, any image sitting inside an a element that’s in hover state. And then image inside an element, a element with an active state. And then next up we’re going to start our blockquote. Now, blockquotes often have a margin on the left side, so this will just make sure the margin’s a 0 all the way around.

Setting up base styles for different viewports:

Now let’s move down to our wide rules. We’re going to write our first media query now. And what we want to do is to increase the bite, base font size, which is applied to the body element, but only when it gets wider than a certain point. So, we’d write it as. And what we need to do is to set our body element. Now we’re setting it to 1.125em. And the actual maths for that are. Now we can set our default font size to 16px andwe can change it down here to 18px. But the problem with that is that if they’re not relative units, they’re pixels and I much prefer to use em units of measure. So in this case we’re doing the equivalent of changing 16 to 18 by increasing it to 1.125 em. And that’s it for our base styles.