Criteria

Tuesday, 13 November 2012

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>
     <link rel="stylesheet" href="style.css">
</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:

  • You to download an extra when you want to import the CSS information for each document
  • When rendering the document for higher quality can take some time until the external style sheet is fully loaded

CSS = Cascading Style Sheets
HTML is used for layout
CSS is used to format web pages
The structure selector to make a rule. The name of the CSS rule is a selector.
Properties and values help create the things you want for example font size and color









 

 
Bibliography