Lect 02

Cascading Style Sheets
SCCS426 Internet Technology and Its Applications, ICT Programme, Semester 2/2008 1
` The CSS1 specification was developed in 1996
` CSS2 was released in 1998
` CSS3 is on its wayy
` CSSs provide the means to control and change
presentation of HTML documents
` CSS is not technically HTML, but can be
embedded in HTML documents
` Style sheets allow you to impose a standard style
on a whole document, or even a whole collection
of documents
` Style is specified for a tag by the values of its
properties
` The purpose of CSS is to help separate style rules
from the data. Using the CSS formatting below, one
change to the style rules would change 100 instances
of formatting in the document
document.
myStyle.css
HTML/CSS
http://www.w3schools.com/css/demo_default.htm
` Format depends on the level of the style sheet
1. Inline - specified for a specific occurrence of a tag
and apply only to that tag
◦ This is fine-grain style, which defeats the purpose of
style sheets - uniform style
◦ Style sheet appears as the value of the style attribute
◦ General form:
style = "property_1: value_1;
property_2: value_2;
…
property_n: value_n"
◦ Inline style sheets appear in the tag itself
<[element name] STYLE="[CSS
STYLE [CSS property]:[property value]">
value] >
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
p g
4
5 
6 
7 <html xmlns = "http://www
http://www.w3.org/1999/xhtml
w3 org/1999/xhtml">
>
8 <head>
9 <title>Inline Styles</title> Style attribute
10 </head>
11 <body>
12 <p>This text does not have any style applied to it.</p>
13
Sets the
14  p
paragraph’s
g p font
15 
inline styles. Separate multiple style properties to 20pt
16 
17 <p style = "font-size: 20pt">This text has the
18 <em>font-size</em>
<em>font size</em> style applied to it
it, making it 20pt.
20pt
19 </p>
20
21 <p style = "font-size: 20pt; color: #6666ff">
22 This
hi text has
h the
h <em>font-size</em>
f i / and
d
23 <em>color</em> styles applied to it, making it
24 20pt. and light blue.</p>
Sets the paragraph’s
25 </body>
26 </html>
color to light blue
Source: Internet & World Wide Web: How to Program, 4th edition
by Paul J. Deitel and Harvey M. Deitel, Prentice Hall, 2007.
Remark: Inline styles do not truly

separate
t presentation
t ti from
f content.
t t
2. Document-level style sheets or embedded style sheets - apply to the
whole document in which they appear
◦ Document-level style sheets appear in the head of the document
<style>

</style>
◦ Style sheet appears as a list of rules that are the content of a
<style> tag
◦ The <style> tag must include the MIME type attribute, set to
"t t/
"text/css” ”
◦ The list of rules must be placed in an HTML comment, because it
is not HTML
E h rule
◦ Each l body
b d iin a style
t l sheet
h tb i and
begins d ends
d with
ith a curly
l
brace ({ and }) and use the same format as inline styles.
◦ Comments in the rule list must have a different form - use C
comments (/*…*/)
(/* */)
3 Sets the MIME type
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Style sheet begins to text/css
5 
6  Sets the properties for
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
all elements in the
9 <title>Style Sheets</title> document within em S Sets
t th
the properties
ti for
f
10 tags all h1 elements in the
11 
document
12 <style type = "text/css">
13 em { font-weight: bold;
14 color: black } Sets the properties for
15 h1 { font-family: tahoma, helvetica, sans-serif }
16 p { font-size: 12pt;
all p elements in the
17 font-family: arial, sans-serif } d
document t
18 .special { color: #6666ff } Creates a special
19 </style>
class
20 </head>
21 <body> Style sheet ends
22 
23 <h1 class = "special">Deitel & Associates, Inc.</h1>
24
25 <p>Deitel & Associates, Inc. is an internationally
26 recognized corporate training and publishing organization
27 specializing in programming languages, Internet/World
28 Wide Web technology and object technology education.
29 The company provides courses on Java, C++, Visual Basic,
30 C#, C, Internet and World Wide Web programming, Object
31 Technology, and more.</p>
32
33 <h1>Clients</h1> Source: Internet & World Wide Web: How to Program, 4th
34 <p class = "special"> The company's clients include many edition
35 <em>Fortune 1000 companies</em>, government agencies, by Paul J. Deitel and Harvey M. Deitel, Prentice Hall, 2007.
36 branches of the military and business organizations.
37 Through its publishing partnership with Prentice Hall,
38 Deitel & Associates, Inc. publishes leading-edge The special class
39 programming textbooks, professional books, interactive is applied to this p
40 web-based multimedia Cyber Classrooms, satellite
41 courses and World Wide Web courses.</p> element
42 </body>
43 </html>
3. y sheets - can be applied
External style pp to any y number of documents
◦ External style sheets are in separate files, potentially on any
server on the Internet
◦ W itt as ttextt fil
Written files with
ith th
the MIME type
t t
text/css
t/
◦ A <link> tag is used to specify that the browser is to fetch and
y sheet file
use an external style
<link rel="stylesheet“ type=“text/css”
href="path/to/mystyles.css">
</link>
◦ Form is a list of style rules, as in the content of a <style> tag
for document-level style sheets but without defining <style>
tag
◦ External style sheets can be validated
http://jigsaw w3 org/css validator/validator upload html
http://jigsaw.w3.org/css-validator/validator-upload.html
1 /* Fig. 5.4: styles.css */
/ /
2 /* External stylesheet */
3
4 body { font-family: arial, helvetica, sans-serif }
5
6 a.nodec { text-decoration: none }
7
8 a:hover { text
text-decoration:
decoration: underline }
9
10 li em { font-weight: bold }
11
12 h1,
h1 em { text-decoration:
d i underline
d li }
13
14 ul { margin-left: 20px }
15
16 ul ul { font-size: .8em; }
4
5 
6 
8 <head>
9 <title>Linking External Style Sheets</title>
10 <link rel = "stylesheet" type = "text/css"
11 h f = "styles.css"
href " l " />
/
12 </head>
13 <body>
14 <h1>Shopping list for <em>Monday</em>:</h1>
15
16 <ul> The linked document is
17 <li>Milk</li> declared to be the current one’s
18 <li>Bread
19 <ul>
stylesheet
y
20 <li>White bread</li>
21 <li>Rye bread</li>
The linked document’s MIME
22 <li>Whole wheat bread</li>
23 </ul>
/ type is text/css
24 </li>
25 <li>Rice</li>
26 <li>Potatoes</li>
The linked document’s URL is
27 <li>Pizza <em>with mushrooms</em></li> styles.css
28 </ul>
29
30 <p><em>Go to the</em>
31 <a class = "nodec" href = "http://www.deitel.com">
32 Grocery store</a>
33 </p>
34 </body>
35 </html>
H1 {{color: red;}
;}
S l t
Selector P
Property
t V l
Value
` The selector determines the element to which the
rule is applied
` The declaration details the exact property values
` The declaration contains a property and a value
` The property is a quality or characteristic
` The precise specification of the propert
property is
contained in the value
` Simple Selectors
` Class Selectors
` Generic Selectors
` id Selectors
` Pesudo Classes
` The selector is a tag name or a list of tag
names, separated by commas
` Th following
The f ll i rule
l selects
l t the
th H1 element:
l t
H1 {color: red;}
Type Selector Declaration
` The following rule selects the H1 and H2
elements:
<style type=”text/css”>
h1, h2 {color: green;}
</style>
` The following style rules set the <p> element
to 12-point blue text:
p {color: blue;}
p {font
{font-size:
size: 12pt;}
These two style rules can be expressed in a

simpler way:
p {color: blue; font-size: 12pt;}
` A contextuall or descendant
d d selector
l llets you
specify the exact context in which a style is
applied.
◦ For example
ol ul li
“For any list items that are defined for
unordered list that is nested
within an ordered list”
` Below is a small sampling of text-level styles.
PROPERTY VALUES NOTES
font-family named font Use q

quotation for multiple
p word font
names: “Courier New”
font-size % % relative to font size in parent element
f t t l
font-style normal, italic,
oblique
font-weight
g bo d, bolder,
bold, bo d , Bolder
o d is generally
g a y equivalent
qu a to
o what
a
lighter, normal <b>…</b> creates.
color named color,

#hexcolor
background-color named color, Makes solid colored block around text

#hexcolor
` As with text-level styles, block-level styles can be
applied to block elements besides the generic div
container.
container
h1 {margin-left:-5px;background-color:#999999;}
h2 {margin-left:10px;}
p {margin-left:10px; text-indent:5px;}
` Used to allow different occurrences of the same tag to use
different style specifications
` A style class has a name, which is attached to a tag name The
period (.) flag character indicates that the selector is a class
selector. For example,
p.narrow {property/value list}
p.wide {property/value list}
` The class you want on a particular occurrence of a tag is specified
with the class attribute of the tag
` F example
For l
<p class = “narrow”>
…
</p>
/p
…
<p class = “wide”>
…
</p>
.special {font-size: 10pt; font-weight: bold;}
<p class
class=”special”>This
special >This is the first paragraph of
the document. It has a different style based on
the “special” class selector.</p>
Picture from: An Introduction to Web Design + Programming by Wang and Katila, Course Technology, 2003.
` A generic class can be defined if you want a style to
apply to more than one kind of tag
` A ge
generic
e c class
c ass must
ust be named,
a ed, aandd tthe
e name
a e must
ust
begin with a period
` Example,
.really-big { … }
` Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big">
really big > … </p>
` A id selector
An l t allow
ll th
the application
li ti off a style
t l
to one specific element
` General form:
#specific-id {property-value list}
` Example:
#section14 {font-size: 20}
` Pseudo classes are styles that apply when
something happens, rather than because the
target element simply exists
` Names
a es beg
begin with
t co
colons
o s
` hover classes apply when the mouse cursor
is over the element
` focus classes apply when an element has
focus

<html xmlns = "http://www.w3.org/1999/xhtml">
http://www.w3.org/1999/xhtml >
<head> <title> Checkboxes </title>
<style type = "text/css">
input:hover {color: red;}
input:focus {color: green;}
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</ >
</p>
</form>
</body>
/h l
</html>
` There are 60 different properties in 7
categories:
◦ Fonts
◦ Lists
◦ Alignment of text
◦ Margins
◦ Colors
◦ Backgrounds
◦ Borders
` Keywords - left, small, …
◦ Not case sensitive
` Length - numbers, maybe with decimal points
` U it
Units:
◦ px - pixels
◦ in - inches
◦ cm - centimeters
◦ mm - millimeters
◦ pt - points
◦ pc - picas (12 points)
◦ em - height of the letter ‘m’
◦ g - height
ex-height g of the letter ‘x’
◦ No space is allowed between the number and the unit
specification e.g., 1.5 in is illegal!
` Percentage - just a number followed
immediately by a percent sign
` URL values
◦ url(protocol://server/pathname)
` Colors
◦ Color name
◦ rgb(n1, n2, n3)
x Numbers can be decimal or percentages
◦ Hex form: #XXXXXX
` Property values are inherited by all nested
tags, unless overridden
` font-family
font family
◦ Value is a list of font names - browser uses the first
in the list it has
◦ font-family: Arial, Helvetica, Courier
◦ Generic fonts: serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS)
x Browser has a specific font for each
◦ If a font name has more than one word, it should be
single-quoted
l d
` font-size
◦ Possible values: a length number or a name,
name such
as smaller, xx-large, etc.
` font-style
◦ italic, oblique (useless), normal
` font-weight - degrees of boldness
◦ bolder,
bolder lighter
lighter, bold
bold, normal
x Could specify as a multiple of 100 (100 – 900)
` font
◦ For specifying a list of font properties
◦ font: bolder 14pt Arial Helvetica
◦ Order must be: style,
style weight
weight, size,
size name(s)
Æ SHOW fonts.html and display
Æ SHOW fonts2.html and display
p y
` The text-decoration property
◦ line-through, overline, underline, none
◦ letter-spacing
letter spacing – value
al e is any
an length property
propert value
al e
list-style-type
` Unordered lists
◦ Bullet can be a disc (default)
(default), a square
square, or a circle
◦ Set it on either the <ul> or <li> tag
x On <ul>, it applies to list items
<h3> Some Common Single-Engine Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
` On <li>, list style type applies to just that item
list-style-type
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li style = "list-style-type: disc">
Cessna Skyhawk </li>
<li style
y = "list-style-type:
y yp square">
q
Beechcraft Bonanza </li>
<li style = "list-style-type: circle">
Pi
Piper Ch
Cherokee
k </li>
</ul>
` Could use an image for the bullets in an unordered
list
x Example:
<li style = "list-style-image:
list style image: url(bird.jpg)
url(bird.jpg)">
>
` On ordered lists - list-style-type can be used to
change
g the sequence
q values
Property value Sequence type First four
Decimal Arabic numerals 1, 2, 3, 4
upper-alpha
upper alpha Uc letters A B,
A, B C C, D
lower-alpha Lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i ii
i, ii, iii
iii, iv
Æ SHOW sequence_types.html and display
` CSS2 has more, like lower-greek and hebrew
` Color is a problem for the Web for two reasons:
◦ Monitors vary widely
◦ Browsers vary widely
` There are three color collections
1. There is a set of 16 colors that are guaranteed to be
displayable by all graphical browsers on all color monitors
black 000000 g
green 008000
silver C0C0C0 lime 00FF00
gray 808080 olive 808000
white FFFFFF yellow FFFF00
maroon 800000 navy 000080
red FF0000 blue 0000FF
purple 800080 teal 008080
fuchia FF00FF aqua 00FFFF
2. There is a much larger set,
2 set the Web Palette
◦ 216 colors
◦ Use hex color values of 00, 33, 66, 99, CC, and FF
◦ Inside back cover of this book has them!
3. Any one of 16 million different colors
` The color property specifies the foregro
foreground
nd color of elements
<style type = “text/css”>
th.red {color: red}
th.orange {color: orange}
</style>
…
<table border = "5">
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>
` The background-color property specifies the background color of elements
Æ SHOW back_color.html and display
` The text indent property allows indentation
text-indent
◦ Takes either a length or a % value
` The text-aligng pproperty
p y has the p possible
values, left (the default), center, right, or
justify
` Sometimes
S we want text to flow
fl aroundd
another element - the float property
◦ The float
fl t property has the possible values
values, left
l ft, right
i ht,
and none (the default)
◦ If we have an element we want on the right, with text flowing
on its
i lleft,
f we use the
h default
d f l text-align
li value
l (left
l f ) ffor
the text and the right value for float on the element we
want on the right
<img
g src = "c210.jpg"
jpg
style = "float: right" />
◦ Some text with the default alignment - left
` Borders – every element has a border
border-style
style
property
◦ Controls whether the element has a border and if so, the style
off the
h border
b d
◦ border-style values: none, dotted, dashed, and double
◦ border width – thin, medium (default), thick, or a length
border-width
value in pixels
◦ Border width can be specified for any of the four borders (e.g.,
top width)
border-top-width
border
◦ border-color – any color
◦ Border color can be specified for any of the four borders (e.g.,
b d
border-top-color
t l )
Æ SHOW borders1.html and display
4
5 
6 
8 <head>
9 <title>Borders</title>
11 div { text-align: center;
12 width: 50%;
;
13 position: relative; Defines
fi severall
14 left: 25%;
15 border-width: 4px }
border classes
16
6 .medium
ed u { bo
border-width:
de dt medium
ed u }
17 .thin { border-width: thin }
18 .solid { border-style: solid }
19 .double { border-style: double }
20 .groove { border
border-style:
style: groove }
21 .inset { border-style: inset }
22 .outset { border-style: outset }
23 .dashed { border-style: dashed }
24 .red
red { border
border-color:
color: red }
25 .blue { border-color: blue }
26 </style>
27 </head>
28 <body>
29 <div class = "solid">Solid border</div><hr />
30 <div class = "double">Double border</div><hr />
Applies
31
32
<div class = "groove">Groove border</div><hr />
<div class = "inset">Inset border</div><hr />
several classes
33 <div class = "dashed">Dashed border</div><hr /> to the same
34 <div class = "thin red solid">Thin Red Solid border</div><hr />
35
element
<div class = "medium blue outset">Medium Blue Outset border</div>
36 </body> Source: Internet & World Wide Web: How to Program, 4th edition
37 </html> by Paul J. Deitel and Harvey M. Deitel, Prentice Hall, 2007.
` Margin
g – the space
p between the border of an element and its neighbor
g
element
` The margins around an element can be set with margin-left, etc. - just
assign them a length value
<img src = "c210.jpg " style = "float: right;
margin-left: 0.35in;
margin-bottom: 0.35in" />
` Padding – the distance

between the content of
an element and its
border
• Controlled by padding,
padding-left, etc.
ÆSHOW marpads.html
and display
` The background-image
b k d i property
Æ SHOW back_images.html and display
` Repetition
R ii can b
be controlled
ll d
◦ background-repeat property
◦ Possible values: repeat (default), no-repeat, repeat-x, or
repeat-y
◦ background-position property
x Possible values: top, center, bottom, left, or right
` One problem with the font properties is that they
apply to whole elements, which are often too large
` Solution:
So ut o a newe tag to define
de e aan e
element
e e t in tthe
e
content of a larger element - <span>
◦ The <span> tag is similar to other HTML tags, they
can be nested and they have id and class attributes
` Another tag that is useful for style specifications:
<di >
<div>
◦ Used to create document sections (or divisions) for
which style can be specified
x e.g., A section of five paragraphs for which you want
some particular style
` The <span> element lets you specify inline elements within a
document that have their own name and style properties
` To create a span, declare it within the <style> element first.
Th ffollowing
The ll i examplel specifies
ifi a <span>
< > element
l t named d
“bigred” as the selector for the rule:
<style type = "text/css">?

