Server Side Programming with PHP CPAN 542

Lecture 5: Cascading Style Sheets

Style sheets are a way to format HTML documents. The basic idea of CSS is to separate the contents of the document from the presentation of that document, letting you having more control over your document.

You can associate style sheets with your HTML documents in three ways:

You can use in-line style definition.
You can embed the style sheet in the document by defining it between the opening and closing head of the page (document level).
You can store the style sheets in a separate document and either link it or import it (external).

Cascading

You can combine more than one style in the same document. When the styles conflict with each other, there are two rules that apply:

The most specific style rule will be applied. That means the style that applies to a paragraph is more specific than the style that applies for all the document text.
If two styles are equally specific, then the style that occurs later is considered more specific.

In-line style will override document level, which in turn overrides the external style sheets.

The difference between liked and imported style sheets is that when more than one imported style sheets are used, the browser will merge them in one set of style rules for the document. Whereas, when more than one linked style sheets are used, the user will have the choice of the style sheet to use for a specific page.

Imported style sheets override linked style sheets, and they must be the first style declaration. If there are duplicate imported definitions then the last imported style sheet takes precedence.

CSS Rules

In order to use Style sheets, you must set the rules first, which is a way to tell the browser how to display a specific tag. The rule consists of a selector and a declaration. The selector is any HTML element and the declarations are a group of one or more pairs in the format attribute: value separated by semicolon. For example, if you want to set a rule stating that h1 should be of certain color and font:

h1 { color:”#ff5544” ; font-family:”Arial” }

Selectors can be grouped together, and the same rule apply for any of them as follows:

h1,h2,h3 { color:”#ff5544” ; font-family:”Arial” }

You can set the selectors rule to be applied only if the tags appear in a certain sequence, which is called Contextual. For example:

p b {color:”55ffaa”}

This means that both tags must appear together in the same sequence in order for this rule to apply.

Style Classes

Classes let you create several different styles for the same tag, each is distinguished by the class name.

In order to use a class, simply use a tag name, then a period and a class name, as in the following example:

p.first {font-style:italic; color=”#ff55ff”;}

and in the document, when you want to refer to that specific style :

<p class=first> this is paragraph </p>

You can have a generic class without it being associated to any specific tag, as follows:

.italic {font-style=italic}

then in the document

<h1 class=italic> this is first level header</h1>

<p class=italic> this text should be italic font</p>

Using Ids as classes:

Ids are used in the same way as classes except you use # before the class name, as follows:

#blue {color:red}

p#blue{color:red}

and when you refer to that in the document :

<h1 id=blue> this is red header</h1>

The class name in this case must be unique to exactly one tag in the document. You cannot legally re-use the class.

Examples

Example 1: inline.html

This is an example of using in-line Style sheets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<title>Using In-line Style sheets</title>
</head>
<body>
<h1 style="color:#ffaaff ; font-family:Arial">This header was
formatted in-line</h1>
<p style="background:#555555; font-family:Courier"<b>Using a style
sheet makes your Web site consistent.</b</p>
</body>
</html>
Example 2: embed.html

This is example of using embedded style sheets (Document level):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">

</style>
</head>
<body>
<h1>This first header was formatted using embedded CSS</h1>
<p<b>p and b tags must appear together in order to have the
effect of CSS</b</p>
</body>
</html>
Example 3:link.html

This is an example of using linked style sheets (External):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<title>Linked style sheets</title>
<link rel="stylesheet" href="linkedStylesheeets.css"
type="text/css" />
</head>
<body>
<h1>This first header was formatted using linked CSS</h1>
<p<b>p and b tags must appear together in order to have the
effect of CSS</b</p>
</body>
</html>

And the external style sheet file linkedStylesheeets.css has the following contents::

h1 { font-family:Arial;color:#00FFFF}

p b {color:#FF0066;font-family:Courier}

Example 4: link1.html

This is another example of using linked style sheets (External):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<link rel="stylesheet" href="ext2.css" type="text/css" />
<title>Some Links</title>
</head>
<body>
<h1>Here is a page formatted externally.</h1>
<h2>The page contains tables.</h2>
<h3>Inside the tables, you will find links.</h3>
<h4>The links are also formatted externally.</h4>
<table border="1" width="100%">
<tr>
<td width="50%" rowspan="2">
<p align="center"<u>Some Links</u</p>
<p<a href="
<p<a href="
<p<a href="
</td>
<td width="50%">This table is split into two columns. The first
spans two rows and
<p>the second column has two cells.</p>
</td>
</tr>
<tr>
<td width="50%"<img border="0"
alt="this is an image of a dragon" src="img1.gif" width="177"
height="123" /</td>
</tr>
</table>
</body>
</html>
and ext2.css is:

a:link {color: rgb(255,204,0);}
a:visited{color: rgb(153,204,204); }
a:active {color: rgb(102,255,0);}
body {font-family: Garamond, Times New Roman, Times;background-color: rgb(51,102,204); color: rgb(255,255,153);}
table {table-border-color-light: rgb(153,255,204);table-border-color-dark: rgb(0,0,51); }
h1, h2, h3, h4, h5, h6{font-family: Verdana, Arial, Helvetica;}
h1 {color: rgb(255,204,0);}
h2 {color: rgb(153,255,51); }
h3{color: rgb(0,255,204); }
h4{color: rgb(255,204,0);}
h5{color: rgb(153,255,51);}
h6{color: rgb(0,255,204);}

Example 5: import.html

This is example of using imported Style Sheets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<title>Imported Style Sheets</title>
<style type="text/css">

</style>
</head>
<body>
<h1>This first header was formatted using imported CSS.</h1>
<h2>This is level 2 header.</h2>
<p<b>p and b tags must appear together in order to have the
effect of CSS</b</p>
</body>
</html>
Example 6: mult.html

This is example of using imported Style Sheets and in-line Style Sheets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<style type="text/css">

</style>
<title>New Page 1</title>
</head>
<body>
<h1>This is page header 1.</h1>
<h2>This is page header 2, formatted on the document level.</h2>
<p>This paragraph is formatted on the document level.</p>
<p</p>
<p style="background:#FF55FF ; font-family:Courier;color:#005500;">
This paragraph is formatted in-line.</p>
<p<a href="
<p<a href="
</body>
</html>

and ext.css

a:link {color: rgb(0,51,204); }
a:visited {color: rgb(51,153,102); }
a:active {color: rgb(255,153,0);}
body { font-family: Arial, Helvetica; background-color: rgb(255,255,204);
color: rgb(102,51,153);}
h1 {color: rgb(102,51,153);}
h2 {color: rgb(255,102,153); }
p { font-family: Times New Roman; color: #0000FF; font-weight: bold }

Example 7: class.html

This is an example of using classes in Style Sheets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<style type="text/css">

</style>
<title>New Page 4</title>
</head>
<body>
<h1>This is a normal header.</h1>
<h2 id="blue">This is second level header.</h2>
<p class="first">This paragraph is formatted using a class called
'first'.</p>
<p class="second">But this paragraph is formatted using a class
called 'second'.</p>
</body>
</html>

and class.css is:

h1{ color: #FFFF00; font-weight: bold; border-style: solid; border-color: #99CCFF ; text-align:center}
#blue{ color: #000080 }
p.second{ color: #FF00FF; font-style: italic }
p.first{ font-family: Arial; color: #00FFFF; text-align: Left }