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.
- Allowing multiple
style sheets to affect one document
- It is possible that
conflicts can come up and the style referenced last generally takes
precedence
8.1
Styles and Style Definitions
In-Line
Style
- A style applied to a
particular tag on a Web page
- For formatting
individual elements
<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
- Embedded as part of
the HTML document
- Defined with
<style> declaration block
- Can be kept in a file
outside the document
<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>
- After the declaration,
we will use <H1>
</H1>,
<H2> </H2>, and
<span> </span> as new style definitions
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
- Used for control
styles across several pages or across an entire Web site
- Require a style
definition file that contains style definitions such as the three lines as
shown below and save it as "style.css". Note that the
<style> </style> tags are not included in the
"style.css"
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
- Defining a new style
that will include all properties of defined through <SPAN>, but with
a different font-size
<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
- New classes can be
defined
- For example: <B>
can be defined for different sizes
<STYLE>
B.large {font-size: 24pt}
B.small {font-size: 16 pt}
</STYLE>
- We then use <B>
</B> ---- for standard boldface
<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
- Allowing multiple
style sheets to affect one document
- It is possible that
conflicts can come up and the style referenced last generally takes
precedence
8.7
Dynamic Styles
- Allowing the style to
be change at any time
- For example:
<SPAN STYLE="color: green" ONCLICK="this.style.color='red'">
Click it!
</SPAN>
Activities