UNIT 20 P1 M1 - Explain how HTML Files Access CSS and Assess Different Implementation Styles of CSS



UNIT 20 P1 M1 - Explain how HTML Files Access CSS and Assess Different Implementation Styles of CSS


(You do not have to write as much as me) 

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.


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.
·         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
·         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


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.
·         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
·         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


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.
·         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
·         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


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. 


  1. While reading this page, I had my dog lick my testicles just to up the pleasure. Way better than my Dad.