Subtitles of the Movie

Let's now turn our attention to the most common way that you'll apply a style sheet and that is as an external file linked to your web pages. Supposed you'd like to be able to use one group of styles but you want to use them on many pages all at the same time. You'll do this through the use of external style sheets that are then linked to each of your pages. Linking external style sheets to your web pages offers three important benefits to you as a web designer.; First they centralize your CSS rules which means you can make a change in one file and then it will affect the entire website, therefore site maintenance is much simpler. With an external style sheet an author could change the look of an entire site by simply changing one file, that centralized CSS external style sheet. Second, an external style sheet reduces the amount of web page code which makes it easier for spiders and other search engine tools to dissect the code and get at the content, thereby making your pages easier to index and more likely to occur in the top spots in the search engines. Third, most web browsers cache this external style file. This will speed up the loading and rendering of all of the pages of your website. As I covered previously, an Inline style is embedded in an HTML tag like my example at the top of this page. An Inline style is typically used when the CSS rule being applied is unique to that HTML tag. In this case I'm applying the style to an image. There's an img src tag that's bringing in the image and then I'm styling this to float:left with the margin of zero. Zero on the top and then 10 pixels on the left. Zero on the bottom and the right. An Embedded style - I have an example of that down below here - this style is a block of code that is added to the head section of the HTML script. An Embedded style is used when the CSS rules are unique to that page. Embedded styles should always be contained in the head section of the script. Now in contrast, an External style sheet is a separate file filled with the CSS rules. This will be referenced from each HTML script that uses it. Usually this would be every page in the website. This external file can be located in the same directory as your HTML files, or it can be placed in another directory. You'll use the link tag inside the head section of your HTML document then to link to this CSS file including the very important .css file extension, this file here, is the sample style.css file in your Work Files folder. Here's an example of the code for linking a style sheet to this particular document where I would paste this code. There's the link tag, stylesheet is the relative attribute; href, this is the link to that external file, in this case it's going to be on my domainname in the css folder and the style sheet is called style.css. Type, here, is very important, equals text /css. Here is the general form of that code. The rel equals stylesheet attribute just says to look for a style sheet, that's this part right here. The href attribute is where you place the URL of the style sheet. You can fully specify an absolute path to the external style sheet file as I've shown you up here in this example, or you can make use of a relative path, as I've shown here in this example. This would just be, for example if this file was saved to my Work Files folder I could just type style, styles plural, .css, telling the HTML file to look in the same folder where the file resides and to look for a file labeled styles.css. the optional type attribute is used to specify a media type: text /css for a Cascading Style Sheet. This allows browsers to ignore style sheet types that they do not support. Here at the end, the name attribute allows you to give the style sheet a name if you wish. Now the external style sheet files themselves should never contain HTML tags like head or style. The style sheet like I have here in this example should consist merely of style rules or statements. Other than the use of the css file extension there's really nothing special about the format of this external style file. You define and list your CSS rules in the same way that I've shown you previously. The key is just to link this style sheet using the LINK tag to every page that you want to use the style sheet on. If you don't some of your pages will not look correct and that'll mess up what you really wanted to accomplish with your external style sheet in the first place and that is to make all of your pages on your website look consistent. You can use as many style sheets as you need, but it makes more sense to call as few style sheets as really are needed, perhaps one or two for a typical web page. I recommend consolidating your rules based upon how they are used. Normally you would have a central external style sheet. If you have a number of pages that use different sets of CSS rules you could reference additional style sheets, import a style sheet on a page by page basis or use inline or embedded styles. Whichever solution you do use remember to watch out for the cascading effects regarding which rules take priority over other rules. Here are some guidelines for predicting which rules will take priority. Inline style rules will take priority over an embedded block style rule or an external style rule. An embedded block style has priority over an external style rule; also, within an external style sheet the last occurrence of a rule overrides previous occurrences and generally speaking the closer the rule definition gets to the specific HTML tag affected the higher the priority. That'll conclude this section of the tutorial on managing and working with multiple styles. In this section you've learned how multiple styles cascade. You've learned about the cascade and inheritance rules that are applied to these styles so you can predict which styles will overrule other styles. I've given you some cascade and inheritance tips for predicting these rules. You've learned how to Inline your styles, Embed your styles, Import style sheets and also this last movie covered how to Link your style sheets to multiple HTML documents.