Tuesday 13 November 2012

U20P1 - Explain how HTML files access CSS

 

Features of web development -

In the following post I would describe styling methods in CSS these are Inline, Internal and External.

Inline

HTML is used for layout
CSS is used to format web pages
The structure of CSS

the CSS is attached to the HTML element e.g. <h1 style="color:blue;">
  • This code is useful if you need to use the style only once
  • Limitations are that if you need the style again you need to write the code again and every time you use it.
  • Has to be created and repeated for every task
Advantages
  • The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider. It is also useful when designers are testing a web page and encouter a problem which can not be easily fixed. 
Disadvantages
  •  Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.

Internal

the CSS is described in the <HEAD> tag e.g.
<head>
<style>
h1{
color:blue;
}
</style>
</head>
  • Is useful for using one page because it can be carried on for a certain tag within that page
  • Not useful for multiple pages as they don't carry on 
  • Has to be entered once every page
Advantages
  • Manage styling within a single document. Also Internal styles do not need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.
Disadvantages
  • Hard to maintain consistency across several related web pages
  •  This method can’t be used if you want to use it on multiple web pages.

External

<head>
<link rel="stylesheet" href="style.css">
</head>
  • links to an external style sheet where the tag is entered
  • Most useful because it cam be carried on for a tag for multiple pages
  • Has to be entered once
Advantages
  • Can link to multiple documents
  • By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages.
Disadvantages
  • Takes longer typing it out for smaller websites

Bibliography