There are three different CSS styles that can be adopted when developing a webpage, these are;
Inline
Inline style is where the CSS is attached to the HTML element, however these cannot be reused, each time the style is needed a new style must be written, as each style will only affect the paragraph it is connected to. Below is an example of Inline:
<H1 style="color:blue;">
There are a number of advantages of using Inline CSS, these are;
- Quick – Providing
it is not solely used this is a quick method of writing code, as it is written
straight in to the code.
- Good for
Small Websites – Because small websites only have a few pages, there are less
different styles needed on the webpage’s. Therefore using this method over the
others will aid the users of the site and the service provider.
- Faster loading – One of the major advantages of
using Inline CSS is the website can load faster as there are less HTTP requests
compared to using External CSS.
There are also some disadvantages of using Inline CSS, these are;
- Applying to all elements – Each element that
has to have a Style on, must have the Inline style applied to them. So if all
paragraphs have to have a particular font family, must have the inline style on
them. This adds to the time it takes to create and the time to maintain the
webpage and isn’t efficient.
- Overriding – Sometimes issues can arise and the
style can override thing that they wasn’t supposed to.
- Another issue with using Inline CSS is that it
is not possible to apply them to style Pseudo-elements and classes, whereas you
can with Internal and External.
Overall the use of Inline Style is not recommended, although they can be quick to add and they are good for developing webpage’s. However the disadvantages outweigh this as they increase the amount of work needed for maintaining the webpage and is the least efficient.
Internal
Internal style CSS is placed in the <HEAD> tag, these styles can only be used in this webpage, but can be copied and pasted in to another webpage style sheet and can be used. This saves time as they do not have to be created each time. Below is an example of Internal CSS;
<Head>
<Style>
H1 { }
</style>
</head>
There are a number of advantages of using Internal CSS, these are
- One Style needed – For the same element only one style
is needed overall, so the style does not have to be applied to each individual
element like Inline.
- Less downloads/ HTTP requests – Because everything is
stored in one sheet, means that less downloads are required to retrieve a
webpage, and less HTTP Requests are needed.
- Pseudo-elements – Unlike in Inline CSS it is possible
to style pseudo-elements and classes, with Internal CSS styling hover, style,
active and changing the link colour of an anchor tag is all possible.
There are also some disadvantages of using Internal CSS, these are;
-
Larger file sizes – because everything is stored in one
page, it can increase the file size greatly, which will then mean that the
webpage can load slower.
-
Multiple pages – this method can be used on multiple web
pages but it involves copying the internal CSS into the each webpage.
Using Internal CSS is recommended and has many advantages, the disadvantage should be considered and for large webpage’s, using an External CSS might be better suited.
External
The External CSS is stored in a separate file, which is different from both Inline and Internal CSS where they are both stored in the same file. This method of CSS involves creating a separate file from the webpage that will contain all of the style and then including a link to the file in the webpage. Below is an example of this;
<head>
<lin k rel="stylesheet"href="style.css>
</head>
There are a number of advantages of using External CSS, these are;
-
Less Loading Time – because all of the styles
for a website are stored in one file, once that file has been downloaded it
only has to refer to that file for all or most of the styles on the webpage
which intern saves loading time.
-
Full Control of Page – External CSS allows the
web page to be displayed according to the W3C HTML standard without
compromising the visual aspect of the webpage. Google gives a small amount of
value to the webpage, although this is minimal it can drive a bit more traffic
to a webpage.
-
Reduction of File Size – Because the CSS is
stored in a separate file, it dramatically decreases the size of the individual
webpage’s, therefore allowing them to load faster. With the space that you gain
from storing them separately allows the programmer to increase the number of
keywords and therefore the effectiveness of spiders.
-
Higher Webpage Ranking – External CSS allows
Search Engine Optimisation to be used more effectively, Spiders will be able to
search the webpage’s code a lot quicker when there are two files.
There aren’t many disadvantages of using External CSS, but the few are;
-
An extra download is required to be able to import the
CSS for each webpage, which can affect the speed of downloading a webpage
slightly.
-
Because there are two webpage’s, rendering the webpage
can be delayed as the External CSS must be completely downloaded to render all
the whole webpage.
This is the most commonly adopted method of CSS as the
advantages greatly outweigh the small disadvantages.
References Used
