8. Cascading Style Sheets:
An Introduction
Cascading
style sheets (CSS) specification, developed by World Wide Web Consortium (W3C),
provides a simple approach for separating the style (font, size, background,
layout and position, etc) of document from the content. Predefined style sheets
can be used throughout a page or Web site.
8.1
Styles and Style Definitions
In-Line
Style
<span> </span> tags
Acts as a container for text without applying any formatting of its own
STYLE Attribute can have many values, including:
font-weight
font-style
<span STYLE="font-weight: bold; font-style: italic" >
Text here
</span>
Example
8-1: An inline Style Sheets example.
<HTML>
<!-- inlinecss.html -->
<HEAD><TITLE>Inline Styles
Example</TITLE></HEAD>
<BODY>
<!-- Declare inline Styles
-->
<span STYLE="font-weight: bold">
Web Programming Language: HTML.
</span><BR>
<P STYLE = "font-size: 20pt">Web Programming
Language: HTML.</P>
<P STYLE = "font-size: 20pt; color: #FF0000">
Web Programming Language: JavaScript
</P>
<P>Web Programming Language: Perl.</P>
</BODY>
</HTML>
8.2
Global Style Definition
<style>
H1 {font-size: 24pt; font-weight: bold; color: red}
H2 {font-size: 16pt; font-style: italic; color: green}
span {font-weight: bold; font-style: italic}
</style>
Example 8-2: A global
style sheet example.
<HTML>
<!-- globalcss.html -->
<HEAD>
<TITLE>Global Style Sheets</TITLE>
<style>
H1 {font-size: 16pt;
font-weight: bold; color: red}
H2 {font-style: italic;
font-size: 24pt; color: green}
span {font-weight:
bold; font-style: italic}
</style>
</HEAD>
<BODY>
<span>Web Programming Language: JavaScript.</SPAN>
<H1>Web Programming Language: JavaScript.</H1>
<H2>Web Programming Language: JavaScript.</H2>
<H2 style="font-size: 36pt">Web Programming
Language: JavaScript.</H2>
</BODY>
</HTML>
8.3
Linked Style Sheets
H1 {font-size: 24pt; font-weight: bold; color: red}
H2 {font-size: 16pt; font-style: italic; color: green}
SPAN {font-weight: bold; font-style: italic}
Then, we place the following line within <HEAD> tags to refer to this file:
<HEAD>
<TITLE> TEST LINKED STYLE SHEETS </TITLE>
<LINK HREF="styles.css" REL="STYLESHEET" TYPE="text/css">
</HEAD>
Example
8-3: A linked style sheet example.
<HTML>
<!-- linkcss.html -->
<HEAD>
<TITLE>Link Style Sheets</TITLE>
<LINK HREF="styles.css" REL="stylesheet"
TYPE="text/css">
</HEAD>
<BODY>
<SPAN>Web Programming Applications.</SPAN>
<H1>Web Programming Applications.</H1>
<H2>Web Programming Applications.</H2>
<H2 STYLE="font-size: 36pt">Web Programming
Applications.</H2>
</BODY>
</HTML>
8.4
Supporting Inheritance
<STYLE>
SPAN {font-size: 16pt; font-style: italic; color: green}
B {font-size: 24 pt}
</STYLE>
Example
8-4: Inheritance style sheets example.
<HTML>
<!-- inhercss.html -->
<HEAD>
<TITLE>CSS Inheritance</TITLE>
<STYLE>
SPAN {font-size: 14pt;
color: blue; font-style: italic}
B {font-size: 24pt;
color: red}
</STYLE>
</HEAD>
<BODY>
<SPAN>SUNXYZ Co. <B>Web Site</B> is under
construction.</SPAN>
</BODY>
</HTML>
8.5 Supporting Classes
<STYLE>
B.large {font-size: 24pt}
B.small {font-size: 16 pt}
</STYLE>
<B CLASS="small"> </B> --- for small font size boldface
<B CLASS="large"> </B> --- for large font size boldface
Example
8-5: Class properties.
<HTML>
<!-- calss_css.html -->
<HEAD>
<TITLE>CSS Class Properties</TITLE>
<STYLE>
B.small {font-size:
16pt}
B.large {font-size:
20pt}
</STYLE>
</HEAD>
<BODY>
<B>SUNXYZ Co. </B><BR>
<B CLASS="small">SUNXYZ Co. </B><BR>
<B CLASS="large">SUNXYZ Co. </B><BR>
</BODY>
</HTML>
8.6 Cascading Styles
8.7
Dynamic Styles
<SPAN STYLE="color: green" ONCLICK="this.style.color='red'">
Click it!
</SPAN>
Activities