HTML and CSS

- [Instructor] It's hard to find two technologies that as closely intertwined as HTML and CSS. Indeed, it's almost impossible to teach one without at least mentioning the other. It's actually quite common for new web designers to learn both HTML and CSS at the same time. So in this chapter, I wanna take a brief look at styling so that you can see how these two technologies work together and gain an understanding of where HTML's capabilities end and where CSS is going to take over.

And to do that, I have the styles.htm from the 07_01 opened up in a browser and you might notice that this time I have it opened up in Firefox instead of Chrome. Now, the reason I'm doing that is because Firefox has this nifty little capability that allows me to toggle the styles of the page on and off. So right now, what we're seeing is this quote unquote un-styled page, meaning the author-styles, the styles that I wrote, are not being applied to it. Now I wanna point out something here because I've heard a lot of people refer to a page that looks like this as being un-styled when in fact we are seeing it styled, we're just seeing it styled with the default styles of the browser.

Most browsers agree on default styling like headings should look like this. Description lists should look like this. Emphasized text should look like this. And because of that, we see consistency across multiple browsers when you see the quote unquote un-styled page. But really, what you're seeing there is the browser's default styling. When we write CSS, we're actually overriding the default styling with the styles that we want. And as authors, that's exactly what our role is. So, if I go up to View, and I choose Page Style, Basic Page Style, I can see that these are the styles that I wrote for the content on the page.

Now, is it visually striking? Is this gonna win any design awards? Nope. But it's kinda neat. The "Allow me to demonstrate" is now frozen in place while I scroll the rest of the page. And I've modified the typography so that our text is now in one long column of text. And I've chosen the fonts I want. The size I want. That sort of thing. Again going back to the un-styled view, if you will, you can see it's just basic HTML. Now let's go take a look at the structure of the page. So I've got the page open here in my code editor and you can see, it's fairly simple.

We have a heading 1. We have a couple of paragraphs. And down towards the bottom, we have an heading 2 down there. So what is it that's allowing me to have so much visual control over these elements? Well, if I scroll up into the head of the document, I can see in the head of the document, I have a style tag. Now the style tag, it's an HTML tag that basically tells the browser I wanna write some styles. So everything inside the style tag is CSS. CSS stands for cascading style sheets. And the styles that you're seeing here, the syntax of them, it's a presentational syntax so it's a little different than HTML, which is a markup language.

Essentially, CSS pages are made up of rules. And the rules have selectors, so here you can see we have a selector that's targeting the body element. And after that selector, we have a series of properties and values. And these properties are set inside these curly braces. So here we can see we have a value for margin, for the width of it, and for the font that we want used. So really the syntax is fairly easy to pick up. It's just a matter of learning how to write the proper selector to target the element that you want, and then which properties that you can set.

Now, CSS is amazingly flexible. To show you how flexible it is, I'm gonna put a little switcheroo here. If I scroll down, I can see that I have another style tag in this page. Now this is commented out. We haven't really talked a lot about HTML comments but they're very handy. HTML comments are these little < with an ! + -- and then all the way at the end of them, you'll have another -- and a >. That comments out anything that's inside of it. So essentially, you're telling the browser ignore this.

You can use comments to pass messages to your future self or other co-workers, or in this case, to hide things that I want hidden. So what I'm gonna do is un-comment out the second style element, and then I'm going to comment out the top one. So essentially, I'm turning the top one off and turning the bottom one on. Now if you wanna do this with me, you certainly can. But this is really just a demonstration so don't feel bad if you're not doing this along with me. That's fine. I know I'm doing this kinda quick. So again, I'm commenting this out by doing ! + -- and then the end closing tag -- and then >.

So now we have a totally new set of styles. If I save this, go back into my browser, and enable page styling again, now if I refresh the page, you can see that I get a totally different visual representation. And in this case, a very striking visual demonstration that shows you just how powerful CSS is. In this case, it allows me to hide content that I don't want and to really accent content that I do want. Now the most important thing to realize here is that to you and me and people that can see this browser, we've made a significant change to the page.

But to other devices, like Google and search engines, screens readers, search robots, things like that, the page has not changed at all and that content is read exactly the same way. So unless you work in an environment where your styles are all locked down and all you do is edit the page's HTML, I would stress that learning CSS is an equally critical part of learning web design.