LO1; UNDERSTAND THE FUNDAMENTAL OF CASCADING STYLE SHEETS
UNIT 20 P1; EXPLAIN HOW HTML FILES ACCESS CSS
UNIT 20 M1; ASSESS DIFFERENT IMPLEMENTATION STYLE OF CSS
UNIT 20 M1; ASSESS DIFFERENT IMPLEMENTATION STYLE OF CSS
INTRODUCTION
For this task, I have been asked
to explain how HTML files access CSS. Within this blog, I will be talking about
a variety of things such as; HTML and CSS and their purpose in the development of
websites then I will be making a comparison and will contrast as to how HTML and CSS
work together in the development of websites.
HTML:HTML also known as Hypertext Mark-up language is used to structure websites which can contain a variety of things such as; symbols and codes that are used to create a web page. An example of the symbols used are, <h1> and <p>. The <h1> tag is used for headings on a web page which then can be formatted with CSS. The <p> tag is used to define a paragraph. Some of the tags come as pairs meaning that <p> goes at the start of the paragraph and </p> goes at the end of the paragraph to show that the paragraph has finished.
The purposes of HTML is to describe the web page and information so the
internet browser can display what the code
reads in a graphical form. The tags and code are used to create the layout and structure of
the web page that is being created.
The main three tags that used in HTML are as follows;
- <html> - is to create the beginning of the HTML.
- <head> - is used for other elements to be used within the <head>.
- <body> - is used for the content of the web page.
CSS:
Cascading Style Sheets is a language that is used to set the style of a web page. Also, when a web
designer creates a web page they are able to use three different CSS implementation styles which are inline, internal and external. CSS formats the structure and the layout of the entire web page.
If you use external Cascading Style
Sheets it can format multiple web pages at once. If you
needed to change the colour scheme on the web page you will be able to do so once on
the Cascading Style Sheet.
An example for CSS being used in
HTML are as follows;
If you named your style sheet “learnstyle.css”
you will then have to make sure that in the HTML file where it says “<link
rel="stylesheet" href="style.css">”, you will have to
change the section where it says “style.css” to “learnstyle.css”. If you do not
change the text, then the HTML and CSS will not link together so it will create
a blank web page.
COMPARISON/CONTRAST:
HTML is used to create the layout
and the structure on the web page. Whereas the Cascading Style Sheet is used
for things such as; the fonts size, font style, font family, the background colours
and positioning. Which both HTML and CSS and linked to create a functioning web page. It is best to use an external Cascading Style Sheet as you are able to
change multiple formats at once. For example, if you wanted to change the font size all
you have to do is change it once and then it will change all of the text on the
webpage to the same size.
Reference:
M1
https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
INTRODUCTION
For this task, I have been asked to assess different
implementations styles of CSS. Within this document, I will be talking about a
variety of things such as; the descriptions, advantages and disadvantages of
inline, internal, and external CSS embedding. This will be as follows;
There are three different ways
of implementing CSS code, these are as follows:-
- Inline
- Internal
- External
Inline; is when you can add the style attribute to each individual HTML element. What this means is that if you wanted to change something specific on a specific web page such as the background colour then all you should do is go to the section for that specific web page and find the where is says “background-color: blue;”.
An example of inline is as follows;
<h1 style=”color:blue;margin-left:30px;”>This is my heading.</h1>
The example above shows that the heading of the web page is the colour blue, with the margin to the left hand side, at the size of 30px. Where it says "This is my heading", the colour, the margin and the size will apply to it.
There are advantages and disadvantages of inline. First of all, the advantages of inline can be if you wanted to test one element on a web page, you can make a quick change to the background colour to see if the background colour works as part of the design. A disadvantage of inline is that it can be very time consuming. For example, if the client does not like the colour scheme of their web page, that is 15 web pages long and there are 10 headings per page, then the web designer will have to change the colour scheme on every heading on every web page.
Internal;
is when you do all the coding on the same page. which is within the div tags. Internal Cascading Style
Sheet is better for you to use if you are only creating a one-page web page.
When creating the web page as well doing the code on the same page you will
have to use a tag called <style>. An
example of internal can be:-
<head>
<style>
h1{
color:pink}
</style>
</head>
The example above shows that if you want to change the colour of the headings to pink, and you have a 50 page web page, you will have to change the colour of the heading a multiple of times.
There
are advantages and disadvantages of using internal CSS. The advantages of
internal coding is if you are a beginner in creating a web page, it is best
to start of small then work your way up to make a bigger and better web page. Another
advantage of internal can be that the web designer is able to test to see if
the HTML and the code have worked and if they haven’t worked then the web
designer is able to make this minor fixes.
A
disadvantage of internal embedding is the amount of time it takes for the HTML
to load onto the internet browser, in which this can make the user frustrated as it shouldn’t take that long to load. Another disadvantage of using
internal can be that the page size gets larger than normal this is
because it can help beginners who are creating their first ever web page.
The main disadvantage of internal CSS is that it can be very time consuming. The reason for this is because if you have a 50 page web page, and you wanted to change the font-family, you will have to change it 50 times as there are 50 pages.
External;
is when you create a style sheet outside of the HTML page. By creating an
external style sheet which automatically links to the HTML page, you can make
the one CSS page apply to many web pages. When you have opened up the external style sheet, there is already code showing that the external style sheet and the HTML are linked together. An example of this could be, if you wanted to change the size of the content of the web page, from 14px to 28px then you have to only change it once, which then will change it globally. After you have
saved the changes to the coding then you will see that the font size on the entire web page has changed.
An advantage of
external embedding is that the web designer has full control of all of the web
pages that are being used to create the website. If the client doesn’t like
something specific on the website, then all the web designer has to do is
change that specific thing once and it will change it on every web page that is
being used for the website. Another
advantage of external embedding is that it takes less loading time when going
through to the internet browser. The best internet browser to load the web
pages onto is Google Chrome as it is one of the fastest browsers to load.
A disadvantage of external style sheet is that it can take a long time to load onto the internet browser the first time around as the Cascading Style Sheet has to be downloaded.
An example of
code used to link to an external stylesheet is as follows.
<head>
<link
rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Reference:
