ADVANTAGES AND THE LIMITATONS OF DIFFERENT IMPLEMENTATION STYLES OF CSS
INLINE - An inline style lacks in many of advantages, this is because it mixes content with presentation. This creates a hard to maintain site. The inline style has to be used carefully, to use inline styles you use the style attribute in the relevant tag.
Inline CSS can be used for many purposes, such as testing. Many web designers use inline CSS when they face a new project, this is because it is easier to work with, for example, it is simpler to scroll up in the source, rather than change the source file. Additionally, inline style is quick to fix. This can be used when the designer is either able, or got the time. Websites such as blogs, where there are only limited pages, using inline CSS helps users and service providers. The main advantage of CSS is lower HTTP requests, which means the website loads faster, as the speed of the loading is fast, which therefore is good for user interaction, as users won't have to wait consistently for the page to load.
However, the limitations of inline CSS is that inline overrides things that a designer didn't plan to, this is because inline CSS is the most specific in the cascade. Also, inline styles must be applied to every element you want them on, meaning if you want all your paragraphs to be the colour green, you have to add an inline style to each <p> tag in your document. Therefore, creates more work for the designer and download time for the reader. Furthermore, with inline style you can only style the link itself, because that's what the style attribute is attached to.
EMBEDDED - Embedded CSS has more advantages over inline CSS. With embedded styles sheets, web designers can style the visited, hover, active, and link colour of an anchor tag, whereas it is impossible to style pseudo-elements and classes with inline styles. Embedded styles doesn't require a web designer to apply the style to every element. Also, no additional downloads are needed to receive style information or we have less HTTP request.
There are not many limitations for embedded styles, but the few are that embedded styles can't be used for multiple documents, if you want to use it on multiple web pages. Also, as there are less HTTP request, by using embedded CSS the page loading will be slow as compared to inline. Lastly, using embedded style CSS, the page size will increase while using it, which only helps the designers while working offline.
EXTERNAL - There are countless advantages for using external CSS. For example, using external CSS allows full control of page structure, and keeps your website and content separate. It is much easier to reuse your CSS code if you have it in a separate file. It doesn't require you to type the same CSS code on every web page which exists, you can just simply have many pages which refer to a single CSS file with the link tag. External CSS enables designers to display their web page according to W3C HTML standards without making any cooperation with the actual look of the page. Using external CSS reduces page load timing, the speed of page loading is fast, which is a big satisfaction for users.
With external CSS, when styling text in a separate file, web designers can considerably decrease the file size of the web pages. To finish, in the Search engine optimization (SEO), it is vital to use external CSS. Using the CSS will help web designers create highly readable pages, which will be high in content, therefore will prove very helpful in the web designers search engine optimization. As better site ranking means better visibility on the web, this can create more visitors.
However, there are a few limitations to external CSS. External CSS can increase the download time if they are extremely large, causing the speed of the webpage to be slow. Also, if you only have a small number of styles, they can increase the difficulty of the site, making it hard to maintain. Also, external sheets can become very big quickly, and it is hard to tell when a style is no longer in use, this is because it doesn't delete when the page is removed.
Inline CSS can be used for many purposes, such as testing. Many web designers use inline CSS when they face a new project, this is because it is easier to work with, for example, it is simpler to scroll up in the source, rather than change the source file. Additionally, inline style is quick to fix. This can be used when the designer is either able, or got the time. Websites such as blogs, where there are only limited pages, using inline CSS helps users and service providers. The main advantage of CSS is lower HTTP requests, which means the website loads faster, as the speed of the loading is fast, which therefore is good for user interaction, as users won't have to wait consistently for the page to load.
However, the limitations of inline CSS is that inline overrides things that a designer didn't plan to, this is because inline CSS is the most specific in the cascade. Also, inline styles must be applied to every element you want them on, meaning if you want all your paragraphs to be the colour green, you have to add an inline style to each <p> tag in your document. Therefore, creates more work for the designer and download time for the reader. Furthermore, with inline style you can only style the link itself, because that's what the style attribute is attached to.
EMBEDDED - Embedded CSS has more advantages over inline CSS. With embedded styles sheets, web designers can style the visited, hover, active, and link colour of an anchor tag, whereas it is impossible to style pseudo-elements and classes with inline styles. Embedded styles doesn't require a web designer to apply the style to every element. Also, no additional downloads are needed to receive style information or we have less HTTP request.
There are not many limitations for embedded styles, but the few are that embedded styles can't be used for multiple documents, if you want to use it on multiple web pages. Also, as there are less HTTP request, by using embedded CSS the page loading will be slow as compared to inline. Lastly, using embedded style CSS, the page size will increase while using it, which only helps the designers while working offline.
EXTERNAL - There are countless advantages for using external CSS. For example, using external CSS allows full control of page structure, and keeps your website and content separate. It is much easier to reuse your CSS code if you have it in a separate file. It doesn't require you to type the same CSS code on every web page which exists, you can just simply have many pages which refer to a single CSS file with the link tag. External CSS enables designers to display their web page according to W3C HTML standards without making any cooperation with the actual look of the page. Using external CSS reduces page load timing, the speed of page loading is fast, which is a big satisfaction for users.
With external CSS, when styling text in a separate file, web designers can considerably decrease the file size of the web pages. To finish, in the Search engine optimization (SEO), it is vital to use external CSS. Using the CSS will help web designers create highly readable pages, which will be high in content, therefore will prove very helpful in the web designers search engine optimization. As better site ranking means better visibility on the web, this can create more visitors.
However, there are a few limitations to external CSS. External CSS can increase the download time if they are extremely large, causing the speed of the webpage to be slow. Also, if you only have a small number of styles, they can increase the difficulty of the site, making it hard to maintain. Also, external sheets can become very big quickly, and it is hard to tell when a style is no longer in use, this is because it doesn't delete when the page is removed.