__________________________
____________________________
UNIT 20 P1 M1 - Explain how HTML Files Access CSS and Assess Different Implementation Styles of CSS
ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS
During the process
of website creation you would start with the basic HTML code, this can be seen
on most websites if you view there HTML code. However to make a website for today’s
society you need to dress it up. This is where CSS – Cascading Style Sheets,
can become the dresser and make a boring website be something to marvel and
enjoy, currently we are in CSS version 3 which is a much improvement from the
previous that can change a lot more. CSS is a better way of making websites
look better through the style sheets. Many web browsers have finally started to
support version 3 but still some are not fully supported in older versions or
other browsers. JavaScript is also used to make it more interactive,
but CSS is the foundation to making a website look and interact professionally. Implementing CSS is dependent on the creator because there are different implantations that a HTML code is able to access the CSS, each of the three ways: internal, external and inline have advantages and disadvantages as to why they are used.
but CSS is the foundation to making a website look and interact professionally. Implementing CSS is dependent on the creator because there are different implantations that a HTML code is able to access the CSS, each of the three ways: internal, external and inline have advantages and disadvantages as to why they are used.
Inline
This would be the
first implementation a web designer who is a beginner might use. This form of
CSS is placed within the HTML line depending on what you want it implement the
CSS on. To implement an inline CSS you have to use the style on the HTML and
you type out the CSS (<h3 style=”color: #00FF00”) and it is placed within
what you want to apply CSS to so if it’s a heading you place within the heading
HTML code.
Advantages:
·
Override
any other CSS so if you want to do something specific with a HTML then it can
be done
·
Changing
and applying CSS will only occur on the HTML tag it is placed with and so won’t
affect any other similar HTML
·
Easier
to test a code (troubleshooting) and a whole website in, especially when it
comes to debugging
·
For
very small websites and embedded email/blogs this can be the only or best
choice you have and it also is faster because not many elements are using this
type of CSS
Disadvantages:
·
IT will
only apply to the single HTML and is not able to work as a combination to work
will all the HTML
·
Very
time consuming to place each CSS on the HTML tags and can be difficult to find
if many are used
·
Override
any other forms of CSS therefore other CSS is affected if you have forgotten
about removing it
·
Although
a few inline CSS is fast, having many others on every single element will make
page loading slower because of the increase in file size
Embedded
Also called
internal it is an upgrade of what inline CSS implementation is. Except to place
this form of CSS you would need to place it within the page you want the CSS
and within the head tag which is found at the top, this means that page
specifically will obtain the CSS and any specific HTML tags that is been
chosen. It is also best that each HTML is named a certain way to ensure
specific CSS is implemented. To placed embedded CSS you use the Style tag
(<style></style>) and anything placed within those tags with the
appropriate way to CSS will be done so.
Advantages:
·
Any tag
that you want to implement CSS on the page can be done at once with a single
line of CSS rather than going to each separate one
·
All
browsers will be able to understand acknowledge the fact that there is embedded
CSS on some of the tags
·
No
extra download is needed for the style information to be read and used and
there is not to many requests needed for the CSS to load up
·
Any
element with anchor tags or has a link can be styled, this is not possible with
the use of inline CSS, this means creations like hover over colour or click
element can be done
Disadvantages:
·
File
size is larger due to the CSS being implemented on the page for all tags to be
affected
·
Only the
single page is affected by the CSS rather than the whole webpage, this can be
problematic if you need to style each page similarly
·
Pages
load slower with this type of CSS because of the added request it has to
perform to load up the CSS it can even be slower then inline if not many inline
CSS are used
External
Probably the most
professional for of applying CSS on a webpage, this is a separate file to apply
CSS to every single page on your website, this mean however you will need to
make sure tags are named correctly and efficiently. To make this CSS happen o
your website all you need to do is create separate style sheet which is saved
with the website folder. The CSS is then the same as external CSS however
within each spate page you need to link the style sheet for the CSS to occur (<link
ref=”stylesheet” href=”style.css”>) this should be placed in the head of the
page.
Advantages:
·
Every
single HTML tag is affected by the CSS when linked, this means all pages will
be done at once and make it easier to apply to all
·
You
receive a better search engine optimisation due to the scanner running quicker
over your website and also making it easier to scan because it won’t be
scanning through many codes rather than just the content
·
Making
it into a separate file is reducing the file size and making the loading times
faster
Disadvantages:
·
Te
extra file does mean it too needs to be uploaded and can take up a bit of time
for your website to be live
·
You
will need to carefully name each HTML tag so that specific CSS can be applied which
can be time consuming to do
·
To
import the style sheet can require a download which again means more time
wasted
Selectors
The uses of
selectors have become something that every web desire should learn and use when
creating their WebPages. CSS depending on which one is used will overall make
it be styled; the use of selectors allows the designer to have a specific CSS
styled to an element on the webpage. During the inclusion of CSS the selector
is placed with the element chosen to have CSS. Any HTML element that is picked
within the page will have the CSS applied, to specifically go into depth with
an element you will have to name it and apply it the same with the name
instead. Selectors are able to do many things; they are applied to an element
after the element name within braces. There are many options selectors are able
to do including changing the colour, font, font-size and many more. More than one
selector can be added to an element, this is done by using a semi-colon so it
gives you flexibility such as making a font size increase and adding colour
too.
Selectors also have
a key part in the CSS box model. It is here that the web designer can customise
the box model of any element on the Webpage. We already know that the box model
contains a margin, border, padding and content. With a selector, each of these
parts is customisable for example with the margin you can set the amount you
want, for border you can set the colour and so on. Selectors are exclusively
used for only external and embedded style sheets, for embedded it is places
within the head tags for external it is a similar look as embedded.
These three are
ways to add CSS to your website. CSS is something that is required on websites
to make it look that extra special, without it can be just boring texts that
goes down in a line. Each of these ways will make CSS happen on your webpage
but it depends on the creator. What an efficient website would choose is to use
external CSS for the basic reason that it will cover all of you webpage, and
for a professional website you will need to name each HTML tag accordingly. If
you must really have a specific CSS needed then you can use inline but again if
you wanted to with the correct name it can be done. The choice depends on the
website designer and how they feel they wish to implement their CSS.
While reading this page, I had my dog lick my testicles just to up the pleasure. Way better than my Dad.
ReplyDeletesounds very NSFW.
Delete