/
.bigred {font-size: 24pt;font-family: Ariel; color:
red}
</style>
` Next, specify the <span> element in the document. Then use
the class attribute to specify the exact type of span. In the
following example, the code defines the <span> element as
the special class named “bigred
bigred.”
<p>
Now is the
<span class = "bigred">
best time </span>
p ever!
</p>
` The default meaning of <span> is to leave the content as it is

<p>
Now is the <span> best time </span> ever!
</p>
` The <div> element lets you specify logical
divisions within a document that have their own
y p
name and style properties
p
` <div> is a block-level element. It contains a
leading and trailing carriage return
` You can use <div> with the class attribute to
create customized block-level elements
` T create a di
To division,
i i d
declare
l iit within
i hi the
h <style>
element first.
4
5 
6 
8 <head>
9 <title>Box Dimensions</title>
11 div { background-color: #aaccff;
12 margin-bottom: .5em;
13 font-family: arial, helvetica, sans-serif } Sets the
S h width
id h off the
h
14 </style>
element to 20% of the
15 </head>
16 <body> browser’s screen’s size
17 <div style = "width: 20%">Here is some
18 text that goes in a box which is Sets the width of the
19 set to stretch across twenty percent
20 of the width of the screen.</div> element to 80% of the
21 browser’s screen’s size
22 <div style = "width: 80%; text-align: center">
23 Here is some CENTERED text that goes in a box
and centers it
24 which is set to stretch across eighty percent of
25 the width of the screen.</div>
26
27 <div style = "width: 20%; height: 150px; overflow: scroll">
28 This box is only twenty percent of
29 the width and has a fixed height.
30 What do we do if it overflows? Set the Sets the width of the
31 overflow property to scroll!</div> element to 20% of the
32 </body>
33 </html>
browser’s screen’s size,
the height
g to 150 p px, and
allows the element to
scroll if the text
overflows the allotted
size
Source: Internet & World Wide Web:
How to Program,
Program 4th edition
by Paul J. Deitel and Harvey M. Deitel,
Prentice Hall, 2007.
` By default block elements ` You then need to
are positioned relative to specify the block's
the page layout flow.That exact location on the
i iit iis placed
is, l d on the
h screen and the exact
page according to its size of the block.
position in the HTML
document.
` In CSS, that is
position:relative;
l
` Doing position:absolute;
forces absolute
positioning.
4
5 
6 
8 <head> Class that sets an element’s absolute
9 <title>Absolute Positioning</title>
position at the top left of the
11 .bgimg { position: absolute;
containing element
12 top:
p 0px;
p ;
13 left: 0px; Lowestt z-index,
L i d so this
thi element
l t is
i
14 z-index: 1 } behind all the others
15 .fgimg { position: absolute;
16 top:
p 25px;
p ; Set element’s
element s position 25px from
17 left: 100px;
the top and 100 from the left
18 z-index: 2 }
19 .text { position: absolute; This element will appear on top of
20 top: 25px; the first one,
one since it has a higher
21 left: 100px; z-index
22 z-index: 3;
23 font-size: 20pt; This element will appear on top of
24 font-family:
font family: tahoma,
tahoma geneva,
geneva sans
sans-serif
serif }
all
ll others,
th since
i it has
h the
th highest
hi h t
25 </style>
26 </head>
z-index
27 <body>
28 <p><img src = "bgimg
bgimg.gif
gif" class = "bgimg"
bgimg
29 alt = "First positioned image" /></p> Source: Internet & World Wide Web: How to Program, 4th edition
30 by Paul J. Deitel and Harvey M. Deitel, Prentice Hall, 2007.
4
5 
6 
8 <head>
9 <title>Relative Positioning</title>
11 p { font-size: 1.3em;
12 font-family:
y verdana,
, arial,
, sans-serif }
13 span { color: red;
14 font-size: .6em;
15 height: 1em }
16 .super { position: relative;
Positions element 5 ex upwards
17 top: -1ex }
18 .sub { position: relative; Positions element 1 ex downwards
19 bottom: -1ex }
20 .shiftleft { position: relative; Positions element 1 ex to the left
21 left: -1ex }
22 .shiftright { position: relative;
Positions element 1 ex to the right
23 right: -1ex }
24 </style>
25 </head>
26 <body> Apply the super class to
27 <p>The text at the end of this sentence
28 <span class = "super">is
super >is in superscript</span>.</p>
superscript</span> </p>
this span element
29
31 <span class = "sub">is in subscript</span>.</p> Apply the sub class to
32
this span element
34 <span class = "shiftleft">is shifted left</span>.</p>
35
Apply the shiftleft
37 <span class = "shiftright">is shifted right</span>.</p> class to this span
38 </body> element
39 </html>
Source: Internet & World Wide Web: How to Program, 4th edition Apply the
by Paul J.
J Deitel and Harvey M
M. Deitel
Deitel, Prentice Hall
Hall, 2007.
2007
hif i h class
shiftright l to
this span element
` CSS media types allow a programmer to decide
what a page should look like depending on the
kind of media being g used to display
p y the p page
g
` The most common media type for a web page is
the screen media type, which is a standard
computer screen
` A block of styles that applies to all media types is
d l
declared
dbby @media
@ di all ll andd enclosed
l d iin curly
l
braces
` To create a block of styles that apply to a single
media type such as print, use @media print and
enclose the style
y rules in curlyy braces
` Other media types in CSS 2 include:
◦ handheld
x Designed for mobile Internet devices
◦ braille
x For machines that can read or print web pages in
braille
◦ aural
x All
Allow th
the programmer to
t give
i a speech-synthesizing
h th i i
web browser more information about the content of
the web page
◦ print
x Affects a web page’s appearance when it is printed
4
5 
6 
8 <head>
9 <title>Media Types</title>
10 <style type = "text/css"> Sets properties for all
11 @media all media types
12 {
13 body { background-color: #4488aa }
14 h1 { font-family: verdana, helvetica, sans-serif;
15 color: #aaffcc }
16 p { font-size: 12pt;
p ;
17 color: white; Sets properties for a
18 font-family: arial, sans-serif }
19 } /* end @media all declaration. */
page if it is being
20 @media print printed
p
21 {
22 body { background-color: white }
23 h1 { color: #008844}
24 p { font
font-size:
size: 14pt;
25 color: #4488aa;
26 font-family: "times new roman", times, serif }
27 } /* end @media print declaration. */
28 </style>
29 </head>
30 <body>
31 <h1>CSS Media Types Example</h1> SCCS426 Internet Technology and Its Applications, ICT Programme, Semester 2/2008 59
32
33 <p>
34 This example uses CSS media types to vary how the page
35 appears in print and how it appears on any other media.
36 This text will appear one font on the screen and a
37 different font on paper or in a print preview. To see
38 the difference in Internet Explorer, go to the Print
39 menu and select Print Preview. In Firefox, select Print
40 Preview from the File menu.
41 </p>
42 </body>
43 </html>
Source: Internet & World Wide Web: How to Program,

g , 4th edition
` The :hover pseudoclass is used to apply
styles to an element when the mouse cursor
is over it
` The display property allows a programmer
to decide if an element is displayed as a block
element, inline element, or is not rendered at
all (none)
4
5 
6 
8 <head>
9 <title>
10 Drop-Down Menu
11 </title>
12 <style
y type
yp = "text/css">
13 body { font-family: arial, sans-serif }
14 div.menu { font-weight: bold;
15 color: white;
16 border: 2px
p solid #225599;
; Sets anchor elements in a
17 text-align: center; menu div to be displayed
18 width: 10em; as block-level when the
19 background-color: #225599 } menu is moused-over
20 div.menu:hover a { display: block }
21 div.menu a { display: none; Prevents the browser from
22 border-top: 2px solid #225599; rendering the links inside
23 background-color: white; the menu div
24 width: 10em;
25 text-decoration: none;
26 color: black } Sets anchor elements in a
27 div.menu a:hover { background-color: #dfeeff } menu div to have a light-
28 </style> blue background when they
29 </head> are moused-over
30 <body>
31 <div class = "menu">Menu
32 <a href = "#">Home</a>
33 <a href = "#">News</a>
34 <a href = "#">Articles</a>
35 <a href = "#">Blog</a>
36 <a href = "#">Contact</a>
37 </div>
38 </body>
39 </html>
Source: Internet & World Wide Web: How to
Program, 4th edition
by Paul J. Deitel and Harvey M. Deitel, Prentice Hall,
2007.
` When more than one style sheet applies to a
specific tag in a document, the lowest level style
sheet has precedence
` In a sense, the browser searches for a style
property spec, starting with inline, until it finds one
(or there isn
isn’tt one)
Picture from: An Introduction to Web Design + Programming by Wang and Katila, Course Technology, 2003.
` Users can define their own user style sheets
to format pages based on their preferences
` Absolute font size measurements override
user style sheets, while relative font sizes will
yield to a user-defined
user defined style
` User style sheets are not linked to a
document; rather,
rather they are set in the
browser’s options
4
5 
6 
8 <head>
9 <title>User Styles</title>
11 .note { font-size: 9pt }
12 </style>
y
A class defined by the
13 </head> author
h with i h absolute
b l
14 <body> measurements: a font-
15 <p>Thanks for visiting my website. I hope you enjoy it.
16 </p><p
/p p class = "note">Please Note: This site will be
size of 9 pt
17 moving soon. Please check periodically for updates.</p>
18 </body>
19 </html>
1 /* Fig. 5.16: userstyles.css */
2 /* A user stylesheet */
3 body { font-size: 20pt; A different font-size of
4 color: yellow; 20 p
pt is defined byy the
5 background-color: #000080 }
user for all body
elements
The author’s
Th th ’ style
t l has
h
higher precedence
than the user’s, so the
font is 9 pt Source: Internet & World Wide Web: How to Program, 4th edition
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>User Styles</title>
<style type = "text/css">
A relative
.note { font-size: .75em } measurement of .75
</style>
/ y
</head>
em is used by the
<body> author for the font size
<p>Thanks for visiting my website. I hope you enjoy it.
</p><p class = "note">Please
note >Please Note: This site will be
moving soon. Please check periodically for updates.</p>
</body>
</html>
The user style sheet is
considered, so the
font-size is 15 pt (.75
em for 20 pt)
` Any style rule defined on a more general level is inherited at the
more specific level. Moreover, any style property that is defined at
a more specific level overrides any occurrence of the same
property that may have been defined at a more general level
level.
` While CSS 2 is the current W3C
Recommendation, CSS 3 is in development,
and some browsers are beginning to
implement some of the new features that will
be in the CSS 3 specification
` CSS 3 will introduce new features related to
borders backgrounds
borders, backgrounds, text effects
effects, layout
layout,
and more
72
http://www.w3schools.com/css/css_examples.asp

Lect 02

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lect 02

Cargado por

Copyright:

Formatos disponibles

Cascading Style Sheets

Remark: Inline styles do not truly

Type Selector Declaration

These two style rules can be expressed in a

font-family named font Use q

color named color,

background-color named color, Makes solid colored block around text

Æ SHOW back_color.html and display

37 </html> by Paul J. Deitel and Harvey M. Deitel, Prentice Hall, 2007.

` Padding – the distance

<style type = "text/css">?

` The default meaning of <span> is to leave the content as it is

Source: Internet & World Wide Web: How to Program,

También podría gustarte