Task 3 - CSS Implementation Styles
Introduction
The report will be explaining what inline,
embedded and external is. I will be giving advantages and disadvantages of
these. While I am describing each of the styles, I will include examples of
code to show how the style may look. CSS stands for Cascading Style Sheets;
these sheets help define how to display HTML elements. CSS was designed to aid
designing web pages in mind, this is because it without CSS you would have to
keep editing every little thing over and over again which can become very
confusing and time consuming. Style sheets can hold things like font, font
colour and size in a different document; this would help reduce size of the web
page as well. It would also makes things a lot easier and makes the code on the
HTML document less clunky.
Inline
Inline is a style that only works for the tag itself. The inline uses
the HTML style attribute. Example - <p1><font color=”red”>Example</font></p1>.
In this line you can change the font colour; you can also add a background colour.
The problem with inline is that if you use the style throughout your code, if
you find that you want to change the colour, you will need to go back to each
line and change; this will be very time consuming.
Advantages
Inline CSS
is great for testing, many developers will use inline to test their code, these
test could be what colour looks best or font.
The website
will load much faster because there will be lower HTTP requests
Inline CSS
is great for small websites such as blogs as there will not be a lot of
formatting required or many pages.
Disadvantages
If you have
used inline throughout your code, and you want to change the entire colour, you
will need to go back to each line and change the code.
You are
unable to reuse the styles anywhere else.
The lines of code will start to look like a
jumble of text and can cause headaches or hard to focus at. (iii, n.d.) .
The style can override things that you didn’t want to be overridden. You can’t
pseudo elements and classes with inline. For example, you can’t style the hover
colour of an anchor tag. Inline you are only able to style the link itself.
Embedded
Embedded
styles are written inside the <head> part of the webpage via the
<style> tag, for example, <style type=“text/css”></style>.
The styles can only be used for the webpage that has the tags. This means that
you will need to create the styles for each webpage that you want to style. It
would be wise to use embedded style sheet when a single document has a unique
look to it.
Advantages
It can be
easily modified by using a server side scripting language such as PHP.
No
additional downloads are required.
Web developers
can edit the link colour of an anchor tag.
Embedded
styles do not need to be applied to every element.
Makes it
easier for developers to test their websites because you do not have to
separate any pages apart from the one that you are testing. Internal style
sheets allow for pseudo elements, you can style the way the hover, active and
link colour of an anchor tag unlike with inline.
Disadvantages
The code
will look very messy. The styling can only be used on the webpage which it is
contained in. CSS page loading will be much slower. By using this, the page
size will increase. The large page size won’t affect designers because it would
be viewed offline, whereas when it is online it would consume way too much
time.
External
An external style sheet is a separate page file
that will in the future be linked to the webpage. An external style sheet is a
text document that is saved as .css. You need to link the external style sheet
to the webpage for the style to be applied. Here is an example of how to apply
in a webpage. <link href=”main.css” rel=”stylesheet” type=”text/css”>.
External style sheets are very popular when a style is being applied to many
pages. By having external style sheets, you can change the way the entire web
site looks by just editing one file. These style sheets can be written in any
text editor (Anon.,
n.d.)
Advantages
Web
developers can decrease the size of webpages. This is because the styling text
will be different in all documents.
Allows the
developer full control of the page and how it is structured.
It is easier
to reuse CSS code as it is in a separate file. The great thing about external
style sheets is that you can keep your site looking consistent. You can control
the way several documents look all at once. You are able to group styles that
you have created, this will make things more efficient.
Disadvantages
Extra downloads are required to import the external style information.
The document may be slow to load because the external style sheet will
need to be loaded.
It can be hard to find the styles that are not being used anymore,
this is because the style will not be deleted when the page is removed. Using
only a small amount of styles can increase the complexity of the page.
Conclusion
There are many CSS style sheets that are available for use, Inline,
Embedded, External. However each of these style sheets has their advantages and
disadvantages. Style sheets will make
life easier for people to create web pages as they allow them to set properties
to paragraphs, headings etc. and allow them to change the properties without
having to go back to the original code and changing every single line.
Bibliography
Anon., n.d. [Online]
Available at: https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
[Accessed 25 november 2015].
Available at: https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
[Accessed 25 november 2015].
Anon., n.d. [Online]
Available at: http://www.expression-web-tutorial.com/Types_CSS_Styles.html#external
[Accessed 26 November 2015].
Available at: http://www.expression-web-tutorial.com/Types_CSS_Styles.html#external
[Accessed 26 November 2015].
iii, i., n.d.
[Online]
Available at: http://www.nullskull.com/faq/99/css-disadvantages-of-using-inline-styles.aspx
[Accessed 25 november 2015].
Available at: http://www.nullskull.com/faq/99/css-disadvantages-of-using-inline-styles.aspx
[Accessed 25 november 2015].
No comments:
Post a Comment