Wk 7 Ses 12 Slides 1-20 Introduction to CSS
description
Transcript of Wk 7 Ses 12 Slides 1-20 Introduction to CSS
H0073
Introduction to CSS * Property of STI
Page 1 of 20
HTML Today
Excess bandwidth...
Tables (and nested tables and spacer gifs)
control layout.
Extended <FONT> tags control textual
formatting in each and every table cell.
Wastes the user’s time
Costs too much
If a site reduces its markup weight by 35%,
it reduces its bandwidth costs by the same
amount.
H0073
Introduction to CSS * Property of STI
Page 2 of 20
What CSS Offers?
CSS allows you to:
achieve a new level of fine-grain control
over Web design
easily apply the same consistent look and
feel to any number of pages
control the layout of your pages down to the
pixel
specify exactly how fonts should be
rendered
create simple rollover effects that don't
require any programming
H0073
Introduction to CSS * Property of STI
Page 3 of 20
What is CSS?
Cascading Style Sheets (CSS) - a simple
mechanism for adding style (e.g. fonts, colors,
spacing) to Web documents.
Standard presentation languages: CSS – Style
sheets:
separate presentation from structure and
behavior
for (variously capable) browsers
for printers – no more printer friendly page
for alternative receiving devices
is backward compatible
is orthogonal to other features
builds on the philosophy of the Web
alleviates a widely felt weakness of prior
Web technology
H0073
Introduction to CSS * Property of STI
Page 4 of 20
CSS & Accessibility
How Style Sheets Benefit Accessibility
primarily by separating document structure from
presentation
allows precise control over spacing, alignment
and positioning
style sheets can help reduce image misuse
provides precise control over font size, color,
and style
allows users to override author styles
provides support for automatically generated
numbers, markers, and other content
supports aural style sheets
provides more precise control over the display
of alternative content than HTML alone
H0073
Introduction to CSS * Property of STI
Page 5 of 20
What does CSS require?
It conforms to the CSS specification if it:
attempts to fetch all referenced style sheets
and parse them according to this
specification
sorts the declarations according to the
cascading order
implements the CSS functionality within the
constraints of the presentation medium
H0073
Introduction to CSS * Property of STI
Page 6 of 20
What are Style Sheets?
Style Sheet
also known as Cascading Style Sheets or
CSS
can be defined in an external file attached in the
HTML document.
Style sheets describe how documents are
presented on screens, in print, or perhaps how
they are pronounced.
H0073
Introduction to CSS * Property of STI
Page 7 of 20
What can you specify with CSS?
Character format
Font, size, weight, colour, case, underlines
Paragraph format
Letter/word spacing, line height, alignment,
justification, margins and indentation
Page Element Positioning
Absolute and relative positioning/layering of
all document objects
Background colours/images for everything,
automatic rollovers and filters in IE4+ and more
besides…
H0073
Introduction to CSS * Property of STI
Page 8 of 20
How Cascading Style sheets Work
<EM><FONT FACE=“Arial”
COLOR="green"><H3>This is a green,
italic, Arial H3
header.</H3></FONT></EM>
CSS lets you specify this style for all <H3> tags
in a single step by defining a selector:
H3 { font-family: Arial; font-
style: italic; color: green }
The selector (in this case, the <H3> element) is
followed by the style definition, which outlines
the style for that selector.
<H3>This is a green, italic, Arial
H3 header.</H3>
H0073
Introduction to CSS * Property of STI
Page 9 of 20
Style Sheet Components
CSS are a series of RULES composed of
SELECTOR
PROPERTY
VALUE
Give each selector a style definition
H3 { font-family: Arial }
selector
property
value
H0073
Introduction to CSS * Property of STI
Page 10 of 20
Writing the rULeS…
selector {property: value;}
{property: value;} = DECLARATION
selector {property: value;} = RULE
H3 { font-family: Arial }
selector
property
value
DECLARATION
RULE
H0073
Introduction to CSS * Property of STI
Page 11 of 20
Selectors and Properties
SELECTOR is a string that identifies what
elements the corresponding rule is applied to.
H1, H2, H3 {property: value;}
OR
H1 {property: value;}
H2 {property: value;}
H3 {property: value;}
CSS rule will be ignored if you get the selector
property relationship wrong.
Property is an identifier.
Proper selector property association:
H1, H2, H3 {property: value;}
H0073
Introduction to CSS * Property of STI
Page 12 of 20
Common Properties
Property Description
background sets the background color for the
text
color sets the color for the text
font-
familysets the font type for the text
font-size
sets the size for the font and can
be measured in points or a
percentage of another tag, or xx-
small to xx-large
font-stylenormal or italic – normal is the
default
font-
weightextra-light to extra-bold
text-align left, right, center, or justify
text-
indent
indent from margins and is
measured as a fixed size or
percentage
text-
decoration
none, underline, overline,
strikethrough
H0073
Introduction to CSS * Property of STI
Page 13 of 20
Values
Units of Measure
Space separated list of words or numbers -
#000066 for the colour Oxford Blue.
Length Units <length>
Font size: points, pixels, inches, or centimeter
or percentage
Color Units: <color> can be color name or
RGB values
H1, H2, H3 {color: black;}
H0073
Introduction to CSS * Property of STI
Page 14 of 20
Length Units
Integer or a decimal fraction , can be preceded
by + or –.
Can be absolute or relative:
Relative length units
em: the size of the font
px: pixel is a relative-length
measurement
ex: the “x-height” of the font, usually set
to the height of a lowercase x
Percentages
E.g. margin-left: 10%
Absolute-length measurements
in: inches
cm: centimeters
mm: millimeters
pt: points (1 pt = 1/72 in)
pc: picas (1 pc = 12 pt)
H0073
Introduction to CSS * Property of STI
Page 15 of 20
Relative Units
It specifies a length relative to another length
property.
Relative unites below are supported:
H1 { margin: 0.5em }
/* ems, the height of the element's font */
H1 { margin: 1ex }
/* x-height, ~ the height of the letter 'x' */
P { font-size: 12px }
/* pixels, relative to canvas */
Child elements inherit the computed value, not
the relative value:
BODY
{
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt
*/
}
H1 { font-size: 15pt }
H0073
Introduction to CSS * Property of STI
Page 16 of 20
Absolute Units
Absolute length units are only useful when the
physical properties of the output medium are
known.
Absolute units below are supported:
H1 { margin: 0.5in }
/* inches, 1in = 2.54cm */
H2 { line-height: 3cm }
/* centimeters */
H3 { word-spacing: 4mm }
/* millimeters */
H4 { font-size: 12pt }
/* points, 1pt = 1/72 in */
H4 { font-size: 1pc }
/* picas, 1pc = 12pt */
H0073
Introduction to CSS * Property of STI
Page 17 of 20
Absolute and Relative Style Example
<STYLE TYPE="text/css">
.note { font-size: 9pt }
<!- Absolute -->
</STYLE>
<BODY>
<P>Thanks for visiting my Web site.
I hope you enjoy it. </P>
<P CLASS="note">
Please Note: This site will be
moving soon. Please check
periodically for updates.
</P>
</BODY>
<STYLE TYPE="text/css">
.note2 { font-size: .75em } <!-
Relative -->
</STYLE>
H0073
Introduction to CSS * Property of STI
Page 18 of 20
Percentage Units
It is a number specified in <percentage>
immediately followed with “%” symbol.
P { line-height: 120% }
/* 120% of the element's 'font-size' */
H0073
Introduction to CSS * Property of STI
Page 19 of 20
Color Units
A color is a either a keyword or a numerical
RGB specification.
The RGB color model is being used in
numerical color specifications.
Examples below specify same color:
EM { color: #f00 }
/* #rgb */
EM { color: #ff0000 }
/*#rrggbb */
EM { color: rgb(255,0,0) }
/* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) }
/* float range 0.0% - 100.0% */
H0073
Introduction to CSS * Property of STI
Page 20 of 20
URL Value
A Uniform Resource Locator (URL) is identified
with a functional notation:
BODY {
background:url(http://www.bg.com/
pinkish.gif) }
Parentheses, commas, whitespace characters, single quotes (') and double quotes (")
appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.