Different Implementation of styles of CSS
In this post I will be explaining the different ways that CSS can be implementated in a HTML file. There are a few main ways of implementing CSS into a HTML file, these ways are:
- Inline
- Embedded
- External
Inline means the CSS code is inside the tag. This means you will be able to edit whatever is inside of the tag. However, if you write up the inside the tag the CSS must be in lower case when written in. When using the inline method of implementing CSS to change the style of the writing, you would need to write it in the relevant tag that is containing the relevant stuff.
For example:
For example:
<h1 style=”color:blue;background-color:yellow;”>This is an example</h1>
Advantages of using the inline method is that it enables the user to add CSS code without the use of a style sheet.
Disadvantages of using the inline method is that you have to re-write the same piece of code of you want to have the same colour scheme for another part of your website. For example if you did the type of code above, only h1 would be affected. If you wanted all of your headings to look the same you would need to re-write the same code.
Another disadvantage is that it would be very hard to edit a certain piece of code in a fully coded website, as it would be difficult to find that piece of code amongst 500 other lines of code.
External
Disadvantages of using the inline method is that you have to re-write the same piece of code of you want to have the same colour scheme for another part of your website. For example if you did the type of code above, only h1 would be affected. If you wanted all of your headings to look the same you would need to re-write the same code.
Another disadvantage is that it would be very hard to edit a certain piece of code in a fully coded website, as it would be difficult to find that piece of code amongst 500 other lines of code.
External
External is using another page for adding CSS onto a webpage. This specific method requires the users to open up a seperate clear work sheet which they can do their CSS styling on that sheet using CSS coding. There must be a tag in the HTML code that links to the CSS style sheet. The HTML sheet requires the tag:
(<link rel="stylesheet" href="style.css">)
Once the CSS style sheet is saved as style.css, it creates a link between the two external work sheets.
The advantages of using external CSS is that all your CSS coding is in one place, meaning it is easy to find and edit as it colour coded.
External CSS sheets are able to edit more than one piece of code at a time, meaning if you wanted to change the text colours of all your current headings, you could.
Disadvantages of using a external CSS sheet are that you must be able to access it, and external style sheets are only used on large scale web designing, so it wouldn't be used on a small 3 page website as much as a website with 30 pages.
Embedded
Embedded CSS is when the CSS code is embedded into a HTML code. Embedded CSS is usually placed at the top of a HTML under it's own section, for example:
<head>
<style>
hr {color:black;}
p {margin-left:10px;}
body {background-image:url("background.jpg");}
</style>
</head>
<style>
hr {color:black;}
p {margin-left:10px;}
body {background-image:url("background.jpg");}
</style>
</head>
Advantages of using in embedded are that styling classes can be created in order to use identical styling for two separate entities. Such as a heading and some of the content. There is no download is required for external styling sheet because all styling and HTML is done in one worksheet.
Disadvantages of using in embedded are that embedded styling can't always control styling for multiple documents. The HTML worksheet can often get messy with a lot of coding and hard to understand.
References:
Internal CSS - 30/11/12 - http://bit.ly/67RTT
External CSS – 30/11/12 - http://bit.ly/67RTT
Incline CSS – 30/11/12 - http://bit.ly/67RTT
Internal CSS - 30/11/12 - http://bit.ly/67RTT
External CSS – 30/11/12 - http://bit.ly/67RTT
Incline CSS – 30/11/12 - http://bit.ly/67RTT
No comments:
Post a Comment