Skip to main content

Adobe Presentation Course - CSS Lesson

Page 1

W eb S ite Design CSS

W W

W C r e at e d

by

B at t y L at t y 18 M a rc h 2 015.


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

%

70

L

ON

%

AT

W

ON

CH

AT

%

70

%

80

S AS

=P

S

AS

N TIO

N TIO

O PR

OB

W

%

70

L

S AS

% 00

=

=P

%

80

ON

I AT

OB

PR

O

A GO

O /N

1

AT

W

%

70

L

% 00

S AS

=P

N TIO

=N

CH

AT

O /N

W

%

70

L

S AS

% 00

=

=P

%

80

ON

I AT

OB

PR

O

A GO

O /N

=N

1

CH

AT

W

%

70

BA

O PR

O

A GO

0%

7

A

=P

%

80

O /N

BA

L

OA

%

80

L

S AS

=P

N TIO

=N

CH

AT

O /N

W

%

70

L

% 00

=

A GO

S AS

=P

%

ON

I AT

OB

PR

O

80

O /N

=N

1

CH

AT

W

%

70

BA

O PR

O

A GO

N TIO

O /N

AT

W

O

% 00

=

%

80

1

CH

%

70

BA

PR

NO

AL

GO

=

SS

A

=P

L

S AS

=P

N TIO

=N

O /N

O /N

AT

W

=N

%

70

L

W

%

70

L

% 00

=

=P

%

80

N TIO

O /N

=N

=P

N TIO

O /N

AT

W

O

%

70

AL

GO

1

% 00

=

%

80

=

SS

A

=P

N TIO

O

PR

NO

%

CH

=P

N

TIO

BA

/

70

N

TIO

BA

W

%

70

=

GO

S AS

/

AT

AL

0 10

AT

S AS

O /N

70

N

TIO

BA

%

80

O /N

0%

=

GO

%

80

=N

0%

=

GO

%

80

=N

%

0%

=

GO

70

%

80

A

=P

S AS

=P

=N

N

IO AT

OB

PR

O /N

C

AT

W

0%

7

L

% 00

=

AT

SS

%

70

A =P

N TIO

%

80

O /N

O

=N

L

OA

=N

N

IO AT

OB

PR

O /N

C

AT

W

0%

7

L

% 00

=

SS

%

70

A =P

BA

N TIO

O

=N

O PR

S AS

=P

O

A GO

%

80

1

CH

AT

W

BA

O PR

=P

O

A GO

1

CH

S AS

10

O /N

=

C

AT

W

0%

7

L

% 00

=

%

80

SS

%

70 by

A =P

O

W

%

70

L

A GO

N TIO

O /N

=

=P

N

TIO

BA

O

PR

O

=N

L

OA

%

70

%

80

O /N

0%

10

=

=P

W

%

70

N

IO AT

OB

PR

%

=

0%

7

%

80

SS

%

70

A =P

N TIO

O

=N

P

O /N

L

OA

%

80

O

W

%

70

=

GO

S AS

=P

N

TIO

BA

O

PR

%

80

O /N

W

S AS

=P

%

70

N

IO AT

OB

PR

%

80

O /N

0%

7

=

%

80

1

CH

SS

%

70

A =P

=P

N TIO

O /N

BA

O

=N

O PR

L

OA

N

IO AT

OB

O

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

CH

AT

W

O /N

L

=

%

A GO

S AS

=P

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

A GO

S AS

O

A GO

=

% 00

0 10

CH

L

% 00

=

AT

W

W

O /N

L

0 10

CH

GO

=

=

AT

AL

0%

=N

AT

AL

%

NO

O /N

OB

PR

=N

CH

BA

AT

W

N TIO

PR

NO

O

A GO

1

CH

A

=P

10

CH

L

% 00

=

AT

W

=

SS

0 10

CH

80

O /N

=

AT

GO

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

W

AL

S AS

=N

AT

GO

S AS

NO

O /N

% 00

IO AT

CH

AT

1

AT

1

CH

AL

%

AT

W

N TIO

PR

NO

O

A GO

1

AT

W

L

OB

PR

CH

Created OA

=N

N

IO AT

O /N

%

80

BA

◊ Linked H- written in a separateH file and linked to the HTMLH document 10

=

SS

0 10

CH

O O ◊ O Embedded the <head> the page PR placed inside PR section of L L O O A A AL

PR

NO

=

AT

W

% 00

1

CH

BA

W - attached W ◊ Inline inline to O individual elements =P =P NO N % % AT

%

80

N

=N

CH

BA

O PR

S AS

O

A GO

S AS

O

A GO

CH

AT

1

CH

BA

O PR

O

A GO

1

CH

BA

PR

NO

CH

S AS

O

W

=

SS

10

A

L

O PR

=

H TC

A GO

=

=

AT

GO

ON

I AT

PR

=N

CH

1

CH

W

%

80

ON

O /N

% of CSS = = • Three types styles: 80 % % 00 00

%

80

O /N

=

=P

O

A GO

1

AL

=

%

70

L

% 00

=N

%

GO

ON

W

BA

70

W

CH

AT

A style is a rule describing how to format a particular portion of a web page. %

80

O /N

OB

O

AL

=

I AT

O /N

1

%

W

ON

PR

=N

70

L

O /N

S AS

Allow creative control over the layout and design attributes of web page elements

CH

A GO

=

=P

O

80

O /N

CH

AT

CASCADING STYLE SHEETS (CSS)

W

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

%

70

% 80

=

S AS

=P

A

NO

N

TIO

B RO

O

W

/N

P

CH

AT

%

70

AL

O

0%

10

=G

% 80

=

S AS

=P

A

NO

N

TIO

B RO

O

W

/N

P

CH

AT

%

70

AL

O

0%

10

=G

% 80

=

S AS

=P

N

TIO

A

NO

B RO

O

W

/N

P

CH

AT

%

70

AL

O

0%

=G

10

% 80

=

S AS

=P

N

