Pros and Cons of CSS Styles
IT/237 – Intro to Web Design II

CSS Styles Cascading Style Sheets (CSS) can be used in three different ways. These methods vary in where the code is written into the Web page, as well as properties of inheritance. The three different styles are as follows: inline, embedded, and external.
Inline CSS The inline CSS method is no longer used extensively. Inline means exactly what the name implies. The CSS code is inserted into the tag to which it applies. This method works well for quick prototyping of a Web page, but is impractical in designing a large site. Because the CSS code only applies to the tag into which it was inserted, the designer must manually write any desired CSS code into each tag present. In addition to consuming large amounts of time, this method cannot be shared across pages. As a result, more bandwidth is required to load each page. In addition, inline CSS mixes page content with page presentation which can create issues with how the final product appears to the user. Embedded CSS was developed to alleviate some of these concerns.
Embedded CSS Using the embedded CSS method, all CSS code is written into the head of the document. This method ensures that every tag of a specific type on a page will look the same. This creates uniform pages in which each <h1> heading looks the same, as well as any other tags. That said however, embedded CSS still shares the issue of being shared across pages. As a result, each page must be individually coded. Again, this may work for a Web site of three or four pages, but is impractical for one with 20, 30 or 100 pages. In an effort to further streamline site design, external CSS has been developed.
External CSS External CSS is written in an entirely separate document from the HTML documents that make up the actual Web site. These “style sheets” are then attached to the original HTML documents. With this method, a Web site consisting of 300 pages can insure that each page is laid out in an identical manner. This method also allows one to make sweeping changes across the entire site with only one actual change to code. The external CSS documents are also cacheable, leading to faster page loads and less use of bandwidth. The downside to external CSS is that it makes an extra HTTP request per file, using more resources in routers and firewalls. External CSS has become the method of choice for most designers due to the ease of upkeep and making changes.