Web Building
HOME Web Empty Site Web DatabasePHP
PHP Demo PHP Website PHP Styles PHP Database PHP Navigation PHP AjaxASP Classic
ASP Demo ASP Website ASP Styles ASP Database ASP Login ASP Security ASP Navigation ASP AjaxASP Web Pages
WebPages Demo WebPages Website WebPages Styles WebPages Database WebPages Login WebPages Security WebPages Navigation WebPages AjaxASP Web Forms
WebForms Demo WebForms Website WebForms Styles WebForms Database WebForms Navigation WebForms AjaxPHP - 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
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:
Site.css
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
}
h1
{
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
}
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
}
h1
{
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
}
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:
Footer.php
<p>© <?php echo date("Y"); ?> W3Schools. All rights reserved.</p>
Edit the Home Page
In your "DemoPHP" folder, edit the file named "Index.php".
Change the content to the following:
Index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Demo</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<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"); ?>
</div>
</body>
</html>
<html>
<head>
<title>PHP Demo</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<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"); ?>
</div>
</body>
</html>
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 (marked red), and an included footer.
Congratulations
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.
W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
