Subtitles of the Movie

The final module in this chapter deals with CSS or cascading style sheets. In order to understand what cascading style sheets are you first have to understand what a style is. Now if you've used something like Microsoft Word or WordPerfect before, you probably have some idea of what a style is. It is a collection of formatting attributes that define the way a particular paragraph is going to look. Each paragraph in your document can be said to have a particular style and paragraphs that have the same style will look the same. So you’ll have headings styles and you’ll have regular paragraphs text styles, you’ll have bulleted styles and numbering styles and so on. You’ll have a collection of styles and the use of such styles on a web page or anywhere actually, any kind of document enables that particular document to have a consistent look and feel with a minimum of development work, just like databases it takes a bit of setting up at the beginning, you’ve actually got to define your styles, once you got them defined, you can simply say yes well I want that paragraph to look like that. I want that paragraph to be displayed in that style and you don't have to specify yet again all the different formatting attributes of that style, you don't have to say, well I wanted it to be bold, I want it to be 17 point Bonkan font indented 3 inches from the right and with a double underline, you don't have to say any of that. You just have to say I want the special heading style and it would pick up all those attributes from the definition of the style. So you can have 12 headings all the way through your page that are all based on the special heading style and they’ll all look identical. This is supposed to save you time not to mention to make it easy for to give your web page or other kind of document a consistent look and feel. Now it goes a bit, it goes a one step further, when you got a website, you've got a large collection of documents and you probably want the entire site to have the same look and feel. In other words you want each page to use the same collection of styles. What do you do about that? How do you do that? You define the styles again in each page. Well, no. Obviously you don't have to do that Cascading style sheets are the solution to this particular a problem. The Cascading style sheet is a very small file that simply contains a collection of style definitions. That's all it is, it’s just style definitions in a file and then what happens is at each web page in your website that you want to use those styles, simply includes a reference to the CSS file at the beginning of the HTML. Thus making each of the styles in that small file available to that particular HTML file, so all you have to do essentially is add one line to each of your HTML files and it automatically then will go and pick up all the styles out of that file that your referred to. I guess the simplest thing for me to do is to show you an example of this. This is a page in Russia and it's got the Crelic language up here Crelic alphabet as you can see up here in Russian. It’s also making some interesting noises, I don't know if you can hear those. Now why I pulled you to this site is because it uses some style sheets to define the way their paragraphs are going to look in particular. It’s defining the way their links are going to look. Here is a link, it’s underlined, when I move my mouse over it, it changes in style. It changes to a sort of turquoise link, it’s not underlined anymore and there is a another one there, and another one there and another one there and I can scroll down and find that all their links happen to look exactly the same. This is through the use of style, in fact I could go any where in their website and I would find the same behavior. Here is another one of the pages on their site and again you can see the same behavior in each of the links. Now let’s see how they’ve actually achieved that. I’m going to view the source for this particular document. Here we are in the HTML code and you can see here that we have a style sheet link and it's simply a reference to a file called styles.css I’ve taken the liberty of downloading that particular style sheet and I’ve loaded it up in Microsoft FrontPage although I could have loaded it up in any text editor and you can see here that it is just a collection of style definitions. We want this particular font; we want this color and so on. It’s just the way it’s going to look and that's all there is in this file. It's a very simple file. Here’s another example of cascading style sheets in action. This is from my own website again when I went trekking around the world. Now I wanted this particular effect, I wanted the paragraphs of my website to be indented by half an inch or so from left in the same way that a book is indented and I wanted the paragraph to run together with no space between them again just like a book, normally HTML puts a little space between each paragraph and I didn't want that so I defined a style that would basically just said indent the first line and no space between, that's all the style says. and then obviously I need to say that each paragraph adheres to that style and I put that style, that collection of styles in a separate cascading style sheet and I caused every page that I had on my website to pick up that style sheet. I’ll show you what I’m talking about; let’s have a look at the source code again. View source and here is the reference to the style sheet, it's in my styles.css, which defines a particular style, called writing. So every paragraph that I have, I say that, that is in the class of writing and again down here, that way you can see every paragraph that I create must use that particular style. Also I’ll just show you that I’m using exactly the same technique on another page, we'll go to set three for example into Tibet and you’ll find the same behavior, same paragraph style here, view the source again and you’ll find a reference to the same style sheet, exactly the same style sheet. If you want to see that style sheet, I’ll quickly show it to you. Here it is, it just simply contains the definition of one style called writing. Which is left aligned text with an indent of 13, margin of 0 margin bottom of 0, it is really nothing, not much to it. That's a cascading style sheet and there is a reference to that in every page on my website. I’m showing you cascading style sheets because they are a technique commonly used by web developers. I think it's important that you know that they exist. If you just picked up a book on how to learn HTML, they may not mention cascading style sheets. If you’re going to be developing a large scale website, it’s important that all your pages look the same. Cascading style sheets is one of the simplest ways of doing that. Just like everything in this chapter, I’ve shown them to you so that you have a greater awareness of the technologies that are available for you as a website developer to take advantage of. In the next chapter, we'll actually start with all these concepts and processes, knowledge under our belt we’ll actually the start process of developing a website.