Understanding CSSHello World HeaderAs you see it is standard header 1 (first level header) format. But this is not the format you want to use on your site. Is it ? May be your choice of header 1 format is a little more bigger in size, has green color and aligned to center rather than left. Something like this: Hello World Header Big deal! You might say, I could do this ! Well of course you can, but remember you have hundreds of pages and may be thousands of headers in this is style and this is just one small piece of your customized web site. CSS to the rescue. Imagine this you have a file,which all of your other HTML documents have to go through this file before it reaches to render engine of a browser, and this file tells your texts : CSS: Halt! who are you ? Your text says: I am a header 1 text and this is my content. CSS: To pass the other side all header 1 type guys should look green and stay in the center and must be size 18 points! At this point, your text has only one choice to pass to other side (your screen) and that is following the directions of Style Police (CSS). This is the idea behind CSS. Instead of you doing the styling and formatting to each piece of your HTML documents; your predefined set of rules for styling and formatting are executed and controlled by Style Police (CSS) to your texts. As you realize another very use full thing about CSS is; if you decide to change a style of text, instead of changing each of them one by one, you can change only your CSS file and let that take care the rest for you. CSS TypesThere are two kinds of CSS. These are. external style sheets and internal style sheets. Let's dig little deeper. Internal Style Sheets: These are created in the HTML document you work on. So, styles and formats affect only that page. Which means, you can have different CSS for each HTML document. In one page your headers can have green color, on another brown color, and so on. Also you can export styles of an internal style sheet in order to use on another page. External Style Sheets: This is the real workhorse. By creating external style sheets, you can control a group of pages or entire web site with continuity in style. Flexible use of external style sheets let you have a common style for entire site and in the same time you can make some extra formatting to individual pages as you like. Creating External Style SheetWhy do I start with external style sheets? Well from my own learning experience, I realize that external style sheets are more easier to understand the structure and functions of CSS. I hope it will also help you to learn easier this way. Here we go: First rule about the external style sheets; as I mentioned above when you create an external style sheet, you will create a file containing your set of rules. Now this file must be saved in your root folder. Usually where your index.html page is your root directory. I know; your mind is still blur about this mysterious file but, don't worry this is a lot easier than it sounds. Since you learned the first rule, we can get back to our first external style sheet creation process.. Let's create a new site in GoLive. (File|New Site|Blank) You can give any name you want to your new site. Now, you have a site with only index.html , lets create a folder (Site | New | Folder) then create another page (File | New) in this folder and name anything you like. I name the folder "mypages" and the file "xyz.html" and it looks something like this:
Figure 1: New site Your site should look with similar structure, except for your choice of folder and file names. And now the big bang. Go to File menu and choose New Special | Style Sheet Document.
Figure 2: Creating style sheet document. |
|||
