Introduction:
In
this document I will be explaining the different Cascading Style Sheets (CSS)
Implementation Styles, these are; Inline, embedded and external. I will also
describe the advantages and disadvantages of each implementation style and how
they can be used in certain types of websites and what scenario each style may
be used in.
Inline:
Inline
implementation is applied within the Hyper Text Mark-up Language (HTML) code,
so if you were to type out a HTML tag, you would apply the CSS after you write
out the tag. For example; <body> would become <body style = “color:
purple”> if I wanted all the text within the body tags to be purple. It’s
probably one of the simplest ways of writing up CSS, but it can get
complicated. Inline implementation is more useful for testing certain
circumstances, for example if I wanted to test what a page would look like with
a black and yellow background, I would first test it in the HTML file, to see
if it looks alright. It also takes up less memory than external implementation;
it’s the most light-weight type of CSS implementation.
It could be used for a single webpage, for instance some websites only require
one single webpage to establish a point or an idea, and inline implementation
would be useful in this sense. The advantages of inline implementation is the
fact that it’s easy and straightforward to do, as you can keep coding in the
same HTML file that you opened, so it’s quite quick to use in certain
situations. It can also be used to make fine details to a certain piece of
text, but it’s still not recommended to do so. Again for testing purposes this
is great, and outdoes most implementation styles, as you can see how a small
bit of text looks in the theme you are trying to create and then decide whether
it’s a good idea to implement it across the whole website.
However
the main disadvantage of inline implementation is that if you were to create a
big website with multiple webpages, it would get extremely complicated and
cluttered. This means that it’s perfect to be used in quick projects where the
main objective is to test. It’s completely unorganised and you have to keep
retyping it for every new tag you create which can end up becoming tiring. It
is extremely inefficient if you’re even doing a big webpage, let alone a set of
webpages, as you would need to remember what you typed beforehand as well.
Advantages:
-
Quick
to deploy, probably one of the quickest ways to implement your CSS.
-
Small
and concise, uses the least amount of memory.
-
Good
for a programmer to test code, since it’s specific, it also means you can test
a range of formatting to find the one that best suits your website.
Disadvantages:
-
Complicated
if creating multiple webpages, has to be retyped every time.
-
Extremely
complicated if a whole theme needs to be changed, since everything has to be
retyped.
-
Messy
and hard to read, doesn’t look appealing when another individual takes a look
at the code.
-
Can’t
specify a set of tags, has to be retyped for every new tag created.
Embedded:
Embedded
implementation is applied within the <head> tags within the HTML code,
similar to inline implementation. However embedded will have its own
<style> tag to deal with, and will then provide a list of HTML tags and
properties, the properties will be implemented into the tags that are listed. It
appears in a list sort of format and can be helpful for a big webpage, but the
complexity will begin to show when you start adding multiple webpages. So again
the main disadvantage to the embedded implementation will be that it wouldn’t
be suitable with a website with 3 or more webpages involved, since you’d have
to write out the style code each time you create a new webpage. This type of
implementation also takes up less memory than external, and is more
light-weight as it it’s already inside of the HTML file.
However
the main advantage is that it can be used to change a whole webpage that can be
separated from the main website, this also means that if you have a complicated
webpage you want to test and it would become cluttered if you used inline, you
can just use embedded to quickly test the whole thing. You can also copy this
code over to other webpages to test the same thing, since it’s a simple single
tag within the <head> tag. It can also be used for relatively small
websites that only have a few webpages, since it is easy to use and you can
just copy over the code that you placed within the HTML file of the first
webpage that you designed. Anything over a few webpages, like a massive HTML
website project would require a special implementation style known as external.
Advantages:
-
Easy
to code, takes up one section and all the code is placed there in a list sort
of format.
-
Useful
for one-page websites as it applies to a single page.
-
Relatively
easy to make changes.
-
Looks
neater than inline as it has its own section.
Disadvantages:
-
Hard
for multiple page websites as you’d have to retype your section of code for
each page.
-
Can’t
specify as much as inline, so you couldn’t test multiple ranges of formatting
to find the one that bests suits a webpage.
External:
External
implementation is widely used and is the cleanest way of designing a whole
website, the reason for the name is that the CSS code will appear in a file
that is separated from the HTML file. This allows for more flexibility and more
focus for each set of code, since you don’t have to get into the way of the CSS
code when you start coding in HTML. However the two files a linked via a simple
one line tag known as “<link>”, this tag contains three variables; “rel”
which specifies the association between the current file and the linked
external file. Then there’s “type” which describes the type of media of the
linked file, which in this case is “text/css”, after that you’ll have “href”
which is the direct URL which will specify the location of the linked file.
The full tag would look like this:
<link rel="stylesheet" type="text/css" href="theme.css">
this tag
would be held within the <head> tag and would link directly to a text
file known as “theme.css” which would then contain all the CSS code to be used
by the webpage or set of webpages.
This form of implementation would allow a great advantage when developing a large
website with a lot of webpages, since you can just set up the webpages to link
to one single CSS file. This also means it makes you keep a general theme with
your website, which enables it to look clean and user-friendly. Another
advantage would be the fact that you can change any part of the CSS file and it
would affect all of the webpages linked to it instantly. This makes modifying a
website easy and quick, this also allows you to change it according to an event
like Christmas and Halloween. It’s also a lot more organised and easier to
manage than either embedded or inline since with those types of CSS
implementation you have to keep referring to the HTML document. But with
external implementation you just have to refer to the file that contains to the
CSS and when you have to edit the HTML; you refer to the HTML files. You can
also create multiple style sheets to use as several themes for when you explore
the whole website.
There are some disadvantages that come with external however; it takes more
time to create an external file than to code in CSS within the original HTML
file. This means that if you wanted to do some quick testing you would not use
external implementation at all, it would be much better to use either inline or
embedded depending on the situation. It also technically takes up more memory
than a single HTML file, since you are using two files both of which could take
up considerable amounts of memory, especially if you were buying a domain name
that had a specific limited amount of bandwidth. In this aspect if you have a
small budget and bandwidth and only wanted to create a simple website with a
few webpages you could use embedded CSS.
Advantages:
-
Makes
things a lot tidier as the CSS is separated from the HTML.
-
Allows
one to change a whole set of webpages by changing one CSS sheet.
-
Allows
one to specify individual webpages or sets of webpages by creating multiple CSS
sheets.
-
A
lot easier than all other implementation styles to make big changes to a whole
website.
Disadvantages:
-
Can’t
specify individual tags as well as inline can’t make small changes to different
tags as the CSS within an external sheet applies to all of the tags you set
that CSS to.
-
Uses
up more memory, storage space and bandwidth.
-
Not
useful on a single-page website as it would be a waste of space and time.
-
More
time consuming to code in CSS, not good for testing.
References:
W3Schools,
27/10/14, http://www.w3schools.com/tags/tag_link.asp
Wikipedia, 27/10/14, http://en.wikipedia.org/wiki/Cascading_Style_Sheets
W3Schools, 27/10/14, http://www.w3schools.com/css/
Wikipedia, 27/10/14, http://en.wikipedia.org/wiki/Cascading_Style_Sheets
W3, 27/10/14, http://www.w3.org/Style/CSS/Overview.en.html
HTML Help, 27/10/14, http://www.htmlhelp.com/reference/css/
