| OfficeRay 1.2 For Webforms & Web Applications |
Today we will learn another jargon which is Cascading Style Sheet, CSS.
CSS tried to solve the problem of having to format every web pages manually. For example, if you have a mini website with 15 html web pages, you have to do "select all" and choose the font and the sizes for every pages.
Then your co-worker told you that the font is too small. You ignored it first but after several complaints, you decided to increase the size and began opening all 15 web pages in your favourite web editor and do "select all" and choose a bigger size.
A few weeks later, your boss call you and tell you to use Arial instead of Times New Roman and there you go again. A few weeks later, the marketing department call you and.... you get the idea.
Saved by CSS
CSS allow us to keep the formatting in one place and there is no need to format every individual pages. You can leave the webpages untouched, and specify the format using CSS just once.
In the scenario above, when your co-worker asked you to increase the font size, you just need to open the CSS part, and change the size once only. The effect will be seen throughout whe whole website.
Again, when asked by your boss, you just need to replace Times New Roman with Arial once and walla... problem solved.
Sample 1: How to put CSS in php pages.
<?php
echo "<html>";
echo "<head><title>Title for Webform</title>";
echo "<style type="text/css">";
echo "body { font-size:10pt; font-family: Arial;}";
echo "</style>";
echo "</head>";
echo "<body>";
echo "Hello Web Form!";
echo "</body>";
echo "</html>";
?>
Note:
In the sample above, the body of your webpages (everything within the <body> and </body>) will be displayed with font size of 10pt and font family of Arial.
Lets make another example. What if I want the links in my webpages to be highlighted whenever I point the cursor over it? See example below.
Sample 2: Make links highlighted with light yellow whenever mouse is pointed over
(For your info, #FFFFFF is white and #FFFF40 is light yellow)
<?php
echo "<html>";
echo "<head><title>Title for Webform</title>";
echo "<style type="text/css">";
echo "body { font-size:10pt; font-family: Arial;}";
echo "a:link {background-color:#FFFFFF;}";
echo "a:visited {background-color:#FFFFFF;}";
echo "a:hover {background-color:#FFFF40;}";
echo "</style>";
echo "</head>";
echo "<body>";
echo "Hello Web Form!";
echo "</body>";
echo "</html>";
?>
Note:
In above sample, whenever you pointed the mouse over links, it will be highlighted with light yellow.
Now our style sheet is already several lines long. You might be wondering, how is this different than formating the web pages individually, page by page since the formatting is embedded within the <head> tags in every pages. See next example!
in Sample 3, instead of embedding the style in the webpage itself, we will create a new file name mystyle.css and move the formating into it. In the webpages, we will just point to the new css file so whenever the webpage is loading, it will read the content of this file and apply formatting accordingly.
Sample 3: Create a separate CSS file and link to it from every webpages
<?php
echo "<html>";
echo "<head><title>Title for Webform</title>";
echo "<link rel="stylesheet" type="text/css" href="mystyle.css" />";
echo "</head>";
echo "<body>";
echo "Hello Web Form!";
echo "</body>";
echo "</html>";
?>
Below is the content of mystyle.css
body { font-size:10pt; font-family: Arial;}
a:link {background-color:#FFFFFF;}
a:visited {background-color:#FFFFFF;}
a:hover {background-color:#FFFF40;}
a) Open Notepad, copy and paste the codes above from in blue background
b) Save as mystyle.css (Do not save as mystyle.txt or mystyle.htm or mystyle.php)
c) Save in the same directory as your php page.
d) Open your browser and test your php page.
That's all for today.