Subtitles of the Movie

Before concluding this section of the tutorial on CSS, let me give you some tips for creating and applying styles including reviewing the two ways you can get started in creating websites using CSS-based layouts. Now, you can either build your CSS web pages from scratch or you can modify one of the many templates that you can find for free or for fees on the web and then modify their associated style sheets that go along with those templates. If you go the template route, you'll be able to get up to speed more quickly. You can also work with more of the sophisticated and complex page layouts that I described previously. Another advantage to using the CSS-based template is that many have been fireproofed against differences between browsers, particularly with Internet Explorer. On the downside, one big disadvantage of templates is that even basic ones can be complex and hard to learn and modify. As a beginner, this will be even harder for you to modify styles and template setups that someone else has set up so as a beginner just learning HTML and CSS, you may have to resign yourself, if you do use one of these templates, to pretty much using it as it is without making many changes. Coding your layouts from scratch, on the other hand, give you much more freedom and creative possibilities but you'll want to start with easier fixed layouts and keep your formatting simpler. You'll also lose the advantage of the fireproofed templates that work with all browsers so you'll need to check your work against many different browsers to see if there's any differences. Particularly you'll want to check your work in Internet Explorer. It's easier to start working with CSS-based layouts if you use a template so let me demonstrate this method first and then move on to styling your pages from scratch. Here I have a free template that I found by Googling free HTML templates. Notice that it has placeholder content, which includes the text content, the menu items, even some of the images you probably will want to replace. You also have an accompanying style sheet that is responsible for the various styling that you see on the page. You're going to spend most of your time replacing the content and then modifying the styling. You'll probably also spend quite a bit of time studying this style sheet to understand how it's impacting the content that you've replaced in the template so study the existing CSS rules and then start modifying them to meet your own needs. You can see that these templates, even simple ones, can be quite involved and they're going to be a little bit complicated at first, particularly because you did not create them and it's always harder to decipher work that you didn't create. So I recommend try to find templates that are better documented and start with those. This particular style sheet notice has no documentation, no commenting here to tell you what everything is. Oftentimes the template content itself will describe how this is set up and how it works but not always so probably want to go with a template that has documentation to help you get started in interpreting the styles and the rules that make up the page designs. Now let's move on to building your CSS page designs and layouts from scratch. Try to get as many style rules defined as you can before applying them as this saves time later on. Start with your Div containers as I've done here. This will get your page layouts defined. Don't forget the finer design details such as padding, borders, margins, background images and so on. Then move on to redefining existing tags starting with the body tag. Then move on to the redefining of existing tags starting with the body tag, then the paragraph tag and the h1 through h6 tags. Notice you can do all of that before actually adding content to your pages. You'll want to plan this out on paper perhaps or create some designs in a graphic editor like Photoshop and go ahead and redefine the existing tags. For example, the body tag will help you set on a style, a text style for the majority of the text on your website. Once you can get all this defined, you can start adding content and then start defining classes for body text with variations for text style such as body bold, body italic, body green, body underline and so on. Special heading styles for headers are then defined. These are headers that will not work with your generic h1 through h6 tags. Next, format your links including your link colors. Colors for the a link, a visited, a hover states. You may also want to set up classes for special links, maybe in a different color in certain parts of a web page. If you open up this three-col underscore left nav.css external style sheet, you can see many of the strategies I've included her put into practice. I went ahead and defined quite a number of ids. These are the selectors with the pound signs in front of the names, such as nav bar, left column, mid column, content five and so on. Then I define, I redefined html tags such as the body tag. Here I have the body tag and then I have another class here underneath that for specific types of body text that will be styled with this class here, Arial 14 point. Then I have my links there, then my h1, h2 tags, I've redefined those here. Notice also I have included a lot of style rules here so I don't have to go back and recreate any. They all should be here within this one document. So you can go ahead and study this three-col left nav CSS file to see how I've set up my various styles. I've added some remarking here for story styles, feature styles, global styles and so on. And finally, let me give you some tips for applying all of these styles once you've created them. First, start with clean formatting. Don't use any word processors or any other kinds of web pages that have pre-existing formats. Don't overlap your styles using span tags. If you do get overlapping styles that confuse you, for example you're applying a style to make text red and it's not going red, it's staying blue, then delete the content that's giving you problems and just start over. And then the last tip is to preview your style definitions and your style results in multiple browsers frequently.