Friday, 30 November 2012

Unit 20 - P1 Explain how HTML files access CSS


Unit 20 - P1
Introduction
Within this blog I will show the 3 different types of CSS embedding. Inline, Internal, External

INLINE: Inline CSS adds styling to individual HTML elements. They are good if you want specific pages to have a different CSS than others. But if not inline CSS must be applied to each HTML element you wish to style; this can be very time consuming. Inline will always overwrite external. Inline is the best for when the code only needs to be used once. This is because if the same code needs to be repeated several times on different pages you are better of using external.

INTERNAL: This is about not having to refer to an external style sheet. Internal is better for coding if only one specific web page needs to use the code. Otherwise it is hard to keep the flow with it on many different pages. So we can use “<style type="text/css"> to look within the html document itself. 

Here is an example:


<head>
<style>
h1{
color: red}
</style>
</head>

<head> Everything that goes in the head tag contains everything that has to be there before anything is done, it tells the browser what is coming up.

EXTERNAL:
We have this so that you don't have to constantly put the CSS within the HTML file. By linking an external stylesheet you can make one CSS file that applies to all of your webpages. For example here is some CSS coding you could have in the external stylesheet: in every page you would have the line:
<link rel="stylesheet" href="style.css"> to link the style sheet to the html files.
External CSS allows you to control many different documents at the same time.



REFERENCES

What is Internal CSS, 30/11/2012, http://anse.rs/11pfLQG
CSS Advantages, 30/11/2012, http://bit.ly/XHrDeW