ok,what do we need for that
same old equipment (text editor,php server,a browser)
important note:: this tutorial is about css,php is just another part here ... css can be used also for good old html pages too
why do I need css?
css is a style information index for your site, one css file can be used for any number of pages in your site
(this could save you some space if you have a big site)
besides -of course- all your pages will look alike ,with a uniform style sheet
ok let's go for it
how do I use a css?
this should be the last thing to ask about ,but as it's the easiest part ,we're gonna see it first and then go for the longer and harder parts
to use css you can do one of the following
in your html page under the head tag insert the following
[HTML]<LINK REL="StyleSheet" HREF="style.css" TYPE="text/css">[/HTML]
or
[HTML]<style type="text/css"><!--
your css codes here
//--></style>[/HTML]
the first one is for including an external css file(which is way more useful) and the second one is for including internal css codes (which is useful too)
Let's stop here a little .... If I use css ,do all my pages and all their elements have to look the same?
of course not,you can override the default css values with your own
there's kinda priority level that control this issue
least priority is the browser defaults (i.e. the default configuration)
higher priority for external stylesheet (e.g. file.css)
higher priority for internal stylesheet (i.e. <style>)
highest priority for element style (e.g. <font face="bla bla" color="blo blo">)
so how do css look like?
here's an example
[HTML]
P{
FONT-FAMILY: MS Sans Serif;
FONT-SIZE: 11px
}[/HTML]
note that .. this formula is common in either external and internal stylesheet (can be used in both)
so let's make the page of the 1st php lesson in a new way
here we're gonna make two more pages,header.php and footer.php, this is gonna be cool
so the index.php becomes
[PHP]<?
$go4it=$_GET['go'];
require("./header.php");
switch($go4it){
case "support":
require("./files/support.html");
break;
case "purchase":
require("./files/purchase.html");
break;
default:
require("./files/default.html");
}
require("./footer.php");
?>[/PHP]
header.php contains the css code
[HTML]<head>
<title>hello world</title>
<style type="text/css">
p{
align:center;
color:blue;
font-family:Courier New;
font-size:16pt
}
h1{
font-family:Comic Sans MS;
color:red;
font-size:48pt
}
</style>
</head>[/HTML]
if you want to understand the index.php page go to the php lesson it's all about it
let's talk about header page a little
of course you know the html tags head and title, the interesting one here is style, I decided to use internal css codes here ,let's get to it
line 4 :: p{
this is css's way to affect every paragraph on the page,(p) is considered as a class, so each element in the page will have the properties of the class unless given a new set of properties.
line5 :: align:center;
sets the default alignment of paragraphs of the page ,can have values(center,right,left)
line 6 :: color:blue;
default color of paragraphs ,can be set using standard names of colors or hex codes (e.g. color: #0000ff;)
line 7 :: font-family:Courier New;
default font of paragraphs, this can have any valid font name
line 8 :: font-size:16pt
default font size of paragraphs, can be set to a bunch of different values
****-small,x-small,small,medium,large,x-large,****-large Sets the size of the font to different sizes, from ****-small to ****-large;Default value: medium
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size
% Sets the font-size to a % of the parent element
or simply, a number and a unit e.g. 10px (units can be :: inch,cm,mm,px[pixel],pt[point],pc[pica])
inch=2.54 cm
mm=0.1 cm
px=relative to your screen size and resolution
pt=1/72 of an inch
pc=12pt
Notice that ,as this line have the last property of the paragraph element ,it's not followed by a semicolon, i.e. semicolon only separates the properties of a single element IT'S NOT A LINE ENDING SIGN.
h1 has similar properties to those of p so, you got it,they are identical (the properties,not the objects)
next chapters,there will be more explanations to more css usage and functionalities
and of course,for any Q's,I'm here
