Friday, 8 February 2013

Unit 20 - M1 Assess different implementation styles of CSS

M1 - Assess different implementation styles

In this blog I will be assessing CSS and the different implementation styles that are used within CSS coding which are Internal, External and Inline. I will provide you with clear explanations, examples and the advantages/disadvantages of each of the style sheets.

CSS (Cascading Style Sheets): this is basically codes which are used to produce and design web page appearance and also include adding text to the page. They are mainly used to design web pages for the internet and codes within the style sheet are written up in a“mark-up language”.

The elements within HTML are displayed by Styles and all the HTML tags have CSS built within them. CSS. CSS is basically designed to separate the content of a web page from its presentation which include elements such as “colors”, fonts and the layout. The documents consists of different tags which are used to create what has been displayed on the screen, bellow is an example of some of the tags

There are three main implementation of CSS style sheets that I will explain as well as giving you advantages and disadvantages for each one. The three that I will explain are below:

  • External style sheets

  • Internal style sheets

  • Inline style sheets

External:

An external style sheet allows you to change the appearance (e.g. the layout, the colour) of all pages within the web page. External style sheets are mainly used for when having to apply many appearances to many pages on a web page/page's. By using this type of style sheet the HTML files are linked to one CSS file; this allows you to make changes to the web page's layout using only one .css file if necessary instead of having to go through all the files.

When writing out the codes you must make sure that you keep the code for the style sheet within a link tag and the code should also start with a <link> tag so it links the page to the style sheet. Bellow is an example:

< head>
<link ref="stylesheet" type="text/css" href="mystyle.css">
</head>

Advantages:

· External style sheets allow you to change the appearance and layout of all the pages with in website and for every web page and this is done by only having to edit one file.

· The mostly useful feature of CSS is that all of the style and layout is removed from the html, so the html page size is very much smaller which makes the web page run more efficiently.

· By CSS having reduced bandwidth for the users server, it also allows faster downloads for other users

· When creating a web page, external style sheet gives the user more accurate formatting, easier to maintain the site and web accessibility.

Disadvantages:

· CSS doesn't work at all in very early versions of Internet Explorer. Some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

· You must download the css in order to work with external style sheet

· When trying to make a complex and different layout instead of a simple one, it could be quite hard to edit the code.

· When a style is not in use and you have a small number of styles within your code, it could increase how complex your site becomes when trying to work on it; this could lead to making errors within the code which will then lead to your web page not working.

...................................................................................................................................................................

Internal:

An internal style sheet is basically all the tags within the code of the web page, for example <head>, <style> and <body>. These tags visually do not show anything however they inform the browser that there will be some sorts off CSS on the web page. The tags themselves only have an affect on the document of the web page that they're are in, unlike external you can't edit one and the rest change.

When writing up the codes you must keep in mind with the internal tags are that they must always have an open tag (e.g. <head>) and a close tag (e.g. </head>). Bellow I will show you a few examples of the sorts of tags I am talking about:

1.      < head> </head>

2.      < style> </style>

3.      < body> </body>

The tags shown above are the common tags that would be used, so all you would need to do is fill in between each tag what's going to go into the CSS and how you want the layout/colour/text to be. Bellow is an example of them some of them put together as one code:

< head>

<style>

h1{

Color:green}

</style>

< /head

Advantages:

· There are no additional downloads necessary in order to receive style information and or there are less HTTP request

· Testing with internal CSS is another advantage as it allows you to test the different styles that are in the context of the website and the web page. You could be testing these before actually submitting them on a larger site.

· Elements within another element do not need to have internal styles applied to them, if you wanted your paragraphs within one web page to have the font as “Calibri”, then you would have to add an Inline style tag <P> in your Internal Style document. This is what includes both the maintenance work for the creator/designer of the web page and also downloading time for the users.

Disadvantages:

· As well as having less HTTP requests as an advantage, it is also a disadvantage as the reduced request for HTTP within the internal CSS is also slow compared to the other CSS such as Inline and External.

· File Size- When the web developers are working, the page size increases. Although it is helpful for the developers when working offline, it can cause the site to load slowly when they are online.

· If i have <h2> in my document i need to repeat that code for every single page. By having to right out the code again and again separately for each heading just to change anything such as the colour it could be very time consuming which is one of the major problems

...

Inline:

Inline CSS adds styling to single HTML elements using a type of attribute of an element called <style>. They can be an advantage if you want a specific page to have a different type of CSS than others. But if not Inline CSS must be applied to each HTML element you want to style. This can be very time consuming when having to go through each and every element repeatedly. Inline is good for creating small file sized web pages such as things like blogs or even forums, because of this the web page would be delivered on the screen much quicker and efficiently.The purpose of inline styles is to allow you to overrule an embedded or linked style rule, or to make a quick change of style. Bellow is an example of an Inline where I changed to style of font size:

<p style="color: blue; margin- right: 25px;"> My name is Raad Begh



This would show the paragraph as:






" My name is Raad Begh"




Advantage

· One of the main advantages of Inline would be that it is good for a quick and simple test without having to go back an forth between the .css document and the actual HTML file.

· You don't need to edit a new element in the head of your document (as you would with an internal style sheet). Inline are therefore very easy to add and can save a lot of time.

· This is a advantage Inline CSS as it has lower HTTP requests. This means that Internal CSS websites load much faster than External CSS websites.

Disadvantages:

· Separates both the content and logical code from the style sheet, because the CSS is mixed up with the HTML code

· Inline is not good for making large, high quality web sites

·         Must be used on every Element-The Inline style must be used for every element you want it on so it can be much more time consuming if you are creating a large site. For example if you wanted all your headings to have a font of "Ariel" you would have to add an inline < p> < /p> tag in your documents. This will also add download time for the website user when they are opening the site.

Reference









Posted by at 90 comments:
Subscribe to: Posts (Atom)