The purpose of Inline CSS technique is to add styling to HTML elements. In order to use the Inline technique you need to put the 'style' attribute in the tag you want to apply the styling to. If you happen to write the CSS code inside the '<h1></h1>' tag, it will automatically overwrite the Embedded and External styles if you've used them at any point. Inline CSS requires you to apply the specific styling to each HTML element you want to style individually. This technique is usually most suitable for styling simple web pages such as blogs, because the main content within them is text and there aren't many pages within them. Inline CSS allows you to change the style of a page very quickly. An example of Inline styling would be:
<p style="color:red; margin-center; 15px"> Styles of CSS
The result from styling the paragraph would look like this:
' Style of CSS '
Advantages of Inline CSS:
- Websites/pages using Inline CSS load much quicker due to the low HTTP request
- Allows for the quick fixing of HTML source
- It's easier to scroll up in source containing Inline CSS, as opposed to changing the source file
Disadvantages of Inline CSS:
- Inline CSS requires to be applied on every HTML element, therefore increases overall time for creating/styling a website
- You can accidentally overwrite External and Embedded styling
Embedded CSS is the process of creating style sheets for an HTML file, as the CSS code takes place in the head tag. This technique is more efficient than Inline CSS, because it allows the developer to style the properties of the anchor tag, which include link, visited, hover and active. Furthermore, Embedded CSS eliminates the need for having to apply the styles to all elements of a web page. As a result of that, there are less HTTP requests, which means no further downloads will be necessary for obtaining style information. An example of Embedded CSS would as follows:
<head>
<style>
h1{
color:red;
}
</style>
</head>
Advantages of Embedded CSS:Don't need to be applied to every element
- Allows testing your website without breaking pages into different sections
- No additional downloads required to obtain style information
Disadvantages of Embedded CSS:
- Cannot control styles for multiple documents simultaneously
- Web pages load slowly due to the less HTTP requests
- The use of Embedded CSS increases web pages' overall size
External CSS is the process of creating style sheets for HTML files in a separate CSS file. This process can be done in any text editing software such as Notepad. This technique is very useful, as it separates the HTML file and CSS style sheet. This way you can use the CSS style sheet as many times as you need and apply it to any web page. The way External CSS style sheet is applied to a web page is by a code that links them, which is <link ref="stylesheet" href="style.css">. "style.css" is the name of the CSS style sheet and it has to be saved with the CSS extension in order for the link to be successful.
Advantages of External CSS:
Advantages of External CSS:
- External CSS style sheet can be applied to multiple pages
- The size of web pages are reduced, because the CSS code for them is stored in a separate file
Disadvantages of External CSS:
- Increased load time due to having to import the style sheets
- Not all style sheet features are supported by all version of Internet Explorer
References:
1. Inline Vs Internal Vs External CSS, 01/12/2013, http://bit.ly/1fdT6ht
2. What are the advantages and disadvantages of the various style methods?, 01/12/2013, http://bit.ly/1brr3WV
3. CSS How to, 01/12/2013, http://bit.ly/IrKRD2
No comments:
Post a Comment