Search w3schools.com:

SHARE THIS PAGE

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

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;
}

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>&copy; <?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>

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.


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]