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

Unit 20 - P2 Explain the features of the box model for CSS

Unit 20 - P2 Explain the features of the box model for CSS

The design and layout of html is shown through the form of a "box model". This is crucial for creating a well laid out and presented website which will create a clean yet simple design that will help users with their needs via the website. 
 
The box model simply ‘wraps up’ other boxes around the foundations which can consist of margins, borders, padding and footers. The box model allows a web developer to be able to change any part of the dimensions of the box and make it fairly easy to read each part of the website for a person to read.

 
There are four main layers:

1. Margin – The margin simply creates an area around the border of the box; the margin is not visible and therefore blends in with the website background itself. The margin lets space from the outside of the box to be left empty by a certain amount (depending on what the coder inputs).

2. Border - The border goes around both the padding and the content. The border is not transparent and so can have its own colour. Its thickness and type can also be changed, for example: five pixels thick with a dotted line style.

3. Padding - The padding is a clear space between the content and border and it just adds space to a specific region where the content is placed in so that it will be easier to read for users. The padding does this by having a space making sure the border isn’t touching the text or too close; it’s this that makes it easier to read. is can be easy to read and so the border does not touch the content.

4. Content – This is fairly self-explanatory as the contents sits right in the middle of all the layers. All the layers I have mentioned will be around the content.

Also the overall width or height can be defined with each box model although you may also change specific sides of the box such as have a greater padding from the left to get clearance from the edge of the browser. The box will have to be defined with a div tag which will then relate it to the class in the stylesheet.

Here is an example of a box being defined with a div tag and then in used in the stylesheet:

The html file will have:
<div class="box"> *content*  </div>


The cascading style sheet will have:
<!--[endif]-->

.box {

width: 400px;

padding: 20px;

border: 5px solid black;

margin: 10px;

}

Every single part of the box is set through the style sheet for example the: width, height, padding, colour etc…

References:

8 Box model, 14/12/2012, http://bit.ly/H4hj0
The CSS box model, 12/12/12, http://bit.ly/4goNJE