Cascading Style Sheets (CSS) : World Wide Web Technology

Cascading Style Sheets (CSS)
World Wide Web Technology

Fashions fade, style is eternal.
Yves Saint Laurent
Objectives
 To:
– control appearance of a Web site by style sheets
– use a style sheet to provide uniform appearance
– use the CLASS attribute to apply styles
– specify element backgrounds and colours
– use the box model to control margins, borders
and padding
– separate content & presentation
Cascading Style Sheets
 Allow the specification of the style of the
page separately from the structure and
content
– spacing, margins, fonts
– the look and feel
 Allows better management
 Makes changing style easier
Inline Styles
 <HTML><BODY>
<P>Some Text - just plain</P>
<P STYLE=“font-size: 20pt”>Some

more text</P>
<P STYLE=“font-size: 20pt; color:
#0000FF”>And even more text</P>
</BODY></HTML>
Inline Styles
 Each CSS property is followed by a
colon then the value of the attribute
 Properties are separated by semicolons
 The STYLE attribute allows the
specification of a style property
The STYLE Element
 In the HEAD section of the document styles
may be applied to the whole document by
using the STYLE element (not attribute)
 The style sheet begins with
– <STYLE TYPE =“text/css”>
– The TYPE attribute specifies the MIME type -
standard for specifying the format of content -
text/html, image/gif, text/javascript
Example:
<HEAD>
<TITLE>Style Sheets</TITLE>

<STYLE TYPE = "text/css">
EM { background-color: #8000FF;
color: white }
H1 { font-family: Arial, sans-serif }
P { font-size: 18pt }
.blue { color: blue }
</STYLE>
</HEAD>
<BODY>

<H1 CLASS = "blue">A Heading</H1>
<P>Here is some text.</P>
</BODY>
</HTML>
The Style Sheet
 The body of the style sheet (red) declares
the CSS rules for this sheet
 Rules for EM H1 and P elements are
declared
 These elements will be modified in the
specified manner
 Each rule body begins and ends with a
curly brace { }
Style Class
 A style class named blue is declared
 Class declarations are preceded with a
period
 The rules have the same format as
inline styles
– property: value; property: value
Properties
 Background-color
 font-family specifies the name of the font
– Arial, the second value sans-serif is a
generic font family - used if Arial is not
found on the system
 font-size
– specified in pt
– also relative - xx-small .. xx-large
CLASS
 The CLASS attribute applies a style
class
 Example: The .blue class
– <H1 CLASS=“blue”> A Heading</H1>
– both the properties of H1 and the .blue
style class
Inheritance
 Stylesheet rules are inherited from parent to
child
 Example: B {color: blue}
 What does the browser do with the following
– <B>All Web pages should use
<I>CSS</I></B>
 There is no rule set for the <I> tag but because
it occurs within a <B> tag with a rule set. The
child displays in blue.
Specificity
 <H1>All Web pages should use
<EM>CSS</EM></H1>
 In this case the child element has a rule
of its own and this rule is in conflict with
the rule of the parent
 The rule of the child is more specific