TIO

A

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

%

80

=

A =P

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

W

S AS

=P

O /N

CH

W

AT

S AS

=P

O /N

CH

W

AT

• Three TI types of CSS TI styles: BA BA %

70

ON

O

PR

◊ Inline O

=N

A GO

L

%

70

ON

O

PR

%

70

S AS

=P

PR

OB

I AT

ON

O /N

CH

W

AT

%

70

S AS

=P

PR

OB

I AT

ON

O /N

CH

W

AT

%

70

S AS

=P

PR

OB

I AT

ON

O /N

CH

W

AT

%

70

S AS

=P

N

PR

OB

IO AT

O /N

CH

W

AT

AL AL AL AL AL NO NO NO NO NO O O O O O = = = = = attached inline to= Gindividual elements; % = = =G =G =G =G 0% 0% 0% 0% 0% 80 8 8 8 8 8 % % % % % % 0 0 0 0 0 0 10 10 10 10 10 10 H H H H H H CH TC TC TC TC TC TC S S S S S S AT A A A A A A S S S S S S A A A A A A W W W W W W W O O O O O O O =P =P =P =P =P =P N N N N N N N % % % % % % / / / / / / / 70 70 70 70 70 70 N N N N N N ON O O O O O O I I I I I I AT AT AT AT AT AT B B B B B B O O O O O O PR PR PR PR PR PR L L L L L L A A A A A A AL NO NO NO NO NO NO O O O O O O O = = = = = = % =G =G =G =G =G =G =G 0% 0% 0% 0% 0% 80 8 8 8 8 8 % % % % % % 0 0 0 0 0 0 10 10 10 10 10 10 H H H H H H C C C C C C CH T T T T T T T S S S S S S A A A A A A A S S S S S S W W W W W W W PA PA PA PA PA PA O O O O O O O = = = = = = % % % % % % /N /N /N /N /N /N /N 70 70 70 70 70 70 N N N N N N N O IO IO IO IO IO IO AT AT AT AT AT AT B B B B B B O O O O O O PR PR PR PR PR PR L L L L L L O O O O O O A A A A A A AL N N N N N N O O O O O O O = = = = = = % % % % % % =G =G =G =G =G =G =G 80 80 80 80 80 80 % % % % % % 0 0 0 0 0 0 10 10 10 10 10 10 H H H H H H CH TC TC TC TC TC TC S S S S S S AT A A A A A A S S S S S S A A A A A A W W W W W W W O O O O O O O =P =P =P =P =P =P N N N N N N N % % % % % % / / / / / / / 70 70 70 70 70 70 N N N N N N ON O O O O O O I I I I I I AT AT AT AT AT AT B B B B B B O O O O O O PR PR PR PR PR PR L L L L L L O O O O O O A A A A A A AL N N N N N N O O O O O O O = = = = = = % =G =G =G =G =G =G =G 0% 0% 0% 0% 0% 80 8 8 8 8 8 % % % % % % 0 0 0 0 0 0 10 10 10 10 10 10 H H H H H H CH TC TC TC TC TC TC S S S S S S AT A A A A A A S S S S S S W W W W W W W PA PA PA PA PA PA O O O O O O O = = = = = = N N N N N N N % % % % % % / / / / / / / 70 70 70 70 70 70 N N N N N N ON O O O O O O I I I I I I T T T T T T BA BA BA BA BA BA O O O O O O PR PR PR PR PR PR L L L L L L O O O O O O A A A A A A AL N N N N N N O O O O O O O = = = = = = % =G =G =G =G =G =G =G 0% 0% 0% 0% 0% 80 8 8 8 8 8 % % % % % % 0 0 0 0 0 0 10 10 10 10 10 10 H H H H H H TC TC TC TC TC TC S S S S S S S A A A A A A S S S S S S A A A A A A AS W W W W W W W P P P P P P O O O O O O O = = = = = = N N N N N N N % % % % % % / / / / / / / 70 70 70 70 70 70 N N N N N N N O O O O O O O I I I I I I I AT AT AT AT AT AT AT B B B B B B B C r e a t e d b y D r e y a L a t s o n 3 0 M a r c h 2 0 1 6 . O O O O O O O PR PR PR PR PR PR PR L L L L L L L O O O O O O OA OA OA OA OA OA OA =N =N =N =N =N =N A GO

L

CH

AT

<h1 style=”font-family:verdana”>This is a heading.</h1> <p style=”font-family:courier”>This is a paragraph.</p>


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

W

S AS

=P

L

ON

ON

%

70

%

W

%

70

%

%

70

%

80

0%

7

L

S

AS

N TIO

%

O /N

L

OA

=

=P

N

TIO

BA

O

PR

=

=P

N

IO AT

OB

PR

=

AT

W

%

CH

AT

W

0%

7

O

O PR

=

%

70

%

N TIO

O

N TIO

=

%

AL

N

TIO

BA

O

PR

=P

%

80

O /N

W

%

70

GO

N

OB

%

80

O /N

W

0%

7

SS

%

70

A =P

BA

N TIO

O

=N

O PR

=P

%

80

O /N

L

=

=P

W

%

70

N

IO AT

OB

PR

%

80

O /N

=

W

0%

7

%

80

%

70 by

N TIO

O PR

O /N

O /N

=

A

=P

O

=N

L

OA

AT

W

%

70

N TIO

%

O

PR

NO

=

S AS

=P

N

TIO

BA

O

PR

NO

%

=

W

=P

%

70

N

IO AT

OB

PR

%

80

O /N

=

0%

7

SS

%

70

A =P

%

80

N TIO

O

=N

P

O PR

O /N

L

OA

%

80

O /N

A

=P

AT

W

%

70

N TIO

%

O

AL

%

=

S AS

=P

N

TIO

BA

O

PR

NO

%

80

O /N

S AS

=P

W

%

70

N

IO AT

OB

PR

%

80

O /N

W

0%

7

SS

%

70

A =P

N TIO

%

80

O

=N

OB

PR

O /N

L

OA

CH

AT

W

O /N

L

=

A GO

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

CH

AT

W

O /N

L

=

%

A GO

S AS

=P

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

N

IO AT

% 00

O

1

CH

=P

0 10

CH

A GO

=

=

AT

L

% 00

S AS

0 10

CH

GO

=

=

AT

AL

0%

=N

%

70

GO

=

A GO

1

AT

W

W

O /N

L

% 00

=N

CH

BA

PR

NO

OB

PR

O

80

O /N

N

IO AT

CH

AT

1

L

=

=P

=N

CH

A GO

SS

AT

W

N TIO

% 00

O

A GO

1

CH

=P

10

CH

L

% 00

=

AT

W

=

S AS

O

A GO

S AS

0 10

CH

GO

S AS

=

AT

AL

0%

=N

%

70

80

O /N

L

% 00

=N

AT

GO

%

70

1

AL

%

OB

W

BA

CH

BA

I AT

PR

O

W

ON

O /N

CH

AT

1

80

O /N

=P

=N

CH

L

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

%

80

A GO

SS

AT

W

N TIO

% 00

O

A GO

SS

=P

10

CH

1

A =P

=

AT

L

% 00

S AS

0 10

CH

GO

S AS

=N

O /N

=

AT

AL

0%

CH

Created OA

O

AT

W

N

TIO

BA

PR

NO

O

1

CH

S AS

10

CH

A GO

=

=

AT

L

% 00

AT

W

L

OA

=N

AT

AL

IO AT

PR

O /N

%

80

1

CH

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

BA

PR

NO

OB

W

BA

CH

W

I AT

PR

O

80

O /N

ON

O /N

CH

AT

1

AT

A GO

SS

GO

%

80

L

% 00

=P

=N

CH

W

S AS

O

page

1

AL

S AS

O

BA

=N

O

NO

NO

SS

70

=N

BA

PR

O /N

%

70

BA

TIO

=P

A GO

A =P

%

80

N TIO

O PR

AT

S AS

1

CH

=P

O

1

CH

L

% 00

S AS

CH

= % = </head> 80 0% 0 1

O /N

%

70

1

W

p80% {t e x00%t= - a l i g n :80c% e n t00%e= r ; } =

GO

S AS

AT

SS

AL

0%

CH

A GO

=

I AT

O /N

CH

AT

AL NO O = <head> % section of = Gthe 80 % 0 10

L

% 00

ON

OB

the

W

=P

PR

BA

% </style> 70

O /N

O /N

S AS

A W PA Or : r e d ; } = P ={ N h1 c o l o % % / 70 70 N

W

GO

S AS

=N

O /N

N TIO

O PR

CH

AL

AT

W

BA

O PR

O

NO

7

BA

%

O

80

N TIO

PR

NO

S AS

8

A

=P

W <head> O =P N % / 0

AT

%

70

O

O AL O <style> =N G = 0%

SS

10

CH

A GO

=

=

AT

W

% 00

0 10

AT

GO

ON

=

CH

W

N TIO

O PR

=N

AT

80

O /N

=P

1

AL

=

W

PR

AT

BA

CH

GO

ON

O /N

CH

AT

AL NO O =placed inside % =G 80 % 0 10

CH

S AS

O

80

O /N

00

AT

W

L

A GO

1

AL

=

=N

CH

L

O /N

=P

◊ Embedded = %

%

A GO

=

O

PR

O

80

O /N

W

S AS

% % 70 CSS styles: N N • 70Three types of IO IO T T BA BA

A GO

=

O /N

CH

AT

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

0%

10

=P

%

70

AL

O

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

W

S AS

=P

L

ON

ON

%

70

%

W

%

70

%

%

70

%

80

0%

7

L

S

AS

N TIO

%

80

O /N

BA

O PR

L

OA

%

70

O /N

CH

AT

W

%

70

AL O G the =HTML % 0 10

S AS

=P

N TIO

O /N

document 0% 8

N

TIO

BA

O

PR

=

%

=

=P

BA

N TIO

=

1

AT

O /N

W

%

70

O

PR

%

AL

GO

=P

O /N

T BA

O

PR

NO

CH

AT

W

0%

SS

A

=P

N TIO

S AS

=P

%

80

N TIO

O /N

=P

OB

=N

O /N

CH

AT

W

AT

%

70

S AS

=P

%

80

N TIO

O /N

O /N

O

=

%

70

CH

W

AL

GO

10

AT

%

70

AL

S AS

=P

N

TIO

BA

O

PR

NO

1

AT

W

O /N

%

80

=

GO

S AS

CH

AT

CH %

70

AL

GO

S AS

SS

A

=P

N TIO

O

PR

NO

CH

AT

W

%

70

AL

%

=

GO

S AS

=P

N

TIO

BA

O

PR

NO

O /N

AT

%

80

O /N

CH

W

%

70

10

=

S AS

GO

%

80

A

=P

N TIO

O

PR

NO

%

80

=

S AS

=P

N

TIO

BA

O

PR

CH

%

0%

=

S AS

=P

O /N

W

0%

=P

O

A GO

O /N

W

0%

BA

O PR

L

O

A GO

N TIO

O /N

O PR

AT

W

L

OA

CH

SS

%

70

A =P

BA

N TIO

O

=N

O PR

=N

O /N

CH

AT

W

L

O

A GO

Created L

OA

SS

%

70 by

O /N

A =P

=

O

0%

=P

N TIO

O /N

%

80

=N

=

P

L

OA

O

A GO

%

80

1

AT

W

L

% 00

CH

SS

%

70

A =P

O

=N

O /N

=

N TIO

P

O /N

CH

0%

L

% 00

=

%

80

SS

%

70

A =P

N TIO

O /N

BA

O

=N

O PR

L

OA

O

W

O /N

=

A GO

S AS

=P

=N

CH

AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

N

T BA

PR

W

O /N

A GO

IO

O

A GO

1

CH

AT

W

L

OA

=N

O PR

=

=P

NO

C AT

L

0 10

AT

W

O

PR

S AS

%

%

N

T BA

%

70

80

H

SS

0 10

BA

O PR

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA =N

W

BA

O PR

% = = 0% nav 8{text-decoration : none;} 80 % % 0 0 10 10 =N

=P

=

% 00

NO

CH

GO

L

IO

AT

W

W

O /N

A GO

A

%

80

O /N

OB

PR

=P

70

AL

10

AT

W

IO AT

CH

AT

1

AT

GO

=

N

=N

CH

AL

%

NO

O /N

=

% 00

O

BA

0 10

AT

AL

0%

=

SS

L

=P

%

1

W

O /N

A GO

S AS

70

% 00

CH

BA

0 10

AT

W

8

OB

CH

AT

1

AT

W

IO AT

PR

=N

CH

BA

O PR

N

O

A GO

=

=P

%

L

% 00

S AS

70

1

CH

W

ON

I AT

PR

O

A GO

% 00

CH

BA

PR

NO

BA

BA

O

=

S AS

header { background-image : url(../images/header.png);} 7 7 7 7 7 N N N N O O I I T T TIO TIO

O /N

A =P

=N

NO

% @charset “utf-8”; 70 N IO W

SS

70

%

70

L

% 00

8

1

AT

BA

S AS

L

% 00

OB

PR

W

BA

= = = = : #fff ; } 0% 0% body80% ={ background-color 8 8 % % 0 0 10 10

N

TIO

O PR

CH

CH

AT

GO

S AS

I AT

O PR

% 00

CH

10

AL

0%

ON

O /N

CH

AT

1

70

This is how it0% =links to 80the html file. % % = = 80 0% 0% O /N

=P

O

AT

W

S AS

=N

CH

BA

O PR

8

SS

GO

=P

=N

O = N to linked % 80

AT

1

AL

S AS

NO

ON

I AT

PR

CH

W

=P

OB

file and

% 00

TIO

O

PR

NO

O

W

8

A W O =P </head> N % / 70 N

BA

O /N

S AS

O AL AL AL AL NO NO NO O O O O <link href=”../css/global.css” rel=”stylesheet”> =N = = = =G =G =G =G 0% 0% 0% 0%

A GO

AT

A

=P

%

70

BA

CH

SS

10

CH

A GO

=

=

AT

W

=

N TIO

O PR

L

% 00

S AS

70

10

CH

GO

ON

=

AT

W

N TIO

O PR

=N

AT

80

O /N

=P

1

AL

=

W

AL O separate =G % 0 10

W <head> O =P N % / AT

BA

CH

GO

ON

O /N

CH

AT

OB

O =N written in a % 80 CH

S AS

O

80

O /N

00

AT

W

L

A GO

1

AL

=

=N

CH

L

O /N

=P

PR

◊ Linked = %

%

A GO

=

OB

PR

O

80

O /N

W

S AS

% % 70 CSS styles: N N • 70Three types of IO IO T T A A

A GO

=

O /N

CH

AT

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

% 80

N

TIO

A

=

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

%

70

L

ON

%

AT

W

ON

ON

%

70

ON

=

S AS

=P

%

80

N TIO

O /N

=P

I AT

OB

=N

O /N

W

AT

%

70

%

70

L

% 00

=

S AS

=P

%

80

N TIO

O /N

SS

A

=P

N TIO

O /N

%

70

O

PR

AT

W

%

70

%

70

S N TIO

I AT

OB

PR

W

%

70

L

% 00

=

S AS

=P

%

80

N TIO

O /N

SS

A

=P

N TIO

O /N

AT

W

%

70

BA

O

PR

NO

=P

N

TIO

BA

O /N

0 10

CH

AT

W

AL

%

70

S AS

=P

N

TIO

BA

O /N

%

80

=

O

PR

CH

0%

7

S AS

=P

O

%

80

O /N

BA

L

OA

=N

N

IO AT

OB

PR

O /N

NO

CH

AT

W

0%

7

L

% 00

CH %

70

=

%

80

SS

%

70

A =P

N TIO

O /N

BA

O

=N

O PR

=P

L

OA

=N

N

IO AT

OB

PR

O /N

CH

AT

W

0%

7

L

% 00

=

%

80

SS

%

70

A =P

BA

N TIO

O

=N

O PR

O /N

AT

W

%

L

=

=P

N

TIO

BA

O

PR

%

70

10

=

=P

CH

AT

N

IO AT

OB

PR

%

=

7

%

70 by

N TIO

SS

A

=P

%

80

O /N

N TIO

O /N

O

PR

O

=N

=P

O /N

OB

PR

NO

=

S AS

=P

%

80

N TIO

O /N

N

OB

=N

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

IO AT

PR

O

A GO

S AS

=P

%

70

10

CH

AT

W

%

70

SS

A

=P

N

N TIO

O /N

O

IO AT

CH

AT

W

O /N

10

CH

AT

W

SS

A

=P

%

70

BA

PR

NO

A

AL

AS

W

=P

AL

O /N

OB

PR

NO

GO

0

S AS

=P

=N

N

IO AT

OB

PR

A

W

AL

N

IO

T BA

O

PR

NO

=

0

O /N

CH

AT

W

0%

7

SS

%

70

A =P

N TIO

O

=N

P

S AS

=P

O

A GO

%

80

1

CH

GO

=

%

=P

N

IO

T BA

O

O /N

=N

N

IO AT

OB

PR

CH

AT

W

0%

7

%

80

1

CH

SS

%

70

A =P

N TIO

O /N

O

=N

=P

L

OA

L

=N

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

W

O /N

A GO

S AS

O

A GO

=

CH

AT

10

L

% 00

AT

W

L

OA

0

O /N

W

O /N

L

0 10

PR

H

C AT

A GO

S AS

NO

10

L

% 00

AT

W

L

OA

%

70

AL

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

W

%

L

% 00

=P

70

1

AT

BA

AS

O

A GO

SS

N TIO

O /N

=N

CH

10

0%

1

A =P

%

1

=P

OB

PR

O

80

I AT

W

= is a set of these= rules ◊ A style sheet % % = = = 80 80 % % %

CH

L

% 00

=

AT

W

=

ON

O /N

S AS

% % 70 {color: 70 N N #000000;} ◊ Example: h1 O O I I AT AT

%

70

80

O /N

% 00

=P

CH

AT

• 0% = a set= of = = GO declarations GO grouped % % = 0 0 8 8 8 0% 0% 10 10 together H H TC TC S S

GO

S AS

L

A GO

S AS

NO

W

%

70

S AS

Declaration Block

AT

AL

0%

=N

O /N

OB

W

10

GO

S AS

I AT

O /N

CH

AT

A A B • aPRdescriptor defining a specific OB OB R RO P P O AL AL AL NO NO O O O = Nappearance = = % =G =G =G 0% 0% 80 8 8 % % % 0 0 0

CH

W

ON

PR

=N

70

AL

%

CH

Created OA

O

NO

O /N

=P

Value

CH

BA

AT

W

N TIO

PR

NO

O

A GO

1

CH

AT

W

AL

S AS

O

A GO

1

CH

AT

W

AL

O

PR

A

=P

0 10

AT

W

SS

S AS

O

A GO

10

CH

• describes an aspect of an = O O = = G G % % % = = 80 80 80 0% 0% 0 0 element’s presentation 1 1

AT

AS

AL

S AS

NO

W

ON

O /N

CH

AT

1

AT

10

CH

BA

Property

CH

AT

W

=P

=N

CH

W

S AS

O

A GO

1

CH

W

ON

PR

O

0 10

L

O PR

CH

AT

O = = • a property-value GO Gpair % % = = 80 80 % %

A GO

=

% 00

NO

GO

O /N

L

A GO

Declaration

AT

AL

=

%

70

10

CH

GO

O /N

S AS

A A BA • PDefines the element that the OB OB RO R R P P O O O AL AL AL N N N O O O = = = declaration will be applied % =G =G =G 0% 0% to 80 8 8 % % % 0 0 0

AL

=

OB

W

1

%

W

I AT

PR

=N

70

L

O /N

ON

O /N

Selector

CH

A GO

=

=P

O

80

O /N

CH

AT

TERMINOLOGY

W

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

W

%

70

L

ON

%

80

O /N

%

70

L

ON

%

W

%

70

GO

ON

CH

AT

W

ON

CH

AT

7

L

S

AS

N TIO

A

OB

W

%

70

L

=P

O /N

=N

=

%

80

1

CH

AT

W

% 00

%

70

S AS

=P

N TIO

O /N

AT

W

%

70

BA

O PR

=N

CH

I AT

OB

O

A GO

ON

PR

A natomy %

80

=

O

A GO

N TIO

%

80

O /N

O

=N

AT

W

%

70

AL

GO

L

O /N

CH

AT

W

%

70

L

% 00

=

S AS

=P

N TIO

CH

AT

W

ON

I AT

OB

PR

=N

O /N

%

=

S AS

=P

N

TIO

BA

O

PR

NO

%

80

=

% 00

=

SS

A

=P

N TIO

%

80

O

PR

NO

O /N

=N

%

AT

W

%

70

AL

GO

L

%

80

10

O /N

CH

W

%

70

GO

=P

O /N

L

OA

N

IO AT

OB

PR

%

80

=

%

=

S AS

=P

BA

O

PR

NO

N

TIO

%

80

=

% 00

=

SS

A

=P

N TIO

%

80

O /N

CH

W

0%

7

=

SS

%

A =P

N TIO

%

80

O /N

CH

W

%

70

GO

O /N

O

=N

L

OA

=

S AS

=P

=N

N

IO AT

OB

PR

=

O

PR

NO

=

%

80

=P

ON

I AT

OB

PR

S AS

=P

N TIO

O /N

O PR

=N

O /N

CH

AT

W

%

70

L

AT

W

% 00

=

%

70

S AS

=P

N TIO

O /N

%

80

O /N

=N

AT

W

%

70

GO

L

% 00

=

%

=

S AS

=P

BA

O

PR

NO

N

TIO

%

80

O /N

=

SS

A

=P

N TIO

CH

%

70

AL

GO

=

%

A =P

O

W

N TIO

BA

=N

CH

0%

7

O PR

=

S AS

=P

O

=N

N

IO AT

OB

PR

%

80

=

O

PR

NO

%

O /N

=

=P

W

%

70

N

TIO

BA

O

PR

NO

O /N

CH

W

0%

7

L

O /N

AT

W

L

=

%

80

1

CH

Created OA

% 00

SS

%

70 by

A =P

N TIO

0%

O /N

N

IO AT

OB

PR

=

%

A =P

O

=N

L

OA

O

=N

P

%

80

N TIO

=

A

=P

CH 0%

7

O

=P

O

O /N

L

OA

O /N

=

=P

N

IO AT

OB

PR

%

=

W

SS

0%

7

N TIO

%

80

O /N

O

=N

L

OA

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

W

O /N

=

A GO

S AS

=P

O

CH

AT

L

%

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

=P

0 10

CH

R ule ;

A =P

=

AT

A GO

1 the %

%

70

L

% 00

70

W

S AS

0 10

CH

80

O /N

=

AT

GO

S AS

CH

%

80

AL

0%

AT

W

N

TIO

BA

PR

E nds %

=

S AS

=N

%

70

GO

=

A GO

1

AT

W

W

O /N

L

% 00

=N

CH

AL

%

NO

O /N

%

80

BA

PR

NO

O

80

N TIO

10

AT

W

SS

70

%

70

A GO

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

W

=

OB

PR

O

A GO

SS

0 10

CH

AL

O /N

=

AT

1

CH

%

80

L

% 00

AT

W

=

=P

=N

%

70

GO

S AS

O

A GO

AT

W

L

% 00

N

IO AT

CH

AT

1

AT

1

AL

O /N

=N

CH

GO

S AS

10

AT

P roperty : %

80

the

SS

70

O /N

0%

%

80

BA

0 10

AT

W

O

A GO

=P

=N

CH

BA

O PR

S AS

O

A GO

1

CH

1

AL

10

AT

L

1

CH

%

80

A GO

E nds % 00

AT

W

BA

O PR

0%

O

A GO

1

70

S AS

O

A GO

BA

CH

BA

0 10

AT

AL

10

AT

L

% 00

AT

W

=

S AS

CH

%

70

L

% 00

O

A GO

1

CH

BA

0 10

AT

AL

0%

=N

W

1

70

BA

O PR

=P

CH

AT

CSS C ode %

80

of O /N

S AS

O

A GO

1

O

A GO

1

CH

BA

PR

I AT

O /N

S AS

selector { property : value ; }

SS

NO

ON

PR

O

L

% 00

O

BA

O PR

=

0%

A GO

=

O PR

=P

CH

AT

p { ba c k g r o un d - col or: # fff; } %

80

W

N TIO

0 10

%

GO

O /N

=

70

AL

=

=P

=P

%

70

S AS

p { ba c k g r o u n d - col or: # fff; } %

80

O /N

=

S AS

1

AT

W

L

% 00

=N

CH

AT

A GO

BA

CH

AL

=

OB

O

80

O /N

I AT

O /N

1

AT

W

ON

PR

=N

CH

A GO

=

=P

O

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

%

70

L

ON

%

AT

W

%

70

ON

%

80

ON

%

CH

AT

ON

H TC

A

S N TIO

7

=P

N TIO

O PR

%

80

O /N

=

W

A

=P

%

70

%

N TIO

O

%

70

L

% 00

=

=P

%

80

N TIO

O /N

O PR

CH

AT

%

70

=

%

80

1 %

70

SS

A

=P

N TIO

O /N

O

%

70

L

% 00

S AS

=

=P

%

80

N TIO

O /N

O PR

CH

AT

%

70

=

%

80

1 %

70

SS

A

=P

N TIO

O /N

NO

AL

%

=

GO

S AS

=P

N

TIO

BA

O

%

80

O /N

=

AL

%

0 10

CH

AT

W

NO

O

%

70

=

GO

S AS

=P

N

TIO

BA

O

%

80

O /N

=

S AS

%

70

%

CH

%

70

=

GO

S AS

=P

N

TIO

BA

O

%

80

O /N

=

CH

AT

W

S AS

=P

%

0%

10

O /N

L

OA

=

GO

S AS

=P

N

IO AT

=N

OB

PR

%

80

O /N

=

W

PR

NO

AL

0%

10

CH

AT

0%

7

L

% 00

=

GO

S AS

=P

=

O

A GO

%

80

1

CH

AT

AL

N

IO AT

%

80

O /N

=

%

70

CH

0%

7

AL

0%

10

AT

W

PR

NO

=

GO

S AS

=P

N

IO AT

%

80

O /N

=

CH

AT

W

SS

%

70

A =P

N TIO

O /N

O

=N

L

OA

L

% 00

O

=

A GO

%

80

1

CH

AT

W

BA

O PR

=N

OB

PR

SS

%

70

A =P

BA

N TIO

O

=N

O PR

O /N

0%

7

L

=

SS

%

70 by

A =P

%

80

N TIO

O /N

O /N

CH

AT

=

A

=P

N TIO

O

PR

NO

O

=N

L

OA

%

%

=

S AS

=P

N

TIO

BA

O

PR

NO

0%

10

=

=P

OB

%

70

W

%

70

%

=

W

0%

7

%

80

N TIO

O

=N

P

O PR

O /N

L

OA

O /N

%

80

%

70

L

=

A

=P

N TIO

%

O

AL

%

=

S AS

=P

N

TIO

BA

O

PR

NO

%

80

O /N

S AS

=P

W

%

70

N

IO AT

OB

PR

%

80

O /N

W

0%

7

SS

%

70

A =P

N TIO

%

80

O

=N

OB

PR

O /N

L

OA

CH

AT

W

O /N

L

=

A GO

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

CH

AT

W

O /N

L

=

%

A GO

S AS

=P

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

N

IO AT

% 00

O

1

CH

=P

0 10

CH

A GO

=

=

AT

L

% 00

S AS

0 10

CH

GO

=

=

AT

AL

0%

=N

%

70

GO

=

A GO

1

AT

W

W

O /N

L

% 00

=N

CH

BA

PR

NO

OB

PR

O

80

O /N

N

IO AT

CH

AT

1

AT

W

=P

=N

CH

A GO

SS

AT

W

N TIO

% 00

O

1

SS

=P

10

CH

A GO

A =P

=

AT

L

% 00

S AS

0 10

CH

80

O /N

=

AT

GO

N

IO AT

PR

CH

%

AL

S AS

=N

%

80

O /N

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

W

W

BA

CH

AL

0 10

OB

O

BA

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

%

70

80

O /N

I AT

O /N

1

AT

W

ON

PR

=N

CH

A GO

SS

AT

W

%

80

L

% 00

O

A GO

1

AT

W

L

% 00

CH

Created OA

=N

OB

PR

N TIO

O PR

c) body {margin-0; } 80

W

PR

NO

=

=P

O

A GO

1

AL

0 10

AT

W

NO

%

70

L

% 00

=N

AT

W

W

BA

CH

BA

PR

OB

O

A GO

I AT

O /N

1

AT

W

ON

PR

=N

CH

L

% 00

=P

O

A GO

S AS

=N

AT

W

W

BA

CH

BA

PR

OB

O

A GO

I AT

O /N

1

AT

W

ON

PR

=N

CH

L

% 00

=P

O

A GO

S AS

=N

AT

BA

PR

OB

W

BA

CH

W

I AT

PR

O

80

O /N

ON

O /N

1

AT

A GO

SS

=P

=N

CH

L

% 00

O

BA

O PR

=

0%

L

AS

S AS

b) body {margin: 0; } %

80

W

=

S AS

0 10

%

A GO

=

=

70

GO

O /N

CH

AT

a) body {margin;0:} %

80

AL

=

S AS

O

A GO

1

70

W

%

70

L

% 00

=N

AT

GO

O /N

W

BA

CH

AL

=

OB

O

W

I AT

O /N

1

L

O /N

ON

PR

=N

CH

A GO

=

=P

O

80

O /N

CH

AT

CLICK ON THE CORRECT WAY TO WRITE A DECLARATION?

W

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

%

70

L

ON

%

%

ON

AT

ON

%

ON

%

70

%

=P

W

S

AS

0%

7

O PR

N TIO

%

80

CH

AT

BA

L

OA

I AT

OB

O /N

O /N

AT

W

=

A

=P

%

70

=

A GO

S AS

=P

N TIO

%

O /N

%

N TIO

AT

%

70

BA

O

PR

NO

AL

%

=

GO

=P

O

PR

NO

N

0%

=

=P

N

IO AT

OB

%

80

O /N

=

W

0%

7

%

N

%

80

O /N

S AS

=P

N TIO

O PR

%

80

O /N

%

70

% 00

=

=

SS

A

=P

%

80

N TIO

O

%

AL

%

0 10

=

S AS

70

N

%

80

O /N

CH

S AS

=P

N TIO

O PR

%

80

O /N

% 00

=

W

=

A

=P

%

70

%

N TIO

O

%

AL

%

0 10

=

S AS

70

N

%

80

O /N

%

80

N TIO

O /N

O

O PR

L

OA

O

AL

0%

=

GO

S AS

=P

=N

N

IO AT

OB

PR

%

80

O /N

W

0%

7

%

1

CH

SS

%

70

A =P

BA

N TIO

O

=N

O PR

O /N

AL

0%

=

GO

S AS

=P

=N

N

IO AT

OB

PR

%

80

O /N

=

W

0%

7

%

80

SS

%

70 by

N TIO

O /N

BA

O

PR

NO

%

70

GO

S AS

=P

=N

N

IO AT

OB

PR

O /N

=

O

=N

L

OA

W

SS

%

70

A =P

N TIO

O

=N

P

=P

0%

7

O PR

%

80

O /N

L

OA

%

80

O /N

SS

A

=P

W

%

70

N TIO

%

O

AL

%

=

S AS

=P

N

TIO

BA

O

PR

NO

%

80

O /N

S AS

=P

W

%

70

N

IO AT

OB

PR

%

80

O /N

W

0%

7

AT

SS

%

70

A =P

N TIO

%

80

O

=N

OB

PR

O /N

L

OA

CH

AT

W

O /N

L

=

A GO

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

CH

AT

W

O /N

L

=

%

A GO

S AS

=P

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

N

IO AT

% 00

O

1

CH

=P

0 10

CH

A GO

=

=

AT

L

% 00

S AS

0 10

CH

GO

=

=

AT

AL

0%

=N

%

70

GO

=

A GO

1

AT

W

W

O /N

L

% 00

=N

CH

BA

PR

NO

OB

PR

O

80

O /N

N

IO AT

CH

AT

1

AT

A GO

=

=P

=N

CH

L

% 00

O

W

N TIO

10

CH

1

CH

=

AT

A GO

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

%

80

L

% 00

AT

W

=

S AS

0 10

CH

AL

0%

O

A GO

TIO

10

CH

1

A =P

=

AT

L

% 00

AT

W

L

O

CH

Created OA

BA

PR

NO

O

80

TIO

10

CH

A GO

=

=

AT

L

% 00

AT

W

TIO

=

AT

W

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

BA

PR

NO

OB

W

BA

CH

W

I AT

PR

O

80

O /N

ON

O /N

CH

AT

1

AT

A GO

SS

=P

=N

CH

L

VALUE =P %

AT

W

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

W

W

BA

CH

BA

PR

NO

O /N

OB

O

A GO

I AT

O /N

CH

AT

1

AT

W

ON

PR

=N

CH

L

PROPERTY =P %

AT

W

=

=P

O

A GO

1

70

CH

L

% 00

=N

AT

W

%

70

BA

CH

GO

=

BA

PR

NO

O

BA

=N

%

0 10

10

CH

A GO

A =P

=

AT

SS

%

%

80

O /N

OB

PR

O

AL

70

1

70

O

W SELECTOR =P %

L

% 00

CH

L

BA

S AS

GO

S AS

=N

N TIO

PR

NO

AT

AL

PR

=

A

=P

I AT

W

S AS

body { margin : 0 ; }

TIO

BA

%

80

O /N

=

SS

CH

S AS

%

70

A GO

ON

O /N

CH

AT

1

AT

1

CH

W

% 00

=P

=N

CH

W

S AS

O

80

BA

O PR

=N

%

70

L

% 00

O

80

O /N

W

1

CH

A GO

SS

AT

W

%

80

ON

PR

O

L

% 00

O

O /N

N TIO

10

CH

L

O PR

=

AT

A GO

=

S AS

0 10

CH

80

O /N

=

AT

GO

=

=P

=N

VALUE?

AL

=

% 00

=N

%

W

L

A GO

BA

70

80

O /N

%

70

1

CH

GO

W

PROPERTY?

%

80

AL

=

OB

O

W

I AT

PR

=N

70

L

O /N

S AS

SELECTOR?

AT

W

ON

O /N

1

CH

A GO

=

=P

O

80

O /N

CH

AT

CLICK ON THE ...

W

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W W

W eb S ite Design

W

S AS

=P

%

70

A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

W

O

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

W

/N

P

CH

AT

%

O

0%

10

=P

70

AL

=G

S AS A

=

% 80

N

TIO

NO

B RO

O

/N

P

CH

AT

W

SS

%

70

AL

O

0%

10

=G

A =P

%

80

=

NO

O

PR

Internet Structure | Web Browsers | Web Documents | Web Design Essentials

ON

O /N

CH

AT

%

70

L

ON

%

%

70

L

ON

%

%

ON

%

80

O /N

W

%

70

ON

%

80

0%

7

L

S

AS

N TIO

%

80

O /N

O PR

%

80

ON

I AT

OB

PR

O /N

W

O /N

W

%

70

% 00

=

N TIO

=

%

80

O /N

%

%

70

L

% 00

=

AT

%

70

SS

A

=P

%

80

O /N

O

AL

%

=

GO

S AS

=P

N

TIO

BA

O

PR

%

80

O /N

CH

W

=

%

70

%

=P

N

IO AT

OB

PR

CH

AT

W

=

SS

%

70

%

80

O

=N

N

N TIO

TIO

O /N

L

OA

BA

NO

P

0%

O /N

%

80

=

=P

CH

W

N TIO

O PR

%

80

O /N

%

70

% 00

=

%

70

AL

SS

A

=P

%

80

N TIO

O

%

AL

%

=

S AS

=P

N

%

80

O /N

BA

NO

P

S AS

=P

N TIO

O PR

%

80

O /N

% 00

=

W

%

70

AL

A

=P

%

70

%

N TIO

O

=

S AS

=P

N

TIO

BA

O

PR

NO

%

AL

%

%

80

O /N

=

S AS

=P

N TIO

O PR

=

=P

=N

N

IO AT

OB

PR

%

80

O /N

W

CH

0%

7

%

80

1

CH

SS

%

70

A =P

BA

N TIO

O

=N

O PR

=P

O /N

L

IO AT

OB

PR

%

80

O /N

=

CH %

70

VALUE AL

W

0%

7

%

80

%

70 by

N TIO

=P

O /N

=N

N

IO AT

OB

PR

O /N

=

% 00

O /N

=

A

=P

N TIO

O

=N

L

OA

W

SS

%

70

A =P

0%

7

O

%

80

N TIO

O

=N

P

O /N

L

OA

W

%

70

%

S AS

=P

N

TIO

BA

O

PR

NO

0%

=

=P

N

IO AT

OB

PR

%

W

%

70

%

80 W

0%

7

AT

SS

%

70

A =P

N TIO

%

80

O

=N

OB

PR

O /N

L

OA

CH

AT

W

O /N

L

=

A GO

H

SS

A

=P

N

IO

T BA

O

PR

NO

=

=P

N

IO

T BA

O

PR

CH

AT

W

O /N

L

=

%

A GO

S AS

=P

=N

W

O /N

A GO

S AS

NO

C AT

L

%

N

IO AT

OB

PR

CH

AT

W

O /N

L

=

% 00

A GO

1

CH

AT

W

BA

O PR

N

IO AT

% 00

O

1

CH

=P

0 10

CH

A GO

=

=

AT

L

% 00

S AS

0 10

CH

AL

O /N

=

AT

GO

S AS

=N

%

70

80

O /N

=

A GO

1

AT

W

W

O /N

L

% 00

=N

CH

GO

=

OB

PR

O

AL

%

O

W

AT

BA

PR

NO

N

IO AT

CH

AT

1

80

O /N

=P

=N

CH

A GO

SS

10

CH

1

CH

=

AT

A GO

D r e y RaOBLA a t s o n 3 0 M a r c h 2 0 1 6RO. BA P

%

80

L

% 00

AT

W

=

GO

S AS

O

A GO

SS

0%

10

CH

1

A =P

=

AT

L

% 00

CH

Created OA

=N

N

AT

W

=

S AS

O

A GO

=

0%

10

AT

L

% 00

=

GO

%

80

L

0 10

AT

W

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

BA

PR

NO

OB

W

BA

CH

W

I AT

PR

O

80

O /N

ON

O /N

CH

AT

1

AT

A GO

SS

=P

=N

CH

L

0 10

CH

PROPERTY RO TIO

=

AT

W

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

W

W

BA

CH

BA

PR

NO

O /N

OB

O

A GO

I AT

O /N

1

AT

W

ON

PR

=N

CH

L

0 10

AT

GO

S AS

AT

W

BA

O PR

=P

O

A GO

A =P

=

GO

S AS

10

7

1

CH

=

0%

L

% 00

%

S AS

=P

CH

AT

h2 { padding : 10px ; }

%

80

O /N

AL

SELECTOR RO

GO

S AS

O

PR

NO

=

S AS

O

A GO

1

70

BA

0 10

AT

AL

0%

=

N TIO

%

70

L

% 00

=N

AT

SELECTOR? N TIO

OB

W

BA

CH

W

I AT

PR

O

A GO

ON

O /N

CH

AT

1

AT

W

=P

=N

CH

1

CH

W

O /N

S AS

O

80

BA

O PR

O

BA

PR

NO

=P

VALUE?

A

NO

S AS

=N

%

70

L

A GO

1

AT

A GO

SS

=P

=N

=P

=N

CH

L

AT

W

L

OA

N TIO

% 00

O

BA

O PR

CH

AT

PROPERTY?

=P

10

CH

A GO

=

=

AT

W

=

S AS

0 10

CH

GO

O /N

=

AT

AL

=

S AS

O

A GO

1

70

GO

%

70

L

% 00

=N

AT

W

W

BA

CH

AL

=

OB

O

80

O /N

I AT

O /N

1

AT

W

ON

PR

=N

CH

A GO

=

=P

O

80

O /N

CH

AT

CLICK ON THE ...

W

A GO

=

S AS

SS

%

70

A =P

O

=N

N

PR

OB

IO AT

O /N

W

L

OA


W eb S ite Design CSS

W W

W C r e at e d

by

B at t y L at t y 18 M a rc h 2 015.


Turn static files into dynamic content formats.

Create a flipbook