Unit 20 - M1 Assess different implementation styles of CSS

Unit 20 - M1

Assess different implementation styles of CSS

Below I will explain the advantages and disadvantages of different implementation styles of CSS

External CSS - There are many advantages for using external CSS; one of which is that external CSS reduces the risk of coding errors. This is because you only have one external file that contains all your code; this code cosmetically formats all the pages and so should there be an error you can simply change where the error has occurred whilst in inline CSS you would have to go about and look through each and every single page to find the error and fix them. Another advantage of using external CSS is that it allows full control of page structures and keeps your website and content isolated. Therefore it is much easier to reuse the CSS code if you have it in a separate file compared to when its combined into one. Another advantage is that by using external CSS it reduces page load timing meaning the speed of the page loading is faster which then increases user satisfaction. Also with external CSS when styling text in a separate file the web designers can considerably decrease the file size of the web pages as it is not part of the actual .html file. 

Conversely, there are some disadvantages to external CSS. One of which is that external CSS can increase the download time if it is very large which would cause the speed of the webpage to be considerably slower. Similarly if there are only a small number of styles it can increase the difficulty of maintain the website. And finally external style sheets can gain file size very quickly and it is quite hard to know when a style is no longer used this is because it won’t magically disappear just because the style isn’t being used and so the user would have to manually remove them.

Embedded CSS - With embedded styles sheets the web developer can style the different anchor tags, whereas it is impossible to do so with inline styles. Embedded styles do not need a web designer to apply the styles to every single element of the web page. Likewise no extra downloads are needed to receive style information as we have fewer HTTP request. 

A disadvantage of using embedded styles is that it can't be used for multiple documents for example if you want to use one style on multiple different web pages. Similarly as there are less HTTP request by using embedded CSS the website will load slower compared to inline CSS. And finally, as useful as embedded CSS is to designing a single page website, if the project suddenly becomes more than one page, then embedded CSS is going to become inconvenient and very ‘bulky’.
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

Inline CSS – Inline CSS can be used for various things such as testing websites. Plenty of web developers use inline CSS when creating a new website this is because it makes it much easier to work with; for example: it’s much simpler to scroll up in the actual source itself than to go back and change the source file. Moreover inline CSS is less time consuming and should any problems arise they are much quicker to be solved. Websites such as this one; blogs, where there’s only a limited amount of pages available by using inline CSS it helps users by being able to have constantly different styles all throughout. Another advantage of inline CSS is that it lowers HTTP requests which basically means the website loads much faster and therefore users are less likely to click away or simply become frustrated for waiting too long.

Nevertheless, the disadvantage of inline CSS is that inline styles have to be applied to every element that you want them on; for example if you want all your paragraphs to be the colour blue you will have to add an inline style to each relevant <p> tag within the file. This is much more time consuming and creates more of a work load for the designer whilst also increasing the download time for the users visiting that website by ever so little. And finally with inline styles you can only code the link itself and not various other components since that's what the style attributes are linked to. 

References:
CSS How to, 15/12/2012, http://bit.ly/67RTT
3 Types of CSS styles, 15/12/2012, http://bit.ly/W1PV3g
Implementing css, 14/12/2012, http://bit.ly/Mps5rk