Assignment 2 - Features of Web Development: U20P1: - Explain how HTML files access CSS

Inline

The CSS is attached to the HTML element for example <h1 style="color:blue;"> this would make the color of the heading blue.

Inline loses many of the style sheets because it mixes content with presentation. To use the inline style, you have to use a tag that matches well with it. The style can have any CSS property.

The advantages for this style are shown below:

Testing: loads of web designers use inline when they begin work with new projects, this is because it is easier to scroll in the source rather than changing the whole source file.

Quick fixes: there are loads of time where you can use a direct fix in the HTML source, using the style attribute but you would usually move the fix to the relevant files when you have the time

Smaller websites: the website such as blogs where there’s little number of pages. When using incline it helps users and service providers

The disadvantages for this style are shown below:

Over riding: they are more specific and they can over ride thing you don’t want to do

Every element: inline styles need to be applied to every thing you want them on. For example if you want all your paragraph to have the font family times new roman, then you will need to add an inline style to every <p> tag in the document.

Inline on Page (internal)

The internal style should be used when a document has a unique style. You can explain this style in the head section of a page by using the <style> tag.

<head>

<style>

h1{

color:blue;

}

</style>

</head>

The advantages for this style are shown below:

No additional downloads - you don't need to download additional things to get style information because its already in the software

The style of the same element - internal styles don't need to be applied to every element. If you want all the paragraphs to be red you will also need to add the paragraph tag in the internal style document which is <p>

Cache - internal styles can be read by all browsers

The disadvantage for this style are shown below:

Larger file size: when using the internal CSS, the page size will increase which makes it hard to store if you have a low capacity drive

Page loads slow - when suing the internal CSS page, the page will load up slow compared to inline and external CSS

Multiple documents - you cannot use multiple documents if needed to.

External CSS File

The external style sheet is perfect when the style needs to be used on loads of pages. with an external style sheet, you can change the whole look of a website by changing one file which makes it very easy to use. Each page needs to link to the style sheet using the <link> tag which is shown below:

<head>

</head>

The advantages for this style are shown below:

Full control - you have full control of how you want the web page to be laid out without making any deals with the actual look of the page. This style sheets does not annoy the user and lets it do what they need it for.

Reduced file size - when you include the style of the text on a separate file, this will decrease the file size of the pages and this will also make the page easier to read for the programmer

Less load time - CSS helps save money by offering you fast load time. It takes around 8 seconds to load a website with CSS which is very helpful for the programmer when doing the code and checking the traffic

The disadvantages for this style are shown below: