CSS Introduction

INTRO
TO
CSS

IAT100
Spring
2010

Diliara
Nasirova

1

OUTLINE

¢  Covered
in
this
lesson:

—  Overview

¢  What
is
CSS?

¢  Why
to
use
CSS?

—  Structure

¢  CSS
Syntax
Introduction

¢  Three
places
CSS
can
be
de=ined

¢  CSS
Syntax
Speci=ics

¢  Cascading
Inheritance

—  Applied

¢  CSS
Hands-‐on

2

WHAT
IS
CSS?

¢  Cascading
Style
Sheets
(CSS)
de=ines
the
way
website

content
is
presented.

Visit http://www.csszengarden.com
3

WHERE
THE
DEFINITION
“CASCADING”
COMES

FROM?

4

WHERE
THE
DEFINITION
“CASCADING”
COMES

FROM?

*detailed
info
later

5

WHERE
THE
DEFINITION
“CASCADING”
COMES

FROM?

*detailed
info
later

6

WHY
CSS?

¢  Separate
Content
from
Form

<font
size=“14px”>

My
First
Header

</font>

<font
size=“12px”
color=“red”
face=“Verdana”>

My
information
1
goes
here.

</font>

<font
size=“14px”>

My
Second
Header

</font>

<font
size=“12px”
color=“red”
face=“Verdana”>

Different
information
goes
here.

</font>

The
old
way:

7

WHY
CSS?
CONTINUED.

¢  Separate
Content
from
Form

—  Content

—  Form
or
Style

<p
class=“header”>My
First
Header</p>

<p
class=“info”>My
Information
1
goes
here</p>

<p
class=“header”>My
Second
Header</p>

<p
class=“info”>Different

Information
goes
here</p>

(Speci=ic
markup
properties
like
Class
will
be
discussed
later).

.header
{
font-‐size:14px;}

.info
{
font-‐family:
verdana;

font-‐color:
blue;

font-‐size:
12px;

}
8

WHAT
DOES
THIS
SEPARATION
GET
US?

9

WHAT
DOES
THIS
SEPARATION
GET
US?

10

WHAT
DOES
THIS
SEPARATION
GET
US?

11

THREE
CSS
DEFINITION
LOCATIONS

¢  Inline:

the
“style”
attribute

¢  Internal:
the
<style>
markup
tag

¢  External:
the
.css
stylesheet
=ile

<p>
Content
</p>

<p
style=“font-‐color:red;
font-‐size:10px;”>
Content
</p>

<html>
<head>

<style>

p
{
background-‐color:
Red;

font-‐family:
serif;

font-‐color:
White;
}

</style>

</head>
<body><p>Content</p></body>
</html>

<link
rel="stylesheet"
type="text/css"
href=“mystylesheet.css"
/>

12

CSS
SYNTAX

¢  3
Elements
to
a
CSS
Statement

—  Selector

¢  What
HTML
sections
does
it
affect?

—  Property

¢  What
attribute
of
that
HTML
section
will
be
affected?

—  Value

¢  What
change
will
be
made
to
that
attribute?

14

CSS
SYNTAX

¢  Applying
a
style
to
Multiple
selectors
-‐
separate
the

selectors
with
a
comma
(,)

¢  Applying
Multiple
properties
-‐
split
each
declaration

with
a
semi-‐colon
(;)

h1
{
color:red;
font-‐family:calibri}
h1,
h2,
h3,
h4,
h5,
h6
{
color:
red
}

15

CSS
SYNTAX:
SELECTORS

¢  Think
of
…

—  Web
Page
as
a
university

—  Selectors
can
be
tags,
classes,
IDs.
Then:

¢  Tags
as
students

¢  Class
as
student’s
major

¢  ID
as
student’s
ID
number

16

CSS
SYNTAX:
SELECTORS

¢  Tag
Selector

¢  Class
Selector–
precede
the
class
with
a
dot(.)

¢  ID
selector
precedes
with
a
"#"
symbol

CSS:
.myinfo
{
font-‐size:
10px;

font-‐color:
White;
}

HTML:

<p
class=“myinfo” >
Content</p>

<div
class=“myinfo”>
Other
content</div>

CSS:

#container{
font-‐size:
10px;

font-‐color:
White;
}

HTML:

<div
id=“container”>
This
is
one
section
</div>

CSS:

p
{font-‐size:
10px;}

HTML:
<p>Content</p>

17

EXTRA
HTML
TAGS:
DIVISION
AND
SPAN

¢  Extra
Tags:
Div
and
Span
de=ine
sections
in
a
HTML
=ile

¢  Div
tag
is
a
style
element
for
multiple
lines

¢  Span
tag
is
a
style
element
for
one
line
(inline).

¢  You
can
apply
CSS
to
Div
through
ID/Class
Selector;

<div
id
=
“container”>

<h1>
Content
goes
here
</h1>

<p>
Content
goes
here
</p>

</div>

<p>
Content
<span
class=“myinfo”>
goes
here
<span>
</p>

18

CASCADING
INHERITANCE

19

CSS
APPLIED

¢  Hands-‐on
CSS
Tutorial

¢  Techbyte:
http://www.sfu.ca/~tutor/cgi-‐bin/
techbytes/Dreamweaver/dw2.html

20

PRESENTATION
NOTES

¢  Page
3:

—  Originally
HTML
was
used
to
change
the
appearance
of
websites,
so
that
HTML

documents
eventually
turned
into
a
mixture
of
content
and
presentaRon.
This

problem
was
solved
by
W3C
(World
Wide
Web
ConsorRum)
that
created
CSS,

level
1
in
1996.
It
was
quickly
adopted
by
all
main
web
browsers.
In
1998
W3C

developed
a
more
sophisRcated
and
accurate
CSS2
followed
by
a
minor
CSS2.1

update
and
CSS3
is
currently
under
development.
CSS
is
usually
stored
in

separate
.css
style
sheets
which
can
be
re-‐used
for
all
your
web
pages.

—  Cascading
Style
Sheets
(CSS)
is
a
language
that
works
with
HTML
documents
for

adding
visual
style
to
web
sites,
in
other
words
for
defining
the
way
content
is

presented.
It
deals
with
colors,
fonts,
background
images,
posiRons,
width,

height,
visibility
and
many
other
things.

¢  Page
7:

—  Content
is
the
text
and
images,
marked
up
to
define
regions
of
specific
types

—  Form
defines
the
“style”
for
the
content

21

PRESENTATION
NOTES

¢  Page
9:

—  Separate
Content
from
Form

¢  Specify
the
style
once
for
every
instance
of
that
class.

¢  Example:

Specify
the
font
once
for
all
text
on
the
HTML
page
that
you

have
idenRﬁed
as
a
“header”.

¢  The
style
sheet
can
be
a
separate
ﬁle
which
all
HTML
pages
on
your
enRre

site
can
link
to.

¢  Only
have
to
specify
the
style
once
for
your
ENTIRE
SITE

¢  Can
change
the
style
for
your
enRre
site
by
ediRng
only
ONE
FILE.

¢  Page
12:

—  Note,
the
selector
for
inline
CSS
is
the
tag
which
contains
the
style
aaribute.

22

RESOURCES:

¢  Notes:

www.tagbytag.org/tutorials/css-‐beginner/what-‐is-‐css

¢  Pictures:

www.wise-‐women.org/tutorials/csstut/

23

CSS Introduction

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à CSS Introduction

Similaire à CSS Introduction (20)

Dernier

Dernier (20)

CSS Introduction