In a recent post, I mentioned that HTML was used to create the structure of a webpage (this thread can be located here). However, if we would just use HTML to code our website, we would get an ugly looking website and would be very unattractive for the viewer viewing your website. That’s where CSS comes in, CSS stands for Cascading Style Sheets and is used to style the appearance of an HTML document – this may include font colour, background colour, font-size, define sizes of images, and many more.
To use CSS, you can use one of the following methods; an external style – This is where you write CSS in a separate document under the file extension .css and then reference it within your HTML document. An internal stylesheet – this is when you create your CSS within an HTML tag <style></style>. Then we have inline styles – Inline style is done by adding the style attribute to the HTML element followed by CSS properties.
Examples of the above methods are down below.
External Style Method (Recommended):
To use CSS, you can use one of the following methods; an external style – This is where you write CSS in a separate document under the file extension .css and then reference it within your HTML document. An internal stylesheet – this is when you create your CSS within an HTML tag <style></style>. Then we have inline styles – Inline style is done by adding the style attribute to the HTML element followed by CSS properties.
Examples of the above methods are down below.
External Style Method (Recommended):
HTML:
<!-- Within the <head> tag.-->
<head>
<title>Hello World!</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
CSS:
h1, h2, h3, h4 {
color: red;
}
body {
background-color: grey;
}
HTML:
<!-- within the <head> tag-->
<head>
<style>
h1, h2,h3,h4 {
color: blue;
}
body {
background-color: yellow;
}
</style>
</head>
HTML:
<!-- within the HTML element tag -->
<body style="background-color: purple;"></body>
<h2 style="color: pink;"> Table </h2>
<h3 style="color: orange;">Ordered List</h3>
<h4 style="color: blue;">Unordered List</h3>
Last edited:
