You should add comments to style definitions to help you document
and maintain the style sheet over time. The comments should include
Information to remind yourself or others of what the code is doing. A
comment in CSS begins with a forward slash followed by an asterisk
(/*) and ends with an asterisk followed by a forward slash (*/).
/* A CSS comment */
The following example includes a comment that explains how the h1
style definition formats the <h1> tag in the XHTML document:
/* formats the h1 selector with a font that is teal, Arial
or Arial Rounded MT Bold (if not available, the default
sans-serif font), and uppercase */
h1
{
color: teal;
font-family: Arial,'Arial Rounded MT Bold',sans-serif;
text-transform: uppercase;
}
You can attach this .css document to every page in your Web site to
which you want to apply a style definition. You do this by linking the
Xhtml document to the external style sheet. This link informa-
tion is usually inserted below the ending </title> tag and above the
<style> section in your XHTML document. However, the link infor-
mation can be placed anywhere in the <head> section, except between
the beginning and ending tags of any element in the <head> section,
such as the <title> or <style> tags. The syntax to link the XHTML
document to the external style sheet is shown in the following code:
<link href = "filename.css" rel = "stylesheet"
type = "text/css" />
You would replace filename.css with the path and filename of
the external style sheet; the value of the rel attribute is always
"stylesheet", and the value of the type attribute is always
"text/css".
APPENDIX
A
If
your Web page does not appear in the browser with the styles that
you
declared in your external style sheet, check for an error in the
following:
•
Placement
of the link statement in the XHTML document
• Syntax of the link element
• Reference to the external style sheet (filename case, extension, and
location)
• Syntax of the CSS styles
• Commenting style in the external style sheet
635
Style Specificity
Sometimes, you may want one of the tags in your Web page to be
formatted with a different style from the one you defined in your
external style sheet. You can override the external style sheet with an
internal style sheet or an inline style. Table A-1 illustrates the order of
specificity for CSS styles.
Style
Inline
Internal
External
Table A-1
Application
Applies styles to individual selectors in
the body of the XHTML document
Applies styles to all like selectors in a
Web page
Applies styles to all like selectors in
the Web site
CSS style specificity
Specificity
Overrides styles declared in internal or
external style sheets
Overrides styles declared in the external
style sheet
Validating CSS Styles
Enter http://jigsaw.w3.org/css-validator in the location bar of your
Web browser to validate your CSS styles at the W3C CSS Validation
Service. If the Web page validates correctly, you will receive a message
that the document validates as CSS level 2.1. If there are errors in the
CSS styles, you will be given a results document that identifies the
source of the errors. Once the errors have been corrected, you can
revalidate the CSS styles.
Many resources on the Internet provide examples and tutorials that
explain the syntax, attributes, and values of XHTML and CSS.
If you are
using Firefox
and you have
installed the
Web
Developer Tool Bar
(https://addons.mozilla.
org/en-US/firefox/
addon/60), you can
select Tools | Web
Developer | Tools |
Validate CSS to validate
the CSS that is applied to
the displayed browser
document.
APPENDIX
Configuring
a
Personal
Web Server
Understanding
how to install and configure the software required for
creating
and delivering PHP scripts is considered a critical skill for
Web
developers. Even if you have access to a remote server running
Apache,
PHP, and MySQL, you may prefer to develop and test your
PHP
scripts on a local server before uploading them to the produc-
tion
environment.
PHP
can be executed on a variety of platforms, including Windows,
Linux,
and Mac OS. You can download and install a local Web server
running
the Apache Web server, the MySQL database management
system,
and the PHP scripting engine with open source packages,
referred
to as xAMP. The x will change depending on the operating
system.
The A, M, and P refer to Apache, MySQL, and PHP, respec-
tively.
You can install WAMP on a Windows computer, LAMP on a
Linux
computer, and MAMP on a Macintosh computer. These inte-
grated
packages make installing and configuring a Web server a less
technical
process than installing each of the applications individually.
B
Many
Linux
distributions
come
with
LAMP
already
installed
and
configured.
Installing
xAMP
All
of the xAMP packages are designed for easy installation on the
destination
system, although the details vary. The following instruc-
tions
explain how to install WAMP on a Windows computer. You
would
follow a similar process to install LAMP on a Linux machine
or
MAMP on a Macintosh platform.
Before
begin-
ning the instal-
lation
process,
ensure that
you have the appropriate
privileges or that you are
logged in as the system
superuser.
APPENDIX
B
To
install WAMP on a Windows computer:
1.
In
the location bar of your browser, enter http://www.wamps-
erver.com/en/download.php,
click the download link, and
select
Download WampServer. Click the Save button to save
the
executable file on any storage device. It should only take
a
few minutes to download the WampServer application.
When
the installation program has finished downloading, a
Download
Complete message appears and an icon represent-
ing
an install program is displayed on your storage device.
Double-click
the install program icon to begin the installation
process.
Click the Run button. If you have a previous version
of
WAMP installed on your machine, you may be prompted
to
delete the older version before continuing.
You
are welcomed by the standard setup screen, which
recommends
that you close all other applications before
continuing.
Click Next.
Read
the terms of the license agreement. If you accept the
terms,
click the “I accept the agreement” radio button. Click
Next.
By
default, WAMP will be installed in C:\wamp\. Selecting the
default
install location will make Web pages easily accessible
to
the Web browser. Click Next.
The
Select Additional Tasks option appears. You can click the
Create
a Quick Launch icon to add an icon to the system tray
on
your desktop each time Windows is launched, and you can
click
the Create a Desktop icon to add a program shortcut on
the
desktop, which you could use to restart the server if you
manually
exit the WampServer. Click Next.
Click
the Install button to begin the installation. The files will
be
installed in the C:\wamp\ folder. Click OK.
If
Firefox is installed on the Windows computer on which you
are
installing the WampServer, you will be asked if you want
to
use Firefox as your default browser with this application.
Click
Yes, because Firefox comes with some useful tools for
Web
design.
To
complete your e-mail configuration, you can leave the
Simple
Mail Transfer Protocol (SMTP) at the default location
of
“localhost,” enter your e-mail address at the e-mail prompt,
and
click Next.
637
2.
3.
4.
5.
6.
7.
8.
9.
APPENDIX
B
10.
638
If
you installed
the
WampServer
files to a loca-
tion other
than the default option
(C:\wamp\), use the
actual location in place of
C:\wamp\ in the following
steps.
Notice that
you can also
open the
WampServer
menu and
click the www directory
option to open the C:\
wamp\www\ folder.
You can use
either local-
host or
127.0.0.1
(the localhost
IP address) to refer to
your local computer. You
can simply enter “local-
host” or “127.0.0.1”
because most modern
Web browsers prepend
the hypertext transfer
protocol (http://) to the
URL. If index.php is in the
root Web folder, it is
selected as the default
page to display in the
browser.
You have completed the setup, and WampServer should be
successfully installed on your local computer. By default, the
“Launch the WampServer now” option is selected. You can
leave this option selected so you can walk through a short
overview of the WampServer tools that are available to help
you manage Apache, MySQL, and PHP.
Testing the xAMP Installation
After installing your xAMP server, you should test your configuration
to ensure that everything was installed correctly. Again, depending on
the platform, the actual steps will vary by system. The following steps
are for the Windows operating system, but they are illustrative of the
steps you would use on any system.
To test the local WAMP server:
1.
Navigate to the C:\wamp\ directory. You will see a number
of files and folders that WampServer requires to run the
application.
Double-click the www folder (the root Web folder on your
local machine). By default, the Web folder contains one PHP
file named index.php. Only files that are stored inside the
www folder or folders under it can be displayed in your Web
browser.
To display index.php in the browser, open Firefox and enter
http://localhost/index.php in the location bar.
The index page displays your server configurations that
specify what versions of Apache, MySQL, and PHP you are
running. The phpinfo() link in the Tools menu provides a
link to detailed information about your PHP installation. In
Chapter 1 of this book, you used the phpinfo() function to
display the server configurations on the remote server. The
phpMyAdmin option links to an open source tool written in
PHP to handle the administration of MySQL databases (dis-
cussed in Chapter 7). The SQLLitemanager option links to a
database manager that is an extension of Firefox.
2.
3.
4.
You can also
access “local-
host” in your
browser by
selecting
localhost from the
WampServer menu.
You may have noticed that when you selected the “Launch
WampServer now” option during installation, a small gauge-
shaped icon appeared in the system tray on your taskbar. When you
move your cursor over the WampServer icon, a Tooltip displays
“WAMPSERVER – server offline.” (The difference between “offline”
and “online” will be explained later.) For now, click the WampServer
icon and select Stop All Services from the Quick Admin section
