Basic HTML Part 2
Resources
Video Script
So we talked briefly about CSS or Cascading Style Sheets before when we introduced html 4.0. But we haven’t actually added anything to our webpage yet. So far, our webpage is completely static and unstyled. So Cascading Style Sheets will allow you to modify things like font colors, background colors, styles, as far as like font types, spacing, layouts, pretty much anything that deals with style or looks, the cascading style sheet or the CSS sheet will be able to accommodate that. So how do we actually add any CSS to our web page? Well, we could actually add it directly into the specific tag that we want by adding a style attribute, just like what we did with h ref, but style instead. But this can be very cumbersome, especially as your website grows and becomes very large.
Typically, what you’ll see is a separate CSS file that is managed across the entire website. So let’s look at trying to add one of those. So here is our base web page here, I’m going to go ahead and add in my link to my CSS. So the link tag, what that’s going to do is essentially importing content from another file. This goes inside of your page header. So right underneath title, what we need to do is add our link tag, and this is self closing, by the way, so we can add the slash there. But the attributes that we want to add here is indicating that this is a style sheet. And the style sheet that we want to load is indicated by the href tag, this is going to be called fancy dot CSS. And I’m just going to continue this on another line so everyone can see here. But we have href. And then finally, what we have for the last tag is the type the content in this file. My link tag has three attributes: rel - so this is going to say what type of link this is or what this link is. So it’s a stylesheet, the href. So this is the file that’s going to be actually loaded, and then the type or what content is in that particular file. So if we save that out, nothing’s actually going to happen because we haven’t actually created fancy dot CSS yet. So if we create our CSS file here, I am going to name this out as fancy dot CSS, save it as all types here. But let’s go ahead and save that out. And then if we refresh our webpage over here, you see nothing is actually happening.
So let’s go ahead and create some basic CSS here to color our webpage a little bit. There’s three types of rules that you’ll encounter with CSS. There are tag level rules and class level rules and identifier level rules. So the first one tag level rules will apply to all tags of that type in the web page. So for example, if I wanted to change the paragraph tag, and then I wanted to change the color of that tag to be, let’s say, purple, and refresh my webpage, you can actually see that my text here is now purple. Or we can change this to pretty much any color RGB works here. The hash colors also work here as well, as well as some of the text base colors. a really easy way to get a color that you want is if you look up a color picker, like on w three schools here, you can pick the specific color that you want. So for example, if I had this light purple here, you can see what it looks like down here and you can copy the hash code Hear. So if we, if we copy the color code over the RGB will also work. But I typically go for the pound sign style here makes it a little bit easier to do. This is hex base number. So the first two are for red, the second two are for green, and the last two are for blue RGB. So if I save that out, go back to my homepage here and refresh. Now you can see that it’s that different color purple.
Now, there are some issues with CSS, especially when you’re modifying it very frequently. Sometimes your change is not reflected, because your web browser will actually cache the CSS file, so your webpage loads quicker the next time around, if you’ve made the change in your CSS file, but the change has not been reflected on your website, just do a simple history clear for this particular web page. And that should fix it up really quickly. Let’s go ahead and change some other things with our text. Let’s look at a class level roll first. So a class level rule is going to apply to all classes of the same name. Now classes can be added as an attribute to any HTML tag. So for example, I’m going to make a class called bold. Or let’s say let’s say important. And so this class, I’m going to add to the let’s say that item item one and my order list and item two in my unordered list. So once we have that added there, I can switch back to my fancy CSS and add this class level rule here. Now, the class level rule is going to be indicated by a.so dot and then the name of the class. So let’s go ahead and change this, I’m going to add to font weight here. And I’m going to make that bolder. So if I refresh my web page here, you can see now that item one here and item two, the items that had the class important added to it are now bold, it makes things kind of nice to actually do, if I wanted any content of any tag bolded, all I have to do is simply add this class here, and that CSS is copied around to make things a lot easier to work with. So we don’t actually have to make duplicates of that bolded style, we can just add it as the class and everything that has that class gets that bolded style.
So the last thing that I want to cover with a CSS level rules is the ID level rules. So are the identifier level rules. So any HTML tag, I’m going to pick on item three here. This is going to be thing, thing three. So any tag can have an ID attribute while you can technically duplicate this across multiple tags, it is very poor style. The idea behind the ID attribute is that the idea itself is unique in a given web page. So make sure you never actually duplicate an ID and any other tag. So if we have an ID here, so thing three, I can do pound. And then you don’t want to do iD iD is the name of the attribute, but we’re going to do the ID itself. So this was thing three, and then we have curly bracket there. And let’s go ahead and change the, let’s say font, size, and I’m going to make this 16 pixels. And then let’s go ahead and also do font style. I’m going to make it metallic. Let’s refresh our webpage here. And now you see that this item here as a font size of 16 pixels and metallic. Now if we increase that, hey, you can see the font size change as I kind of ramp things up right So, pixels is a decent measure of size when you’re dealing with HTML. But there are other things like to em, a sizing mechanism will actually help you become more uniform across the screen resolutions. Because pixels are not nearly as relevant before, when we’re developing with web pages, especially in the 90s. And even the early 2000s, everyone had the same screen resolution. But now that we have a lot of screens that are 4k, or 1080 P, and in varying sizes in between pixels become less relevant, because everyone has a different number of them, so it doesn’t scale the same.
So a lot of times we’re getting own, we’re developing things like this, especially with font sizes, or widths and heights, pixels are not always the best way to measure. But let’s take a look at this w three schools website here. Now, when you are working on your HTML project, I’m not going to actually teach you every tag, there’s a lot of them out there. And we can spend an entire course covering just HTML. But since we’ve covered how to add basic HTML tags, along with their attributes to your web page, as well as some of the basic CSS rules, you should be able to make your way through this website fairly easily. So for example, let’s say I wanted to add an image to my webpage, well click HTML here, find images. And voila, here is how to add an image to your web page. So there are lots and lots and lots of different tags and lots of CSS rules out there. And like I said, we can spend and an entire class just covering HTML, CSS, but we don’t have time for that for this particular course. But for your project, looking up a specific tag here should be quick enough to actually add this content to your webpage. So I will be asking you to add some tags to your webpage that we have not yet covered, but are easily looked up here as part of the W three schools website. Likewise, same thing goes with CSS, if you’re trying to do any particular thing, and CSS, like for example, colors, we’ve already talked about that a little bit, but backgrounds as well. So background color, color actually changes the font color, not the background color, so just a small difference there. But this is what you’ll be using as part of your projects. So if you need something to look up, I would just find it here nifty the HTML tab or the CSS tab. But if you can’t find what you’re looking for, please feel free to reach out to us and we’ll help you find either the syntax or how to get that out into your webpage.