CHAPTER 3 - CASCADING STYLE SHEETS (CSS)
Inline
Document
External
Dealing with different devices
1
Content vs. Presentation
• Most HTML tags define content type, independent of
presentation.
exceptions? (e.g. <b> …… </b> for bold text and <i> ….. </i> for
italicized text)
• Style sheets associate presentation formats with HTML
elements.
CSS1: developed in 1996 by W3C
CSS2: released in 1998, but still not fully supported by all browsers
CSS3: specification still under development by the W3C, “completely
backwards compatible with CSS2” (according to the W3C)
• The trend has been towards an increasing separation of the
content of Web Pages from the presentation of them.
• Style sheets allow us to maintain this separation, which allows
for easier maintenance of Web Pages, and for a consistent
look across a collection of Web Pages.
2
Content vs. Presentation (cont.)
Style sheets can be used to specify how tables should be
rendered, how lists should be presented, what colors should be
used on the webpage, what fonts should be used and how big/small
they are, etc.
HTML style sheets are known as Cascading Style Sheets, which
can be defined at three different levels
1. inline style sheets apply to the content of a single HTML
element
2. document style sheets apply to the whole BODY of a
document
3. external style sheets can be linked and applied to numerous
documents, might also specify how things should be
presented on screen or in print
lower-level style sheets can override higher-level style sheets
User-defined style sheets can also be used to override the specifications
of the webpage designer. These might be used, say, to make text3
larger (e.g. for visually-impaired users).
CSS
CSS is a method of presenting data in a web page.
CSS offers web developers methods to control the
presentation of data with many more options offered by HTML
alone.
One of its major strengths is that a web developer can create
a style sheet (filename.css) save it with the other web pages
which are then linked to this style sheet.
A web developer can update or change one style sheet and
thereby alter the presentation of all the web pages on a web
site -- it is particularly useful in constructing large or corporate
web sites.
CSS has some limitations, the first is that not all browsers
support all the features so it is important to check your web
pages on several browsers or at least the one used by your
clients.
4
CSS Why use style sheets?
Style sheets in HTML allows us to
specify typography styles and spacing • Separate structure from
instructions for elements on a page. appearance
A style is a definition of fonts, colors, • Create consistent appearance
etc. • Ease of maintenance
Each style has a unique name: a • Increase accessibility
selector. • Apply additional effects
The selectors and their styles are • Reduce use of non-standard
defined in one place. tags
In your HTML contents you simply • Reduce web page file size
refer to the selectors whenever you
want to activate a certain style.
◦ For example: Instead of defining fonts
and colors each time you start a new
table cell, you can define a style and
then, simply refer to that style in your
table cells.
5
HTML vs CSS
HTML- focuses on marking up information
CSS- focuses on formatting and presenting information.
CSS are a series of instructions that specify how markup
elements should appear on a Web page.
This separation of structure from presentation simplifies
maintaining and modifying a document’s layout.
6
Compare classic HTML with CSS
<body><table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"
color="red"><b>this is line 1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"
color="red"><b>this is line 2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"
color="red"><b>this is line 3</b></font></td></tr>
</table></body>
7
Here in CSS Format
<head>
<style type=”text/css”>
.subtext { font-family: arial;
font-size: 10px;
color: red;
}
</style>
</head>
<body>
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>
</body>
8
How to specify a rule? CSS Structure
HTML Selector { property: value; H2 {color: blue}
property2: value2; etc }
P {font-size: 12pt;
p { font-family: times; …}
Note the punctuation: The property is
font-family: Verdana,
followed by a colon (:) and the value sans-serif;
is followed by a semicolon(;) }
Selector - on a simple level HTML
Multiple tags with same styling
element you wish to define.
Selectors are the names that you
give to your different styles you refer h1, h2, h3 {
to these selectors in the body of color: yellow;
your HTML document to apply these background-color: black;
styles. }
Property - attribute you wish to
chang Making a noticeable
Value - value the property takes background color is a fun
way to debug / identify
blocks. 9
CSS Structure cont...
The selector tells a browser which elements in a page will be affected by
the rule. There are a number of different types of selector.
The declaration tells the browser which set of properties to apply. There
are many different properties.
There are three types of Selectors.
1. HTML selectors – you define the properties for specific HTML tags,
p { color: blue }
h1, h2, h3, h4 { font-style: italic; }
Contextual selectors
A contextual selector matches when an element is an arbitrary
descendent of some ancestor element (i.e., it may be any generation
below the ancestor element). A contextual selector is made up of two or
more selectors separated by white space.
For example, consider the following rules:
H1 { color: red }
EM { color: red }
10
Contextual selectors cont…
Although the intention of these rules is to add emphasis to text by changing its
color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
• We address this case by adding a contextual rule to the previous two that sets
the text color to blue whenever an EM occurs anywhere within an H1:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
The third rule will also match the following fragment:
<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>
• A contextual selector may also contain attribute selectors.
• For example, the following matches any element with an "href" attribute inside a
P with class "myclass" inside any DIV. Note that the space after "myclass" is
essential: without it the selector would match a P with both a class and an
"href":
• DIV P.myclass [href]
2. Class Selectors (Selectors, properties, and values)
• Document (and external) stylesheet directives consist of a "selector"
together with one or more properties, and then values for those properties.
h1 { color: blue;
text-align: center}
.alert { text-decoration: underline;
color: red;
font-size: 150%;
}
ol a { background-color: yellow;
font-style: bold;
font-family: "Times New Roman";
} 12
Class selectors (cont….)
– used to define styles without referring to a particular tag, they can be used to apply the same
style to many different HTML tags
.ClassSelector ( Property: Value }
Class selectors are preceeded by dot followed by a name and then a series of property:
values.
Class selectors can have almost any name, usually you should pick on that describes it
function.
.redBold { color: red;
font-weight: bold;
}
This class function can then be used to apply this style to several different HTML tags in
the body of your web page
<p class=”redBold”>this text will be red and bold</p>
<h2 class=”redBold”>This text will also be red and bold </p>
Class selectors are used when you want to define a style that does not redefine an HTML
tag entirely it just modifies or enhances it.
13
PSEUDO CLASS Selectors
<html>
<head> pseudo-elements are used to
<title>Title for Page</title>
<style type="text/css">
address sub-parts of
a {color : red; elements
text-decoration : none;
font-size : larger} can specify appearance of link
a:visited {color : black}
a:active {color : orange}
in various states
:visited :active :hov
a:hover {color : blue} er
p:first-letter {font-size : large; can specify format of first line
color : white;
background-color : darkblue} in page or paragraph
:first-line
</style> can specify format of first letter
</head>
in page or paragraph
:first-letter
<body>
<p> Welcome to my Web page. I am so
happy you are here. Danger : changing the look of
</p>
<p> Be sure to visit
familiar elements is confusing
<a href="http://www.cnn.com">CNN</a>
for late-breaking news. Careful : current browsers do not
</p>
</body>
support all CSS2 features
</html>
14
PSEUDO CLASS Selectors (Cont…)
B.redBold { color: red; font-weight bold; }
• Pseudo class selectors include the specific
selector followed by a period and a name and
property: values – these property values can only
be applied to the specific selector you defined
Example:
<html> <head> <title>Classes</title>
<style type="text/css">
.redBold { color: red }
B.navy {color: navy}
</style>
</head>
<body>
<p class="redBold"> This text should be red and bold</p>
<h2 class="redBold"> This should also be red and bold</h2>
<p><b class="navy">This should be navy in color</b></p> When referring to a Class selector you
<p class="navy">This should not be affected</p> simply add the class to an HTML tag like
in the above example (class="classname")
<p>This is ordinary text</p>
do not include the period before the name.
</body> </html>
15
<div> and <span> Tags
Two tags are particularly useful in combination with class
selectors:
<SPAN> and <DIV>
Both are "dummy" tags that don't do anything in themselves.
Therefore, they are excellent for carrying CSS styles.
<SPAN> is an "inline-tag" in HTML, meaning that no line breaks
are inserted before or after the use of it.
<DIV> is a "block tag", meaning that line breaks are
automatically inserted to distance the block from the surrounding
content (like <P> or <TABLE> tags).
E.g. <div align="justify">
16
<div> and <span> Tags (cont...)
• Problem: font properties apply to whole elements, which are often too large
Solution: a new tag to define an element in the content of a larger element - <span>
The default meaning of <span> is to leave the content as it is (i.e. unchanged)
<p> Now is the <span> best time </span> ever! </p>
Use <span> to apply a document style sheet definition to its content
The <span> tag is
<style type = "text/css">
.bigred {font-size: 24pt; similar to other HTML
font-family: Ariel; color: red} tags, they can be nested
</style> and they have id and
... ...
<p> Now is the <span class="bigred"> class
best time </span> ever! attributes
</p>
Another tag that is useful for style specifications: <div>
Used to create document sections (or divisions) for which style can be specified
e.g., a section of five paragraphs for which you want some particular style
17
3. ID SELECTORS
ID selectors are used to define unique parts of a web page e.g.
footer, header, table or other unique element – each Id element
is unique and can only be used once.
The general syntax for an ID selector is:
#IDSelector {Property:Value;}
Id selectors are preceded with the # hash symbol and are
unique – in other words you can only have one specific id
selector on a web page.
They are used to define specific “boxes” on the page or layers.
18
<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>
<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS
LAYER 1<br>POSITIONED AT
100,100</td></tr></table>
</div>
<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS
LAYER 2<br>POSITIONED AT ID selectors are used
140,140</td></tr></table>
when you want to define a
</div>
</BODY>
style relating to an object
</HTML> with a unique ID.
19
Inline Style Sheets
<html>
<!–- Inline Style Sheets Example --> Using the style attribute, you
<head>
can specify presentation style
<title>Inline Style Sheets</title> for a single HTML element
</head>
within tag, list sequence of
<body>
<p style="font-family:Arial,sans-serif; property:value pairs separated by
text-align:right">This is a semi-colons
right-justified paragraph in a sans serif
font (preferably Arial), with some font-family:Courier,monospace
<span style="color:green">green font-style:italic
text</span>. font-weight:bold
</p>
font-size:12pt font-size:large font-
size:larger
<p>And <a style="color:red;
text-decoration:none;
font-size:larger;"
color:red color:#000080
href="page01.html">here</a> background-color:white
is a formatted link.
</p> text-decoration:underline
</body> text-decoration:none
</html> text-align:left text-align:center
text-align:right text-align:justify
vertical-align:top vertical-align:middle
vertical-align:bottom
20 text-indent:5em text-indent:0.2in
Inline Style Sheets (cont.)
<html>
<head>
<title>Inline Style Sheets</title> more style properties &
</head>
<body>
values
<p>Here is an image
<img src="VictoriaBldg.jpeg" margin-left:0.1in margin-right:5%
alt="image of Victoria Building" margin:3em
style="margin-left:0.3in; padding-top:0.1in padding-bottom:5%
margin-right:0.3in; padding:3em
vertical-align:middle;
border-style:double; border-width:thin border-width:thick
border-color:blue" />
border-width:5
embedded in text.
</p>
border-color:red
border-style:dashed border-style:dotted
<ol style="list-style-type:upper-alpha"> border-style:double border-style:none
<li> one thing</li>
<li> or another</li> whitespace:pre
<ul style="list-style-type:square;
whitespace:pre"> list-style-type:square
<li> with this</li> list-style-type:decimal
<li> or that</li> list-style-type:lower-alpha
</ul> list-style-type:upper-roman
</ol>
</body>
21
</html>
Inline Style Sheets (cont.)
<html>
<head>
<title> Inline Style Sheets </title> style sheets can be
</head> applied to tables for
<body> interesting effects
<table style="font-family:Arial,sans-serif">
<caption style="color:red;
font-style:italic;
text-decoration:underline">
Student data. </caption>
<tr style="background-color:red">
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body>
</html>
22
Document Style Sheets
• Inline style sheets apply to individual elements in the page.
using inline style directives can lead to inconsistencies, as similar elements are formatted
differently
e.g., we might like for all <h1> elements to be centered
inline definitions mix content & presentation
violates the general philosophy of HTML
• As a general rule, inline style sheet directives should be used as sparingly as
possible.
• Alternatively, document style sheets allow for a cleaner separation of content
and presentation.
style definitions are placed in the <head> of the page (within STYLE tags)
can apply to all elements, or a subclass of elements, throughout the page
23
Document Style Sheets
<html>
<head>
document style sheets ensure
<title>Document Style Sheets</title> that similar elements are
<style type="text/css">
h1 {color:blue; formatted similarly
text-align:center} can even define subclasses
p.indented {text-indent:0.2in}
</style> of elements and specify
</head> formatting
<body>
<h1> Centered Title </h1> p.indented defines subclass of
paragraphs
<p class="indented">This paragraph • inherits all defaults of <p>
• adds new features
will have the first line indented, but
subsequent lines will be flush. </p>
to specify this newly defined class,
<p>This paragraph will not be place class="ID" attribute in tag
indented.
</p>
note how "clean" the <body>
<h1> The End </h1>
element is
</body> 24
</html>
Document Style Sheets (cont.)
<html> <head>
<title> Document Style Sheets </title>
<style type="text/css"> document style sheets are
table {font-family:Arial,sans-serif}
caption {color:red;
especially useful in
font-style:italic; formatting tables
text-decoration:underline}
th {background-color:red}
</style> effectively separates
</head> content from presentation
<body>
<table>
<caption> Student data. </caption>
<tr><th> name </th>
what if you wanted to
right-justify the
<th> age</th></tr> column of numbers?
<tr><td> Chris Smith </td> <td> 19
</td></tr>
<tr><td> Pat Jones </td> <td> 20 what if you changed
</td></tr> your mind?
<tr><td> Doogie Howser </td> <td> 9
</td></tr>
</table>
25
</body> </html>
External Style Sheets
• modularity is key to the development and reuse of software
design/implement/test useful routines and classes
package and make available for reuse
saves in development cost & time
central libraries make it possible to make a single change and propagate
the changes
• external style sheets place the style definitions in separate files
multiple pages can link to the same style sheet, consistent look across a
site
possible to make a single change and propagate automatically
represents the ultimate in content/representation separation
26
Modularity & Style Sheets
<html>
<head>
<title>Title for Page</title> /* myStyle.css */
<link rel="stylesheet"
h1 {color : blue; text-align : center}
type="text/css" p.indented {text-indent:0.2in}
href="myStyle.css"
title="myStyle“ />
</head> Ideally, the developer(s) of a Web site
<body> would place all formatting options in an
<h1>Centered Title</h1>
external style sheet.
<p class="indented">This
paragraph will have the first All Web pages link to that same style
line indented, but subsequent
lines will be flush.</p> sheet for a uniform look.
<p>This paragraph will not be simplifies Web pages since only need to
indented. specify structure/content tags
</p> Note: no <style> tags are used in the
external style sheet
<h1>The End</h1>
</body>
</html> 27
Web rules of thumb (ok, my rules of thumb…)
• HTML and CSS provide lots of neat features,
but just because you can add a feature doesn't mean you should!
don't add features that distract from the content of the page
use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts
e.g. I find bright white text on a black background difficult to read
Consider the needs of visually impaired users of your website!!
use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of standard HTML buttons or links can slow access
don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained
don’t be annoying
e.g., lots of pop-up windows, excessive advertising, silly music
break a large document into several smaller ones or provide a menu for navigation
stick to standard features and test as many browsers as possible (and versions of the
same browser)
utilize style sheets to make changes easy & ensure consistency
28
