There are two ways to setup styles within HTML. The first is to include all of the CSS style information in each separate HTML page. The other is to include a link in the <head> section of each of the HTML pages to a master stylesheet that controls the overall look of the website. We will look at the second option, as it is a more scaleable solution. Once the Stylesheet is linked to the page, you can describe any element of the HTML page / create new elements and use them in the HTML page.
Linking the Stylesheet
We link to the style sheet by using the HTML <Link> element within the <head> section of the page. Create a new file and save it any name of your choice ending in .css. I will be assuming we use ‘site.css’ and save it within the same directory as the HTML file. The head section of the HTML page now should look like
<head>
<title>My Website</title>
<LINK REL=StyleSheet HREF=”site.css” TYPE=”text/css”>
</head>
Our website is now connected to our stylesheet
CSS Syntax
HTML elements can be styled at any point within a CSS file, in any order. You start with the name of the element you wish to describe. In the example below, I will be styling the body of my HTML page. Any text within the brackets will be applied to the <body> element within the HTML page. In the below example, any text in the body will be aligned in the center of the page. I have also set the background color of the website to black, and the text color to white. The colours are represented in Hexadecimal format, which I may write a post on in the future. For now just know that every color has a Hexadecimal numbered representation. The below is the text contents of my site.css file.
body
{
text-align: center;
color:#FFFFFF;
background-color:#000000;
}
As you can see every line within the brackets is terminated with a semi-colon.
[...] CSS Syntax / setting up a style sheet [...]