CSS2

CSS
CASCADING STYLE SHEETS
CONTENTS{
1. What is CSS?
1.
2.
2.
3.
4.
5.
6.
A Brief History of CSS

Why to use Styles?
Syntax
Cascading Order
Examples of Properties
Limitations
CSS variations
{WHAT IS CSS?
CSS stands for Cascading Style Sheets

Styles define how to display (X)HTML elements
Styles are normally stored in Style Sheets
Multiple style definitions will cascade into one
{A BRIEF HISTORY OF CSS

Style sheets have existed since the beginnings of
SGML in the 1970s
As HTML grew, it came to encompass a wider
variety of stylistic capabilities
Nine different style sheet languages were proposed
to the W3C
Two were chosen as the foundation for CSS: CHSS
and Stream-based Style Sheet Proposal
CSS level 1 1996; CSS level 2 1997
Difficulties with adoption
WHAT ARE CASCADING STYLE SHEETS?

Created by Hakon Wium Lie of MIT in 1994
Has become the W3C standard for controlling visual
presentation of web pages
Separates design elements from structural logic
You get control and maintain the integrity of your
data
{WHY TO USE STYLES?

Documents written with CSS are
more flexible
short
clear
Basic formating tool

Easy multiple document managment
Save time by using selector classes
New opportunities in formating
Webpage
Structure
Styleformatting
(X)HTML
CSS
SYNTAX
CSS
{ BASIC SYNTAX
Made up of three parts:
selector {property: value}
The selector is normally the HTML element/tag you

wish to define
The property is the attribute you wish to change
Every property has the value
LETS SEE SOME CODE

Sample Style sheet
Rule Structure
{ SYNTAX
If the value is multiple words, put quotes around the
value
p {font-family: "sans serif"}

To make the style definitions more readable, you
can describe one property on each line
p
{
text-align: center;
color: black;
font-family: arial
}
{ GROUPING
h1,h2,h3,h4,h5,h6
{
color: green
}
All header elements will be displayed in green text

color
This is header h1
This is header h2
This is header h3
This is header h4
{ THE CLASS SELECTOR

With the class selector you can define different
styles for the same type of HTML element.
p.right {text-align: right}
p.center {text-align: center}
Using the class argument in (X)HTML:

<p class="right"> This paragraph will be rightaligned. </p>
<p class="center"> This paragraph will be
center-aligned. </p>
{ TEXT COLOR
<html><head>
<style type="text/css">
h1 {color: green}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a
paragraph</p>
</body>
</html>
This is header 1
This is header 2
This is a paragraph
INSERTING OF STYLE SHEET

CSS
{CASCADING ORDER
1. Browser default
2. External style sheet
inside external *.css file
3. Internal style sheet
inside the <head> tag
4. Inline style
inside an HTML element
{EXTERNAL STYLE SHEET

Each webpage
must link to the style
sheet using the
<link> tag
Browser reads styles
definitions from
mystyle.css file
<head>
<link
rel="stylesheet"
type="text/css"
href="mystyle.css"
/>
</head>
APPLYING CSS TO HTML

Style rules can be applied in 3 ways:
Inline
Styles:
Embedded
style
sheets:
External
style
sheets:
<H1
STYLE=color: blue; font-size: 20pt;>A large purple
<HTML><HEAD><TITLE>Stylin!</TITLE>
<HEAD>
Heading</H1>
<STYLE
TYPE=text/css>
<LINK REL=stylesheet
TYPE=text/css
H1 {color: purple;}
HREF=styles/mystyles.css>
For individual
elements
usinggray;}
the STYLE attribute
P {font-size:
10pt; color:
</HEAD>
</STYLE>
</HEAD>
This
is true separation of style and content.
Keeping
all your styles in an external document is
</HTML>
simpler
{ INTERNAL STYLE SHEET

Should be used
when a single
document has a
unique style
Defined in the head
section by using the
<style> tag
<head>
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
{ MULTIPLE STYLE SHEETS

An internal style sheet has
following properties for
the h3 selector:
h3 { text-align: right;
font-size: 20pt }
External style sheet has

these:
h3 { color: red;
text-align: left;
font-size: 8pt }
Your Web Browser has

default formatting:
h3 { color: black;
font size: 10pt }
What will be the format of

<h3> tag?
o color: red;
o text-align: right;
o font-size: 20pt
EXAMPLES
CSS PROPERTIES & VALUES
{ BACKGROUND:
Control over the
background color
of an element
set an image as the
background,
repeat a
background image
background-color
color-rgb
color-hex
color-name
background-image
url(URL)
none
background-repeat
repeat
repeat-x
repeat-y
no-repeat
{TEXT:
color
direction
ltr
rtl
word spacing
normal
length
text-decoration
none
underline
overline
line-through
blink
text-align
left
right
center
justify
{FONT:
font-family
family-name
generic-family
font-size
xx-small
x-small
small
/etc./
font-weigh
normal
bold
bolder
lighter
100
{DIMENSION
{LIST:
<head>
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
CSS
VARIATIONS, LIMITATIONS
WHY CSS?
Advantages to Workflow
Cost Savings
You WILL Be Cooler
ADVANTAGES OF CSS
Workflow
Faster downloads
Streamlined site maintenance
Global control of design attributes
Precise control (Advanced)
Positioning
Fluid layouts
ADVANTAGES OF CSS - COST SAVINGS

Cost Savings
Reduced Bandwidth Costs

One style sheet called and cached
Higher Search Engine Rankings

Cleaner code is easier for search engines to index
Greater density of indexable content

Faster download = better usability
Web usability redesign can increase the
sales/conversion rate by 100% (source: Jakob
Nielson)
CSS requires less code
Tables require spacer images
Entire table has to render before content
CSS can control the order that elements
download (content before images)

Increased Reach
CSS website is compatible w/ many different devices
In 2008 an est. 58 Million PDAs will be sold (Source:
eTForecast.com)
1/3 of the worlds population will own a wireless device by
2010
IMPLEMENTATIONS
Apply to HTML pages
Apply to dynamic data
Format or style XML
Use for layout (this is cool)

See http://www.csszengarden.com
CSS ISNT PERFECT (YET)

CSS support in browsers is still uneven
Make sure your CSS properties are supported
{CSS LIMITATIONS
Some noted disadvantages of using "pure" CSS
include
Inconsistent browser support

Absence of expressions
Lack of Variables
Lack of multiple backgrounds per element
Control of Element Shapes

CSS2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS2

Transféré par

Droits d'auteur :

Formats disponibles

CSS

CASCADING STYLE SHEETS

A Brief History of CSS

CSS stands for Cascading Style Sheets

{A BRIEF HISTORY OF CSS

WHAT ARE CASCADING STYLE SHEETS?

{WHY TO USE STYLES?

Basic formating tool

The selector is normally the HTML element/tag you

LETS SEE SOME CODE

p {font-family: "sans serif"}

All header elements will be displayed in green text

{ THE CLASS SELECTOR

Using the class argument in (X)HTML:

INSERTING OF STYLE SHEET

inside external *.css file

3. Internal style sheet

inside the <head> tag

inside an HTML element

{EXTERNAL STYLE SHEET

APPLYING CSS TO HTML

{ INTERNAL STYLE SHEET

{ MULTIPLE STYLE SHEETS

External style sheet has

Your Web Browser has

What will be the format of

ADVANTAGES OF CSS - COST SAVINGS

Reduced Bandwidth Costs

Higher Search Engine Rankings

ADVANTAGES OF CSS - COST SAVINGS

ADVANTAGES OF CSS - COST SAVINGS

Use for layout (this is cool)

CSS ISNT PERFECT (YET)

Inconsistent browser support

Vous aimerez peut-être aussi