style.css en style.php maken

Open style.css, die nog wel leeg is. zet daar een body, een container en een content in. Bijvoorbeeld dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
color: #4D4D4D;
font-family: Arial;
font-size: 0.8em;
line-height: 1.8em;
text-align: center;
background: #E6E6E6;
}

#container {
width: 800px;
text-align: left;
margin: 0px auto 0 auto;
background: #FFFFFF;
line-height: 1.0em;
}

#content {
float: left;
width: 700px;
margin: 10px 10px 0 10px;
padding: 0;
font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}


Dat is dus een simpel CSS template met alleen wat kleurtjes en plaatsing. Bij de laatste stap kun je dit aanpassen.

Nu style.php. In de volgende stap passen we het aan, maar eerst zetten we dit erin:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="nl" />

<title>Website titel</title>

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="container">
  <div id="content">
    <h1>Dit is mijn titel</h1><br>
    <br>
    <p>En dit is mijn tekst.</p>
    </div>
</div>
</body>
</html>


Je kan style.php eventueel nu nog .html opslaan, maar dat zal de volgende stap dan niet meer gebruikelijk zijn.

Volgende stap>>

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. style.css en style.php maken
  3. style.php en index.php PHPStyleren
  4. Een div toevoegen
  5. Uitbreiden

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.