X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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: "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: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}

The CSS file above defines the styles to be used 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.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook