Cascading Style Sheets

Transcript Cascading Style Sheets

Cascading Style Sheets
"
Provide means to control and change presentation of
HTML documents.
"
Allow the user to impose a standard style.
"
Three levels of specification:
"
–
Inline level -- embeded in tag invocation.
–
Document level -- applied to a whole document.
–
External level -- Apply to a number of documents.
Inline level has precedence over document level, which
has precedence over external level.
Cascading Style Sheets
"
"
"
HTML primarily concerned with content rather
than style.
HTML tags have presentation properties for
which browsers have default values.
Cascading Style Sheets are not technically
HTML, but can be embedded in HTML
documents.
Cascading Style Sheets
"
Cascading Style Sheet specification developed in 1996 ---> CSS1
"
CSS2 followed in 1998.
"
Current browsers do not implement all of CSS2.
"
"
Style is specified for a tag by the values of its
presentation properties.
Browsers can ignore style sheets or use their own default
values for presentation properties.
Level of Style Sheets
"
"
"
"
Inline style sheets appear in the tag itself.
Document level style sheets appear within the
head of the document.
External style sheets are in separate files,
potentially on any server on the internet.
Format depends on the level of the style sheet
Inline Style Specification Format
"
Style sheets appears as the value of the style
attribute
–
style ="property_1:value_1;
–
property_2: value-2;
...
property_n: value-n;”
Scope of inline style sheet is the content of the tag.
Document Style Specification Format
"
"
"
List of rules that are the content of the <style> tag.
The type attribute of the <style> tag must be set to
"text/css"
The list of rules are not HTML.
–
"
Hence, they must be placed in an HTML comment.
Documentation comments for the rule must use a
different form -- use C comments: /* ... */
External style sheets format is a list as in document style
External Style Sheets
"
"
Written with the MIME type text/css
–
A <link> tag is used to specify that the browser is to
fetch and use external style sheet file:
–
<link rel = stylesheet type="text/css"
href="http://www.whereever.org/termpaper.css">
</link>
Can be validated
http:/jigsaw.w3.org/css-validator
/validator-upload.html
Style Classes
"
"
Style classes allow different occurrences of the same tag
to use different style specifications
A style class has a name attached to a tag name:
p.narrow (property:value list)
p.wide (property:value list)
"
A class on an occurrence of a tag is specified with its
class attribute
<p class ="narrow"> ... </p>
<p class ="wide"> ... </p>
Generic Style Classes
"
"
To apply style to more than one tag
Defined using a generic tag (which must have a
name beginning with a period)
.really-big( ... )
"
It is used as if it were a normal style class
<h1 class ="really-big"> ... </h1>
<p class ="really-big"> ... </p>
Properties/Property Values
"
"
There are 56 different properties in 6 categories
–
Fonts
–
Colors & backgrounds
–
Text
–
Boxes and Layouts
–
Lists
–
Tags
Will not discuss all. For more details go to:
http://www.w3.org
Property Value Format
"
Keywords: left, small, ... (Not case sensitive)
"
Length: numbers (may be with decimal points)
–
px -pixels
–
in -inches
–
cm -centimiters,
–
pt -points
–
pc -picas (12 points)
–
em -height of the letter "m"
–
x-height -height of the letter "x"
–
No space is allowed between number and unit specs.
Property Value Format
<html>
<head>
<title> Font Properties </TITLE>
<style type = "text/css">

</style>
</head>
Property Value Format
<body>
<p class = "big">
If a job is worth doing, it’s worth doing right.
</p>
<p class = "small">
Two wrongs don't make a right, but they certainly
can get you in a lot of trouble.
</p>
<h2 style = "font-family: 'Times New Roman';
font-size: 24pt; font-weight: bold">
Chapter 1 Introduction
</h2>
<h3 style = "font-family: 'Courier New';
font-size: 18pt">
1.1 The Basics of Computer Networks
</h3>
</body>
</html>
Property Value Format (cont)
"
Percentage -just a number followed by the
percent sign
"
URL value: url(protocol://server/pathname)
"
Color
– Color name
– rgb(n1, n2, n3)
– Hex form: #XXXXXX
"
Property values inhereted by nested tags unless
overridden
Font Properties
"
Font-family list of font names (browser picks 1st)
–
Font-family: Arial, Helvetica, Courrier
–
Generic fonts: serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS)
–
If font name has more than one word, single-quoted
"
Font-size lenght number of a name
"
Font-style: italic, normal
"
Font-weight: bolder, lighter, bold, normal
Font Properties
Font used to specify list of font properties
order must be: style, weight, size, name(s)
font: bolder 14pt Arial Helvetica
Font Properties
<html>
<head>
<title> Font Properties </TITLE>
<style type = "text/css">

</style>
</head>
Font Properties
<body>
<p class = "big">
If a job is worth doing, it’s worth doing right.
</p>
<p class = "small">
Two wrongs don't make a right, but they certainly
can get you in a lot of trouble.
</p>
<h2 style = "font-family: 'Times New Roman';
font-size: 24pt; font-weight: bold">
Chapter 1 Introduction
</h2>
<h3 style = "font-family: 'Courier New';
font-size: 18pt">
1.1 The Basics of Parallel Programming
</h3>
</body>
</html>
Colors & backgrounds
"
"
Complications:
–
Monitors vary widely
–
Browser vary widely
There are three color collections:
–
Set of 16 colors garanteed to be dispalyable by all
graphical browsers on all color monitors
–
The web palette of 216 colors
–
One of 16 million different colors
Garanteed set of 16 colors:
"
Black
000000
"
Green
008000
"
Silver
C0C0C0
"
Lime
00FF00
"
Gray
808080
"
Olive
808000
"
White
FFFFFF
"
Yellow
FFFF00
"
Marron
800000
"
Navy
000080
"
Red
FF0000
"
Blue
0000FF
"
Purple
800080
"
Teal
008080
"
Fuchia
FF00FF
"
Aqua
00FFFF
The web palette
"
Consist of 216 colors
"
Use hex color value of: (look on back of book)
–
00
–
33
–
66
–
99
–
CC
–
FF
Colors & backgrounds
"
The color property specifies forground of color
elements
<h2 style="color:red">Apple</h2>
"
The background-color property specifies the
backgound color elements
<p style="font-size:24; color:blue;
background-color:aqua">
To make it softer, use aqua background!</p>
Colors & backgrounds
"
The background-image property
use with care
Alignment of Text
"
"
"
Property text-indent allows indentation. Use
length of %
Property text-align has possible values: left
(default), center, right, or justify
Property float allows text to flow arround another
element: left, right, or none (default)
An element on the right with text flowing on its left can
be obtained with default text-align value (left) for the
text and right value for float on the element on the
right.
Alignment of Text
"
Property margin-left allows to set margins
arround an object.
<img src = "c210.jpg" style="float: right; marginleft: 0.5in; margin-bottom: 0.05in" />
Lists properties
Unordered list:
"
List-style-type
–
Bullets can be: disk (default), square, circle
–
Setting it on the <ul> tag applies to all items:
<ul style = "list-style-type: square"> <li> ... </ul>
–
Setting it on the <li> it applies to just that item:
<ul> <li style="list-style-type:square">
First item </li>
<li style = "list-style-type: circle">
second item </li> </ul>
Lists properties
Unordered list:
"
List-style-image:
–
Could use an image for bullets in an
unordered list
<li style = "List-style-image:
url(bigbird.gif)">
Lists properties
Ordered list:
"
List-style-type:
–
Use to change the sequence values:
Property value Sequence type
decimal
Arabic numerals
First four
1, 2, 3, 4
upper-alpha Uc letters
A, B, C, D
lower-alpha Lc letters
a, b, c, d
upper-roman Uc Roman
I, II, III, IV
lower-roman Lc Roman
i, ii, iii, iv
The <span> Tag
"
Used to define an element in the content of a larger
element
"
The default is to leave content as it is
"
Use <span> to apply an inline style sheet to its content
<p>Now is the
<span style = "font-size: 40;
font-family: ariel; color: bue"> most </span> opportune
time! </p>
"
Can be nested and can have id and class attributes
The <div> Tag
"
"
Usefull for style applications
Used to create sections (or divisions) for which
style can be specified
–
e.g. A section of four paragraphs for wich a particular
style is warranted.

Cascading Style Sheets

Transcript Cascading Style Sheets

Directory