Cascading style sheetsIf you've ever created a Web site, you've most likely used a lot of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your Web site design. If you later decide to change the color scheme or fonts used in your site, you'll have to edit every page in order to do this.Cascading style sheets (CSS) provide a solution to this problem. Instead of defining the Web site design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet. What do cascading style sheets look like?Style sheets are made up of one or more rules that look something like this...
Each rule begins with a selector, which is H1 in the example above. A selector is often one or more HTML tags, and the declarations inside the rule describe how those elements should appear. The above CSS codes will force all H1 tags on the page to use a 12 pt Arial or Helvetica font in green text. You can also use classes as selectors, which aren't tied to specific HTML elements...
Note that .orange doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed). To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to highlight important text on your page, apply the above style to a <p> tag...
Note that the period before the class name is not included. How to use style sheets?There are three ways you can use cascading style sheets...1) Embedding CSS codes into the style attribute of HTML tags. Most HTML tags now support this attribute, but by applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design. For example...
2) Embedding CSS codes using a style block in the HEAD section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. For example, you can make your text links change color when the mouse passes over them by inserting these CSS codes into the HEAD of your document...
While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. 3) Linking external cascading style sheets to HTML documents using a <LINK> tag in the HEAD section of every document you wish to apply the style sheet to. For example...
Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of cascading style sheets are most apparent, since you no longer have to update every single page in order to overhaul your Web site design. The drawbacks of cascading style sheetsRight now the biggest problem is the imperfect style sheets implementations that today's browsers offer. Although recent browsers include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.This makes it very difficult to create CSS codes that work across all browsers, since what looks good in one browser may look awful in another.
Linux Google Web Server Programming Windows Web (webmastering) Mix Computer related text Microsoft Word |
