Subtitles of the Movie

I know that we're here to talk about Photoshop and Web design, but a highly important aspect of Web design is HTML and CSS and nobody wants to talk about background code, right? It's scary. It's frustrating. It's mind bogglingly complex right? Wrong. It isn't. It's unbelievably straightforward and simple. It's the easiest thing in the world. Don't let it freak you out. Spend, you know, maybe a half hour, 45 minutes learning the fundamentals and that way, when you're building your layouts inside Photoshop you'll be able to think three or four steps ahead and know exactly how the code is going to react to what you're doing, right. So, I've got another website here for you - CSS Zen Garden. Go ahead and pop this guy open if you like. This website is completely awesome, and it's a great way to demonstrate what HTML is and what CSS is and how the two work together. So you can see here the tag line for the website is: A demonstration of what can be accomplished visually through CSS-based design. Select any stile sheet from the list to load it onto the page. So, what they're referring to, by the way, is this list of Styles here over on the right-hand side, which we'll get to in just a moment. But before we get to those guys I want to emphasize the word design. CSS-based design. CSS is all about making stuff look good. That's what CSS does. CSS stands for Cascading Style Sheets, and if you've worked with Styles from some of your other programs like perhaps a word processing application, or a Desktop publishing application, then you know what I'm talking about. It's the same idea here in Web design, right. So how it works is HTML you can think of as sort of the bare bones of your page, and I'll give you a quick example of some HTML in just a moment, but it really is just sort of static and flat and plain. There's no dress-up on it. CSS comes along and CSS controls all of your formatting, all of your visuals, the design of your page is really handled with CSS, right. What I'm going to do here, over on the right-hand side, is I'm going to try out some of these different Style Sheets. Now what a Style Sheet is, is simply a sheet or a list of styles, right. A list of formatting. So I'm going to try Under the Sea, for example. I click on that guy and bang. Now, you know what's really interesting here is it looks as if we've gone to a different website, right? Well, we haven't. We're still on the css Zen Garden website, but the formatting, the presentation, of the website has changed. A new list of Styles is now controlling the overall layout. So from the selected design column here I'll choose a different one, maybe Make Ôem Proud and then it changes again, right? But I still have the same plain text content. In the background code I still have the same rigid html structure as well. I would highly recommend that you spend a little bit of time on this website getting used to what's possible with CSS. So, CSS is not only going to format your text, it's going to control things like your graphics and your backgrounds and pretty much anything that you can drop onto a Web page.