PHP - Adding Style
Learn PHP by building a web site from scratch.
Part II: Adding CSS and a Standard Layout.
What We Will Do
In this chapter we will:
- Create a standard style sheet for the site
- Add a link to the style sheet in Index.php
- Add a standard footer to the site
Create a Style Sheet
In your web folder (DemoPHP), create a new CSS file named "Site.css".
Put the following code inside the CSS file:
font: "Trebuchet MS", Verdana, sans-serif;
border-radius: 0 0 4px 4px;
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
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>
Create an Include File
In your web folder (DemoPHP), create a new PHP file named "Footer.php".
Put the following code inside the file:
Edit the Home Page
In your "DemoPHP" folder, edit the file named "Index.php".
Change the content to the following:
<link href="Site.css" rel="stylesheet">
<h1>Welcome to W3Schools</h1>
<h2>Web Site Main Ingredients</h2>
<p>A Home Page (Index.php)</p>
<p>A Style Sheet (Site.css)</p>
<p>Include files (Header.php, Footer.php)</p>
<?php include("Footer.php"); ?>
Run example »
The home page above, is a copy of the home page from the previous chapter, with an added link to a style sheet, a <div> element with id="main", and an included footer (all marked red).
Edit the About Page
To complete your work, do the same changes in About.php:
1. Add a link to the style sheet.
2. Include the footer.
You have created your first PHP site, with a main page (Index.php), a common footer for all your pages (Footer.php), and a common style sheet (Site.css).
In the next chapters of this tutorial, we will add a database to the web site. And finally we will add navigation.
Thank You For Helping Us!
Your message has been sent to W3Schools.