Web Building - Adding Style (CSS)
Building a web site from scratch. Part II: Adding style (CSS).
What We Will Do
In this chapter we will:
- Create a CSS style sheet for the site
- Add a link to the style sheet in our pages
Create a CSS Style Sheet
In the demoweb folder, create a new file named site.css.
Put the following code inside the CSS file:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}
The CSS file above defines the styles to be used for:
- The HTML body element <body>
- The HTML element with id="main"
- The HTML heading element <h1>
Edit the Home Page
In the demoweb folder, edit the file index.html.
Change the content of the file to the following:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Try it Yourself »
The home page above, is a copy of the home page from the previous chapter.
We have added a link to a style sheet, and a <div id="main"> element to define a "section" in the content.
The changes are marked red.
Edit the About Page
To complete your work, do the same changes in about.html.
1. Add a link to the style sheet.
2. Add a <div id="main"> element.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Try it Yourself »
Read More
Read more about CSS in our CSS Tutorial.
