Exploring CSS

- Cascading Style Sheets, or CSS, is used to control the visual presentation of web pages. I wanna explore some of the basics around its syntax and give you an example of how it works. I have the hello.htm file opened up from the 01_02 folder, although to be honest with you, it's exactly what we had in the last exercise, so if you still have that open and you just wanna work with that, there's nothing wrong with that either. Just a brief reminder of what's going on within the HTML of our file. We have an opening and a closing HTML tag that signifies the start and the end of an HTML document.

We have the head of a document, and remember, this where all the stuff goes that makes the page work, but it's not visual, you don't actually see it. In this case we have a title, and that's really all we have here, and then we have the body of the page. This is what you'll actually see in the browser. Here, of course, we only have a heading, one, an "h1," and we have a paragraph. So that's really all we have going on. If I look at that inner browser, I can see that we have the heading up top and then the text underneath that. So CSS controls styling, of course, and I'm going to embed this CSS directly inside the HTML document.

This is just one of the ways that we can use CSS. A more common way to use it is to actually create it in its own CSS file and then link to it from an HTML file. But just in the interest of being efficient and being quick, I wanna show you how to do it within the HTML document itself. It's one of those things that helps make the page work, but that isn't actually visual, so that's gonna go in the head of the document. What I'm gonna do is, right after the title, I'm gonna open a style tag, and then I'm going to close a style tag. You can see that's just HTML, it's just like everything else that we've written so far, but the style tag tells the browser, "Okay, inside of this, I'm gonna write CSS." So it gives you that little space inside the HTML document that allows us to write styles.

If I wanted to link to an external document, I'd be using a link tag to bring in that external resource. In this case, since we're dong it within the document-- and this is known as an embedded style-- we're gonna use the style tag to do that. I'm gonna give myself a little bit of room here, and now, the syntax that we're gonna be using is CSS. We don't need inside the opening and the closing style tag, we don't write HTML anymore, now we write CSS. CSS is not a markup language, it's a presentation language. So, its syntax is a little different.

It's essentially really, really easy. The only thing it is is a selector which targets an element on the page, and then rules that say, "I want it to look like this." Let's say we type in "body." Now, this is a selector, so the text body is a selector, and what's it gonna style? Everything inside this body tag. After the selector, I'm gonna open up a curly bracket, and you can find these little curly braces just to the right of the "P" key on your keyboard. I can do it all in one line, but I've typed it this way for so long.

I'm gonna go down to the next line and I'm gonna type in a closing curly brace. And you can see, that's the opening one, it's facing towards the left, and this one is the closing one, it's facing towards the right. Basically, when you have a selector here, inside these curly braces is what we call the declaration block. That means, "Style this element, "and here's what I want you to style." And of course, we don't have any properties in there yet, so inside that blank line in-between that, I'm gonna type in the word "color", type in a colon, and then I'm gonna type in the value "red" and then a semi-colon.

So this is a property, and this is a value. They are separated by a colon, and once you're done with one property-value combination, you use a semi-colon to move to the next one. So I'm gonna save that, and then if I go back into my browser and refresh the page, you can see that all the text is now red because everything inside the body is going to be red. Of course, I can be a lot more specific if I want to. I'm gonna go down to the next line and type in "h1." You can see the target and HTML element, you don't need to enclose it in tags, you just tell it which element you wanna style.

It's really, really simple. I'm gonna do the same thing that I did before, which is give myself a little bit of empty space here and have the opening and closing curly braces. The reason that I like to build those first is because I always, if I don't, I always forget to type in the closing one, so that's something that I like to do. Now, we're gonna get a little bit more adventurous here, we're gonna go beyond just color. I'm gonna type in "font-family" and then a colon, and then I'm gonna type in the word "Arial," I'm asking for the font Arial, comma, "sans-serif" and then a semi-colon.

What's happening here is I'm saying, "Hey, the font family, "the font that you're displaying this text in, "I want you to change it to Arial for me." The reason that I have two declarations here, and they're separated by a comma, I'm saying, "If Arial's not available, give me whatever your default sans-serif font would be." Then I'm gonna get into the next line, I'm gonna type in "font-size:" and then let's make this a 32 pixels. So "32px," you'll notice the "px" is coming right after the 32, there's no space between 'em, and then I'm typing in a semi-colon, and then let's go ahead and change the color of our heading, too.

I'll say "color," in this case I'm gonna say "black." There are other ways to define color, but the key words are probably one of the easiest things to learn if you're just gonna use some basic colors. I'm gonna save that, I'll go back into my browser and refresh that. Notice that the heading now changes its styling independent of the paragraph text. It's black, it's Arial, it's 32 pixels, it's exactly what I asked it for. The paragraph remains unchanged, of course, because I only targeted the "h1" element. Now, much like the HTML language, there's a whole lot more CSS to learn.

These are just the basic concepts of what CSS is doing on a page, but once you understand those basics that we just covered, it's really easy to get started learning the rest of it. The syntax is really simple, as you can see. It doesn't get any more complex than this, and for the most part, it's just a matter of learning how to write which selector you need to target specific elements on the page, and then which properties and values that you need to use in order to give you the stying that you need.