and overrides the style set for <H1>
Another example of specificity
<HTML>
<HEAD>
<TITLE>More Styles</TITLE>
A.nodec { text-decoration: none }
A:hover { text-decoration: underline;
color: red;
background-color: #CCFFCC }
LI EM { color: red;
font-weight: bold }
UL { margin-left: 75px }
UL UL { text-decoration: underline;
margin-left: 15px }
</STYLE>
</HEAD>
Example cont.
<BODY>
<H1>Shopping list for <EM>Monday</EM>:</H1>
<UL>
<LI>Milk</LI>
<LI>Bread
<UL>
<LI>White bread</LI>
<LI>Rye bread</LI>
<LI>Whole wheat bread</LI>
</UL></LI>
<LI>Rice</LI>
<LI>Potatoes</LI>
<LI>Pizza <EM>with mushrooms</EM></LI>
</UL>
<P><A CLASS = "nodec" HREF = "http://food.com">Go to the Grocery
store</A></P>
</BODY>
</HTML>
The result
The result while hovering
Discussion
 A.nodec {text-decoration: none}
– applies the text-decoration property to all A
elements whose CLASS attribute is set to
nodec
– default is to underline but here it is set to none
 A:hover {text-decoration: underline;
color: red
background-color: #CCFFCC}
Pseudo-class
 The code specifies a style for hover
which is a pseudo-class
 Pseudo-classes give the author access
to content not specifically declared in the
document
 The hover pseudo-class is dynamically
activated when the user moves the
mouse cursor over an A element
LI EM is different from LI, EM
 LI EM { color: red;
font-weight: bold }
– declares a style for all EM elements that are
children of LI elements
 LI, EM would declare the style for both
 UL UL {text-decoration: underline;
margin-left: 15px }
– specifies that all nested lists will be underlined
and have a left-hand margin of 15 pixels
Length measurements
 Px - pixel - relative - screen resolution
 em - the size of the font - relative
 ex - x height of the font
 in - inches - absolute
 pt - 1 pt = 1/72 in
 pc - 1 pc = 12pt
Linking External Style Sheets
 External linking of style sheets can give the whole
site a uniform look
 Only need to modify a single file to make changes to
the whole site
 The external style sheet is referenced by using the
<LINK> tag in <HEAD>
– <LINK REL = "stylesheet" TYPE = "text/css" HREF =
"styles.css">
 LINK a specifies a relationship between the current
document and another using the REL attribute
Example: External SS
<HTML>


<HEAD>
<TITLE>Importing style sheets</TITLE>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css
</HEAD>
<BODY>
<H1>Shopping list for <EM>Monday</EM>:</H1>
<UL>
<LI>Milk</LI>
<LI>Bread
<UL>
<LI>White bread</LI>
<LI>Rye bread</LI>
<LI>Whole wheat bread</LI>
</UL></LI>
<LI>Rice</LI>
<LI>Potatoes</LI>
<LI>Pizza <EM>with mushrooms</EM></LI>
</UL>
<A HREF = "http://food.com">Go to the Grocery store</A>
</BODY> </HTML>
Notes
 Declare the linked document to be a
stylesheet
 TYPE attribute is used to specify the
MIME type as text/css
 URL for the style sheet is provided by
the HREF attribute
Note
 Other relationships that can be specified
between documents are next and
previous
 Allow a whole series of documents to be
linked
 In IE Print all linked documents uses
this info
Positioning Elements
 Usually positioning was up to the
browser in HTML
 CSS has a position property and a
capability called absolute positioning
Absolute positioning
<BODY>
<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px;

left: 0px; z-index: 1">
<H1 STYLE = "position: absolute; top: 50px; left: 50px;
z-index: 3">Positioned Text</H1>
<IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px;
left: 100px; z-index: 2">
</BODY>
Positioning
Positioning
 Specifying an element’s position removes it
from the normal flow of elements on the page
 Positions the element according to distance
from top, left, right or bottom margins of its
parent element
 I.gif is 0 pixels from top and left margins of the
BODY element
 z-index attribute allows layering of overlapping
elements (1 back - 2 front)
Absolute positioning
 Where does the H1 element go.
 Layer 3 in front of both
Relative positioning
 Setting the position property to relative
will first lay out the element on the page,
then offset the element by the specified
top, bottom, left or right values
 Relative positioning keeps elements in
the general flow of elements on the
page
Relative Positioning
<HEAD>
P { font-size: 2em;
font-family: Verdana, Arial, sans-serif}
SPAN { color: red;
font-size: .6em;
height: 1em }
.super { position: relative;
top: -1ex }
.sub { position: relative;
bottom: -1ex }
.shiftl { position: relative;
left: -1ex }
.shiftr { position: relative;
right: -1ex }
</STYLE></HEAD>
Relative positioning
<BODY>
<P>
Text text text text <SPAN CLASS = "super">superscript</SPAN>
text text text text <SPAN CLASS = "sub">subscript</SPAN>
text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN>
text text text <SPAN CLASS = "shiftr">right-shifted</SPAN>
Text text text text text
</P>
</BODY>
</HTML>
Display
Backgrounds
 CSS allows more control over background
than HTML attributes
 <STYLE TYPE = "text/css">
BODY { background-image: url(watermark.gif);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed }
P { font-size: 2em;
color: #AA5588;
text-indent: 1em;
font-family: Arial, sans-serif }
.dark { font-weight: bold }
</STYLE>
Backgrounds
 background-image property specifies the
URL of the image to use
– can also specify background-color in case
the image is not found
 background-position property positions
image on page
 background repeat property controls tiling
no repeat, repeat, x-repeat or y-repeat
Backgrounds
 Background-attachment: fixed fixes the image
in the position specified by background-
position
– scrolling the browser window will not move the
image - default scroll moves the image
 text-indent: 1em indents the first line of text
 .dark {font-weight: bold}
– font weight specifies the boldness - bold, normal,
bolder, lighter
SPAN, DIV
 Font-style - none, italic or oblique
 SPAN is a generic grouping element which
does not apply any formatting to its contents
– Its use is to apply styles or ID attributes to a
block of text. It is displayed inline
 DIV element also applies no inherent styles
but is displayed on its own line.
– A block-level element
DIV
<HEAD>
<TITLE>Box Dimensions</TITLE>
DIV { background-color: #FFCCFF;
margin-bottom: .5em }
</STYLE></HEAD>
<BODY>
<DIV STYLE = "width: 20%">Here is some
text that goes in a box which is
set to stretch across twenty precent
of the width of the screen.</DIV>
<DIV STYLE = "width: 80%; text-align: center">

Here is some CENTERED text that goes in a box
which is set to stretch across eighty precent of
the width of the screen.</DIV>
<DIV STYLE = "width: 20%; height: 30%; overflow: scroll">

This box is only twenty percent of
the width and thirty percent of the height.
What do we do if it overflows? Set the
overflow property to scroll!</DIV>
</BODY>
Result
Notes
 <DIV STYLE = "width: 20%; height: 30%;
overflow: scroll">
– width is 20% and height 30% the overflow may
exceed the boundaries so the overflow property is
set to scroll
Text Flow
 Elements normally appear in the order that
they do in HTML source
 Floating allows movement of an element to
one side of the screen
 Other content will flow around the floated
element
 Also each block-level element has a box drawn
around it - box model - adjustable properties
Example: Floated text
<HEAD>
<TITLE>Flowing Text Around Floating Elements</TITLE>
DIV { background-color: #FFCCFF;
margin-bottom: .5em;
font-size: 1.5em;
width: 50% }
</STYLE></HEAD>
<BODY>
<DIV STYLE = "text-align: center">Centered text</DIV>
<DIV STYLE = "text-align: right">Right-aligned text</DIV>
<DIV STYLE = "float: right; margin: .5em">This is some floated
text, floated text, floated text, floated text.</DIV>
<P>
Here is some flowing text, flowing text, flowing text.
</P>
<P><DIV STYLE ="float: right; padding: .5em">This is some flo
text, floated text, floated text, floated text.</DIV>
<SPAN STYLE = "clear: right">Here is some unflowing text.
Here is some unflowing text.</SPAN>
</P>
Result .5em margin
.5em padding
Text flow and the Box Model
 Note that the DIV elements are 50% width
 STYLE = “text-align: center” allows the
text inside an element to be aligned left,
center, right or justify
 STYLE=“float: right; margin: .5em”>
– floats the DIV element to the right side of
screen - margin specifies the distance
between the element and any text outside.
Text flow and the Box Model
 Can set margins for individual sides by using
margin-top, margin-right etc
 Padding is the distance between the content
inside the element and the edge of the element
 padding-top, padding-right etc.
 The flow of text around a floated element can be
interrupted
– <SPAN STYLE=“clear: right”>
 Box model applies to DIV, P
Borders
<HEAD>
BODY { background-color: #CCFFCC }
DIV { text-align: center;
margin-bottom: 1em;
padding: .5em }
.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }
</STYLE></HEAD>
Borders
<BODY>
<DIV CLASS = "thick groove">This text has a border</DIV>

<DIV CLASS = "medium groove">This text has a border</DIV>
<DIV CLASS = "thin groove">This text has a border</DIV>
<P CLASS = "thin red inset">A thin red line...</P>

<P CLASS = "medium blue outset">And a thicker blue line</P>
</BODY>
</HTML>
Borders
User Style Sheets
 Users have the option to define their own
user style sheets to format pages based on
their preferences - visually impaired
 Possible conflicts between user styles and
author styles
 Most conflicts are resolved by using
relative measurements such as em or ex
User Style Sheets
 Adding a user style sheet in IE is done
by Tools|Internet Options|Accessibility|
Format documents using my style sheet
Resources
 http://www.w3.org/T/REC-CSS2/
 http://style.webreview.com

Cascading Style Sheets (CSS) : World Wide Web Technology

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets (CSS) : World Wide Web Technology

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets (CSS)

World Wide Web Technology

<P STYLE=“font-size: 20pt”>Some

<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px;

<DIV STYLE = "width: 80%; text-align: center">

<DIV STYLE = "width: 20%; height: 30%; overflow: scroll">

<DIV CLASS = "thick groove">This text has a border</DIV>

<P CLASS = "thin red inset">A thin red line...</P>

You might also like