1/31/11

CSS - External, Internal, Inline


In web development cascading style sheets can save a designer many headaches and time for formatting the site efficiently. While a website can function without CSS, it is away to add a custom look to a website and remove its default formats. By using cascading style sheets or CSS a developer is able to assign specific formatting to specific areas in the code. With using CSS a designer may choose to assign an ID format specified area or section.  An ID is used, “when there is only one occurrence per page” (CSS Tutorial - ID vs Class, 2011).  For example, an ID might be used for a call out for a banner section or menu section. With CSS a developer may choose to use a class when there are many instances of a needed format on a page. A class call out would be used on hyperlinks, or create special formatted text for copy sections, headers, and footers. Using a class also allows for creating rollovers for hyperlinks.

I personally prefer to use an external style sheet. Even when I am designing only 4 pages I find that I like the ability to control the way each page is formatted with one page of commands. Using an external style sheet does just that. I quickly and efficiently make changes to every page by making a quick edit to my external CSS file. A great example would be if I want my copy text to be larger on each page, and want the color to be gray instead of black. That change can be made to every page that has the link extension in the header and has assigned the proper class to the area that needs to reflect the format.

Using an Internal Style Sheet is another way to apply CSS to a web page. Internal style sheet commands are located in the head section and only apply their commands directly to the page they are placed on. Style tags contain the commands for the specific format of that individual page. This technique is not recommended for a website with many pages.  Like with external style sheets a class needs to be placed in a tag to apply the style or an ID is applied to a section in the head section.

Finally, an inline style is the least flexible for quick changes and adjustment. The inline style is exactly what it sounds like. It is placed right in the tag with a style attribute called directly into the tag. This is a quick and easy way to replace the default formats in a tag with custom formatting. However, this method is more tedious to edit and would not be suggested for websites with many pages.  

Works Cited:

"CSS Tutorial - ID vs Class." Tizag Tutorials. Web. 31 Jan. 2011. .
 

"CSS How to." W3Schools Online Web Tutorials. Web. 31 Jan. 2011. .