Different_Css

The different types of CSS Vincent Oliver IT237 September 21, 2011 Nicole Mallory The different types of CSS When speaking about Cascading Style Sheets also known as CSS one speaks about a language that eliminates all of the tedious effort. It is possible with CSS a web designer is able to create on or more documents that control the appearance of some or even all the pages of the Web site. CSS also allow the designer to format and revise an unlimited number of Web pages easily and efficiently. There have been different versions of CSS just like there have been different versions of HTML. Most browsers today support CSS version 2.1. CSS styles fall into three main categories: external, embedded, and inline. According to our text New Perspectives on Blended HTML, XHTML and CSS. “An external style is one in which you write the CSS code in a document separate from the HTML for the Web page. External style sheets can format some or all of the pages at your Web site. As such, external style sheets are the preferred method for writing CSS code.” (Bojack, 2010) “An embedded style is one in which you write the CSS code in the section of an HTML document. Embedded styles apply only to the one document in which they are embedded.” (Bojack, 2010) “An inline style is one that is written in the section of an HTML document. Inline styles format just a section of text within the text.” (Bojack, 2010) Each of these styles types are applied to HTML code in different ways. • External CSS’s are input in a document separate from the HTML document. • Embedded CSS’s are input in the section of an HTML document. • Inline CSS’s are input in the section of an HTML document. According to stackoverflow.com the pros and cons of external CSS are as follows: • Pros: easy to maintain and reuse across websites with more than 1 page. • Pros: cacheable=less bandwidth=faster page rendering after second page load. • Pros: external files including .css can be hosted on CDN's and thereby making fewer requests to the firewall/webserver hosting the HTML pages (if on different hosts). • Pros:  compilable, you could automated this so remove all the unused space from the final build, just as jQuery has a developer version and a compressed version = faster download = faster user experience + less bandwidth use = faster internet! • Cons: normally removed from HTML mails = messy HTML layout • Cons:  makes an extra HTTP request pr. file = more resources used in the Firewalls/routers. The pros and cons of embedded CSS are as follows: • Pros: same as above regarding prototype, but easier to cut out of the final prototype and put into an external file when templates are done. • Cons: some email clients does not allow styles in the [head] as the head-tags is remove by most webmail clients. The pros and cons of inline CSS are as follows: • Pros: Great for quick fixes/prototyping and simple tests without having to swap forth and back between .css document and the actual HTML file. • Pros: many email clients does NOT allow the use of external .css referencing because of possible spam/abuse. Embedding might help. • Cons: Fills up HTML space/takes bandwidth, not reusable across pages - not even IFRAMES References Bojack, H. (2010). New Perspectives on Blended HTML, XHTML, and CSS (Rev ed.). N/a: Cengage Learning. Comparison of loading CSS inline, embedded and from external files. (2010, March). Retrieved from http://stackoverflow.com/questions/2455488/comparison-of-loading-css-inline-embedded-and-from-external-files