In this video, you'll get an introduction to CSS. CSS stands for cascading stylesheets and is how we style things within our webpages. It's used to control the visual look of the webpage, including the layout.
Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.
Video Transcription
CSS stands for Cascading Style Sheets and it's how we style things within our web pages. It's how we create the page layout, adjust spacing, and do text styling like font and size. We also change the layout across different screen sizes. CSS basically controls the visual look of the web page; HTML formats the content. In this video, I'd like to explain some basics to get you started with CSS.
I'm going to put the CSS directly in this page by using a style tag. Inside the style tag, I'm going to use CSS. CSS follows a bit of a different syntax than HTML. In the style tag, we're not creating elements, but referring to them. We're going to say how those should look by referring to our HTML markup.
For example, I want to refer to all of my paragraphs, so I'm going to simply say `p`. I'm going to put curly braces which will hold all of the properties that I want to assign to a paragraph. I can set something like for example font size. We're just going to keep it simple today and just talk about pixels.
If I specify the font size to 16 pixels, nothing will change in the page. If I want to go bigger, let's say to 26 pixels, I'll save and refresh and the paragraphs will be much bigger. If I go down to six pixels, that would be so small you're barely going to be able to read it. Let's go back to 16 and if you just want to go a little bit smaller, let's say you want to go down to 14.
Let's say I want to bump up just a little bit, I'll go up to 18 so that way my paragraphs are just a little bit bigger than they started out being. Now when you adjust your font size, maybe you also want to adjust the space between the lines because the line spacing is kind of tight by default. So we can specify that in line height. If you're a print designer or traditional graphic designer, that might be used to leading. Leading was from the days of metal typography when they were putting strips of lead between lines. We don't have strips of lead in our lines on the web, so it is just the height of lines, so we call it line height instead of leading. And so let's say I make this 30 pixels, so it's a lot of line heights then there's a lot more space between those and I could make it even more, 40 pixels, just so you can really see that. So really spacing out those lines, I could also make it much tighter, 20 pixels. So the lines are really close together - in fact, you can make them so close that they'll start to cover over each other which would not look good in that case. So let's say we want to do something like 26 pixels.
So it's a little bit more than the usual if you do not specify a property then it will go with whatever the default is. If you specify a property then it overrides the browser's default. So browsers have basically like a built-in style sheet that your styles override, they call it the user agent style sheet. And users in the browser can actually go in and change some of these defaults as well, like the default font size of 16 - that's just the browser default assuming users haven't changed that. But they could actually change that. So the text is black by default on a white background and Times Roman is the default font. If you don't like those defaults, you specify your own settings and those override those defaults.
If you don't specify any CSS then you go with whatever the browser default is. So everything is going to have a style, it's just a matter of do you want to override those defaults and changes. Let's go on and style some other things. Let's say the heading 1 for example. Now the order of rules here, because I'm styling different things, I'm going to style a heading 1 and a paragraph. In this case, the order of these do not matter. I could have the paragraph rule up top or I could have it down below. It does not matter because these rules don't conflict with one another - I'm not trying to target the same element with the different rules. So in this case, order does not matter. I will order them in a way that I think is easy for me to find. I think a heading comes before paragraphs typically, so I would put a heading 1 style before it just so that it makes it easier for me to find the code, but the order of these rules would not matter.
That's in here and again I can set the font size to let's make it really big, like 50 pixels. And so that makes that even bigger. Now let's say I want to set something like a color to make the headings stand out different from the rest. So let's say I want to go to Google and type in color picker. So you've got a color picker built right into Google. Now of course, any good design app is going to have a color picker as well. So if you're using something like Adobe XD, Sketch, Photoshop, any sort of design app, they're going to have a color picker. And what you want is a color picker that has a hex code - so these hexadecimal values, this is the code equivalent of this color. So as I choose different colors here, we will see this hex code actually changes. And we'll see those change.
Just in case you're kind of curious, what's kind of interesting about this is you don't have to understand this. Let's use it first and then I'll come back and I'll explain a little bit more. But let's just use it. Let's just copy this color and let's use it here. So let's say I want to do that on the main heading. I'll say color and you do have to have the hashtag here.
This is going to be either three or six characters long and most of them are six but some can be shortened up to three. Let's mix up another color. We go to green and copy that color, then we go to the heading 2s and do that color. There we have that color which is really hard to read, so let's go to like a blue or something and make it nicer to read. We can copy that, paste it back over our heading 2 color, and refresh.
In case you're curious about how hex codes work, you don't need to know. You just use a color picker to mix up a color. Hex codes are in base 16, not base 10. 0 to 255 is 256 total colors because 0 is one of those. 0,0,0 is no light, so everything is black. If you go to the brightest white, you have a value from 0 to 255 for red, green, and blue. FFF is 16 times 16 which gets you to 256. Hex codes are in two character pairs; the first two are the red value, the second two are the green value, and the third two are the blue value. If all of them are equal amounts, you get a shade of gray. If one of them is different, that color becomes more pronounced and you're not a shade of gray anymore.
Let's say I see three three three three and I want to change that just a little bit. If I go to four four four four four four, that's going to get a little bit lighter. So if I keep them all the same, that's a shade of gray. I can go higher up and if I go to 8888, I'm gonna get even brighter. The higher the number, the closer I'm getting to white because I'm adding more light, so it's getting brighter. That can potentially be useful. I can copy and paste from my color picker too.
Now I've done some font, font size, line height, and color. What else can I do? Let's say I want to change the font family. The default font family is Times Roman, and let's say I want to change that to Arial. I can go into a particular style and say font family. I can't be sure what fonts everyone has on their device, so there are ways I can deliver a custom font. I'm not going to get into that in this exercise, so I'm just going to go with default system fonts. I can also make this a list, so if they don't have Arial, what else might they have? They probably have Helvetica, but what if they don't have either of those?
It would be nice to choose some sort of generic system font or category of font, like sans serif. If they don't have that, they should have some sort of sans serif on their computer. I'll hit refresh and that was done in paragraphs. Now, I want to do different fonts - I just go into one of these rules, let's say I want Verdana. If they don't have Verdana, I'll just say some sort of sans serif. Now watch this heading closely - when I hit refresh, it does look a little different than the other ones. So I can do different fonts across different elements.
So this is just a quick look at some of the basics of CSS. There's a lot more to learn but this was just a quick little introduction for you.