Example style.css
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Here is an example of some CSS code in a seperate file called style.css.
Each html tag is referenced first and then followed by an open and closed parenthesis (curly bracket) Inside the brackets are a set attributes/properties of each tag that can be customised.
The body tag example will display the web page with a light-blue background.
The advantage of using a separate CSS file that is attached to the HTML file is that you can change the style of all pages with just one edit, rather then editing each HTML page separately.
You can change multiple attributes of each tag including colours, font, font size, padding, alignment etc.
Open a new text document
Save the file by clicking save
Click all files
Name the document with the following extension .css
Insert the following code in between the head tag of your html file. You will need to do this on each page of your website. Href should reference the exact file name of your CSS file which should be located in the same folder.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Each time your edit the CSS file, those changes will be passed over to each page where the above css file is linked.
Text Color - US Spelling
Color: red; - You can distinct names
Color: rgb(255, 0, 0); You can reference the binary RGB code
Color: #FF0000;
Font-Family
You can change the font type by call font-family
p {
font-family: "Times New Roman", Times, serif;
}
Background
Use Color as a background (notice american spelling)
body {
background-color: lightblue;
}
Image as Background - refer to file name in your images folder
body {
background-image: url("paper.gif");
}
Div tags divide your page into sections and is great way to customise the way your page looks for areas such as the title, footers, body and navigation. You can apply specific attributes to each division so that each division is unique.
Look at the example below:
Index.html
<div id = "area">
<p>This is a div area</p>
</div>
mystyle.css - Using a # tag to reference the div id and update the style in this section
#area{
color:red;
font-size: 20px;
}
A class is way of creating style on the same types of elements in different sections on your page.
For example you may want a paragraph to be a different color in one part of your page.
We reference the class id in the mystle.css by using a dot selector
index.html
<p class ="red">My sentence is red</p>
mystyle.css
p.red{
color:red;
}