CSS
Inline styles vs. Internal Stylesheets
One way we have of formatting the appearance of an HTML tag is to format them using inline style rules such as below
The style="font-family:Arial,sans serif" part of the HTML is known as an inline style. But you will see even in the small example above we have had to incorporate the same inline style code twice.
This would lead to a lot of duplication as the inline style style = “font-family...” has to be duplicated every time it is used.
This duplication leads to larger file sizes.
Internal Stylesheets
Let’s look at the same example as earlier but as in internal style sheet. These are always placed in the <head> area of each HTML page.
Using inline styles you would have to use the style for every single use of H1 and H2 throughout the page
Using an internal style sheet located in the head area means we only have the rules once for each HTML page
External Stylesheets
We are still repeating a lot of HTML code as each page has it’s own internal StyleSheet. What we can do instead of that is to link to an external stylesheet using the <link> tag. External Stylesheets have the following advantages:
Easier maintenance across websites
Smaller HTML File Sizes
Greater consistency over multiple pages
Decreased load times as CSS will be cached
When using an internal CSS each page has its own Internal Stylesheet
When using an external CSS each page uses a link tag to an external file