HTML and CSS

It's hard to find two technologies that are as closely intertwined as HTML and CSS. Indeed it's almost impossible to teach one with out 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 want to take a brief look at styling. So 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 unstyled page. Meaning the author styles, the styles that I wrote, are not being applied to it. Now, I want to point out something here because I've heard a lot of people refer to a page that looks like this as being unstyled.

to a page that looks like this as being unstyled. 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 heading should look like this, description list should look this, emphasized text should look like this. And because of that, we see consistency across multiple browsers when you see the, quote unquote, unstyled page. But really what you're seeing there is the browsers default styling. When we write CSS we're actually over writing the default styling with the styles that we want.

the styles that we want. And as authors that's exactly what our role is. So if I go up to View > 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 going to win any design awards? Nope. But it's kind of 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 unstyled 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 go the page opened here in my code editor and you can see it's fairly simple. We have a heading one, we have a couple paragraphs, and down towards the bottom we have a heading two 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 want to 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 I'm going to say 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 element that you want, and in which properties that you can set. Now CSS is amazingly flexible. To show you how flexible it is, I'm going to pull 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 left angle brackets with an exclamation point, and a dash, dash. And then all the way at the end of them, you'll have another dash dash and a right angle bracket. 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 coworkers, or in this case, to hide things that I want hidden. So what I'm going to 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 want to 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. It's fine. I know I'm doing this kind of quick. So, again, I'm commenting this out by doing exclamation point, dash, dash. And then at the end, a closing tag, dash, dash, and then right angled bracket. 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 have made a significant change to the page. But to other devices like Google and search engines, screen 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 all 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.