Implementing CSS within HTML
In this section, I will be explaining the different ways of implementing CSS within HTML. I will also be explaining the differences of the three methods and providing some detailed examples.
Methods
There are three methods of implementing CSS in web pages, which all allow you to change the look of your website or web page. Each method has different priorities to one and another, this causes the web page to use the last tag assigned and its properties. The three methods which are used in HTML are called:
-
Inline
-
Head
-
External
Inline
The Inline method allows you to set a certain tag and its properties within the HTML code but this really detracts the purpose of CSS, because CSS is used to set up multiple tags rather than one. This method overrides all other methods because its the last method which sets the tag. This method can waste time if you are applying a style to multiple web pages because every web page would have to be edited to reflect changes in previous pages.
Head
The head method is useful if you only have a few web pages but limits the amount of styles you can set to your web page. This method is embedded into the HTML through the <style></style> tags and is used in the <head> section of the html document. Multiple tags can be assigned within the style tags and are applied when the web page is loaded. This method is not recommenced to be used if there are many web pages (100+) because it will waste time.
External
The external method is useful if you have multiple web pages because you can set one style to all of your web pages without having to rewrite the style for every web page. Businesses usually use this sort of method because they can easily apply their style to 500+ pages. Tags are set up in a .css file and are later applied by the <link> tag within the web page (Head Section). Multiple styles sheets can be used on a single web page but some tags might override the ones in your style sheet if they are placed in the HTML tags.
Basic Examples
Inline
<p style="background: blue; color: black;">Blue background and black text.</p>
Head
<style type=”text/css”>
</style
External
<link rel="stylesheet" type="text/css" href="external.css" /> (Import CSS File)
external.css
p
{
color:red;
}
Detailed Examples
Inline
<p style="background: blue; color: black;">Blue background and black text.</p>
The inline method can only modify the current tag, instead of making multiple rules like the external or head methods. In this example, this specific paragraph is given the background colour blue and black text. This method is useful for editing certain tags in a web page but differs very much from the other methods by its way of applying css to web pages.
Head
In web page (index.html):
<style type=”text/css”>
h3
{
color: red; // Set the text to colour red.
text-align: left; // Set text aligned to left.
font-size: 8pt // Set the text size to 8pt.
}
</style>
<h3>My Test Page</h3> //Displays new header and using the new rules.
This method uses html to embed rules of css into a web page with the <style></style> tags. A tag can be modified by placing its name inside of the style tags and following by brackets, The brackets will be used to keep all the rules together. All the tags called h3 would be modified if a set of rules were given, however Ids can be used to represent certain tags, which I will explain later. When the page loads, CSS checks whether there are tags in the HTML code which are identical to the ones inside the <style></style>. If there is a matching tag(s), the list of rules are applied to the tag(s) and the result is displayed, when the page loads. This method is very different from the inline method because this method can apply multiple rules and embed itself inside the HTML code. This method is also slightly similar to the External method because they both can apply multiple rules.
External
Inside of external.css we would set up our tags and customize their properties.
P //Paragraph
{
font-family: Arial; //Set font style to Arial.
font-size: 10px; //Set font size to 10px;
color: red; //Set font colour to red.
}
Inside of our HTML file, we would use the <link\> tag to import our list of rules. We specify the type of sheet we are importing and it's type as well, as its location. Multiple Link tags can be used to import more style sheets which makes it flexible.
<link rel="stylesheet" type="text/css" href="external.css" />
This method stores the list of rules for each tag in the css file and can later be retrieved by using the <link/> tag. When the rules are imported, it does exactly the same procedure as the head method (Applying rules to certain tags from the css file). This method is used if you have more than one style sheet and has advantages over the head method e.g. Less code used in HTML files and more style sheets can used at once. This method is also very different from inline method because it incorperates many different functions than the inline method does.