M1 - Assess different implementation styles of CSS
Introduction
CSS which is an abbreviation of (Cascading Style
Sheets),this is the code that formats the page, within CSS there are various
implementation styles and in this document I will be assessing the different
types of implementation styles of CSS and describing them and also covering the
advantages and disadvantages of the styles. There are three CSS implementation
styles which I will be describing and they are; Inline, embedded and external.
Inline
Inline style is an implementation style within CSS which is
utilized within the HTML part of the code. This is an implementation style
which is written in the tags of the code, inline style can be applied to any of
the code. This basically styles the text, for example <head
style="colour: blue"> </head> this means that the heading
will be colour blue and the "colour:blue" will be the inline style.
This style cannot be created in the style builder, this will require the
developer to go in the HTML part of the code and write it in. This style is
restricted to being used for just that part web page that they have been
utilized in, meaning that if this style was required elsewhere it will have to
be created again. The inline style when used overwrites the other
implementation styles of CSS which are the embedded and external.
The inline implementation style of CSS has its advantages
and disadvantages and one of the advantages is that it aids in testing of the
web page, due to the fact that the inline implementation functions only in the
part of the code that it has been implemented in means that if you run the web
page you could easily see if it's working on the text that it was used to style
and if it looks good then it can be used in the external style sheet.
Also inline CSS is very easy and fast to add. All that has
to be done is to implement the style within any of the various HTML element of
the code and the fact that it can be included within as much of the HTML
elements means that the styles of the text can vary. Which is very beneficial
in the creation of modern WebPages, it can be used to create emphasis.
The amount of time that will be spent trying to fix any part
of the style if there is a problem with it is short, due to the fact that it
will be found within the HTML source of where the styled text was embedded
onto. This means that it will be easily found and can just be tweaked to make
it work.
Inline style is easier to understand and this will be
beneficial to new developers, the reason being that the style is applied within
the same bit of the element that is being styled. When creating websites, the
purpose of the website in most cases is to provide information or service to
other people deriving the service or information and in order to deliver the
information or services the user will have to be able to access the website.
Using this style will enable the page to be accessible faster meaning that it
helps the webpage load up, as it is within the same coding and doesn't require
a new file being created for it.
With all of the good parts, now I will cover the flaws of
using the inline style. The inline style is harder to maintain and is more work
for the developer, especially when it comes to it being utilised within a big
project. Because they are used within individual parts of the HTML elements
which they wish to style, this means that they need to be present within every
single element that the style is needed on so if all the paragraphs need to be
in "Calibri font size 11" the inline style will have to be added to
every single <p> tag, which will cost the developer precious time.
Inline style cannot be used to style pseudo-elements and
classed. This is a disadvantage as it means that this method cannot be used to
do what the developer might want the page to do. For example it can't be used
to change the hover colour of a link on a webpage while the other styles can.
The inline style can only change the colour of the link but not style it when
the mouse is hovering over it like with external or embedded.
The inline CSS style could override certain part of the
element which was not meant to be styled, but it does this regardless due to
the fact that it is the most specific in the cascade. And this is a
disadvantage as if the reason for implementing the inline style was to change
the colour of one word; it could possibly change the colour of the whole
sentence which will affect the presentation on the actual webpage.
Embedded
Embedded style is another implementation style of the CSS
which is basically a style that is written at the head of the coding file. This
embedded style then styles all of the tags included in the page where the
embedded style was included in. With embedded style all of the styles for the
webpage are all specified at the head of the page, for example p {colour:blue}
being added to the top of the page will mean that all of the paragraph on that
webpage will be written in the colour blue.
The embedded style has its advantage and one of them will be
the fact that the styles only have to be declared once and this will be
beneficial when the website owner knows exactly how he/she wants the webpage to
be styled like as it will save time for the developer as all he has to do is to
declare the styles at the top of the page and it will style the rest of the
page.
Embedded style can style the hover colour unlike the inline
CSS which is a huge advantage that it has over the inline CSS, as this means
the site will look more appealing and it will aid with the usability of the
website as the user will know exactly what is happening and they will know when
their cursor is over the link.
The contents of the tags can be styled without the developer
having to add the style to each HTML element unlike the inline style. As once
the style is declared at the top of the page then it works across that web page
so no need for it to be added in individual HTML element.
Compared to inline CSS it will take longer to load up because
there is less HTTP requests and also
because of the page size increases meaning more things for the user to download
meaning it will take longer to download unlike the inline CSS.
A disadvantage of using embedded CSS in the creation of a
webpage is the amount of time that is taken to format the website. Using this
style of CSS will mean that this will have to be written on every page created.
Although it is much better than inline CSS which will take longer, it still
will be rewriting the code for the CSS once on each page created.
External
This is the type of CSS style that enables the developer to
change the entire webpage simply by changing one file. This works by referring
to the CSS style file if there are more than one webpage involved in the
website.
Using external CSS enables the developer to have full
control of the structure of the page which is beneficial as this means that the
developer could tweak anything he/she wants in order to meet the requirements
of the owner.
Unlike the other styles the external CSS style can be reused
on separate files which is an advantage as it saves time for the developer who
is creating the site, as styling the website won't have to include the
developer creating a new code for the style the code can be reused. This CSS
implementation style makes development a bit easier when it comes to work rate
because the developer won't have to write the code on every of the webpage
within the website, all the developer has to do is keep referring to the CSS
file that has already been created which is also to do with saving time.
This style of CSS makes loading of the page very fast
compared to the other styles, due to the fact that the styling will be done on
a separate file which basically decreases the file size of the webpage meaning
that there is less things to be downloaded by the user. This style of CSS aid
the developers to create WebPages that are high in content and are easily
readable meaning that it will be helpful when it comes to user deriving
information or services and it will also be helpful in the developers search
optimization. This will bring more traffic towards the website.
However just like the rest there are disadvantages and one
of them is that the download time is much longer, this is because this type of
CSS is in a separate file which means that the browser will have to request
access from the web server in order to get the CSS file and the request to web
server slows down the entire loading time.
Also if the number of styles required in the web page is of
a small amount, it will simply make the work complex. Using this makes the work
complex and also the time spent creating the webpage will be longer due to the
fact that the developer will have to navigate to another file in order to
access the CSS.
Bibliography
W3schools.com, (2015). CSS How to.
[online] Available at: http://www.w3schools.com/css/css_howto.asp [Accessed 26
Nov. 2015].
Quackit.com, (2015). Implementing
CSS. [online] Available at: http://www.quackit.com/css/tutorial/implementing_css.cfm
[Accessed 26 Nov. 2015].
Beginnersguidetohtml.com, (2015). External,
Internal and Inline CSS Styles. [online] Available at:
http://www.beginnersguidetohtml.com/guides/css/styles/external-internal-inline-styles
[Accessed 26 Nov. 2015].
Hey im Mindaugas Zdanavičius.
ReplyDeleteI am M17, gay, fit and looking for a BF.
Please hit me up if your interested.
Snapchat - whatacatman
Instagram - yourlocalmindy