Assess different implementation styles of CSS

Task 4 – CSS Implementation Styles (U20M1, U28M2)

 

1.    Produce a blog entry that describes the three CSS implementation styles and their advantages and disadvantages.
Use the following layout:-

Introduction – Summary of your intentions
Inline – Description, Advantages and Disadvantages
Embedded – Description, Advantages and Disadvantages
External – Description, Advantages and Disadvantages

In this task I will be describing the three CSS implementation styles with their advantages and disadvantages

The three CSS implementation styles are Inline, Embedded and external

Inline
The inline style in CSS is to allows users to implement directly into CSS without the need of extra files like style.css.
An example of inline is the code below

    <h1 style="background-color:red;color:yellow;font-size:20px;">Inline</h1>

Advantages
 
1) Using inline the user does not need to create an external document only when using external style sheet. Inlines are easy to add as its written on the main CSS page rather than the style.css page.
 
2) Web designers prefer to use inline style on new projects as its easier to look around the source instead of changing the source file.
 
3) Using Inline also loads faster as it has lower Internet requests. This means that internal CSS website load much faster than external CSS websites.
 
Disadvantages
 
1) Inline must be used on every text or element so it will be time consuming as if web designers are making a big website they will need to write inline for each web page.

2) Cant always control styles for multiple documents at once

Embedded

Embedded CSS styling uses the tags <style> and </style>. This is used so users can edit the html tags in order in order to style them. An example of this is that if they want to style heading then the following code will be the correct one.

<style type="text/css">

      <h1>

font-color: purple;

     </h1>

</style>

The piece of coding above will show the heading as the colour purple.

 

Advantages

The advantages for embedded are the following

1) Embedded styling can be created so that other parts of the html such as the content can have the same style as the heading.

2) Everything which has to do with embedded can be done all in one worksheet so there is no need for downloading external styling sheet.

Disadvantages

1) Extra downloads are needed in order to import the css information for each of the document

2) Embedded style sheets uses lots of coding so sometimes it will be hard to understand what part is what

External

External styling is when a separate sheet is created named as style.css It will need a small tag in the HTML sheet which will connect both of sheets together so the external sheet is used to edit the coding such as colour of the paragraphs.
 
(<link rel="stylesheet" href="style.css">),
 
Advantages

1) Connects both of the worksheets together to make it one

2) Reduces the amount of coding in the HTML worksheet as the editing is done in the style.css sheet

3) Very easy for creating websites without problems like finding out what of the code goes where

 Disadvantages

1) Loading the web page can take a while to load because its accessing the files from the external worksheet.

2) Can become quiet hard to edit for complex layouts

 

Reference

Implementing CSS
15/12/2013
http://www.quackit.com/css/tutorial/implementing_css.cfm

Disadvantages of External CSS
19/12/2013
http://answers.yahoo.com/question/index?qid=20120413134600AAaE8kF

How the three different implementation styles of CSS and how they are called from HTML?
18/12/2013
http://answers.yahoo.com/question/index?qid=20090207121817AAKxd6l

CSS Code
18/12/2013
http://www.tizag.com/cssT/internal.php