CSS and Layout

CSS
and
Layout

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

XHTML
Related
CSS
Elements

•  You
can
group
XHTML
–
page
using
div
and

span
elements

•  div
and
span
elements
do
not
do
anything,

unless
they
are
connected
to
css

•  xhtml:

–  <p>Text text text <span class="important">text
text</span>. Text text text.</p>
•  CSS:

–  span.important { color: RGB(255,0,0); }

span
and
div?

•  By
using
div,
you
can
divide
xhtml
–
page
in
to

logical
pieces.
The
posiKon
of
these
are

deﬁned
in
CSS

–  Example:
navigaKon,
header,
footer,
contents

•  Span
is
used
to
give
layout
for
text

span
and
div

<div class="header">
<h1>Title</h1>
</div>
<div class="contents">
<p>Contents: <span
class="highlight">this is different</span></p>
</div>
<div class="footer">
<p>Copyright 2008</p>
</div>

Layout
Basics

•  XHTML
page
is
divided
into
“boxes”
by
using

the
div-‐element

•  Box
consists
of

–  Content

–  Padding

–  Border

–  Marginal

CSS
Box
Model

p.leipateksti {
border: 1px solid black;
}

CSS
Box
Model

p.leipateksti {
width: 50%;
}

CSS
Box
Model

p.leipateksti {
padding: 20px;
}

CSS
Box
Model

p.leipateksti {
margin: 20px;
}

Features

•  Margins

–  margin-top
–  margin-bottom
–  margin-left
–  margin-right
–  All
together:
margin
•  Padding

–  padding-‐top

–  padding-‐boRom

–  padding-‐leS

–  padding-‐right

–  All
together:
padding

Features

•  Borders

–  border-top-width
–  border-bottom-width
–  border-right-width
–  border-left-width
–  border-width
–  border-color
–  border-style (none, dotted, solid, double, groove, ridge, inset,
outset)
•  CombinaKons

–  border-top
–  border-right
–  border-bottom
–  border-left
•  All
together

–  border

Features

•  width
•  height
•  float (none, left, right)

h1 {
Example

font-family: Arial, Helvetica, sans-serif;
color: RGB(0,0,255);
background-color: RGB(200,200,200);
border: 2px dotted RGB(0,0,0);
padding: 10px;
text-align: center;
}

Example:
Layout

<html>
<head><title>Otsikko</title></head>
<body>
<!– whole page inside one div -->
<div id="wholepage">

</div>
</body>
</html>

Example:
Layout

<html>
<head><title>Otsikko</title></head>
<body>
<div id="wholepage">
<div id="header">
<!– Title -->
</div>
<div id="navigation">
<!– Navigation -->
</div>
<div id="contents">
<!– Contents -->
</div>
<div id="footer">
<!– Footer -->
</div>
</div>
</body>
</html>

Example:
Layout

#wholepage
{
width: 100%;
color: RGB(0,0,0);
border: 1px solid RGB(100,100,100);
}

Example:
Layout

#header
{
padding: 10px;
border-bottom: 1px solid RGB(100,100,100);
}

#navigation
{
float: left;
width: 160px;
margin: 0;
padding: 10px;
}

Example:
Layout

#contents
{
margin-left: 200px;
border-left: 1px solid RGB(100,100,100);
padding: 10px;
max-width: 600px;
}

#footer
{
padding: 10px;
color: RGB(100,100,100);
border-top: 1px solid RGB(100,100,100);
}

CSS and Layout

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à CSS and Layout

Similaire à CSS and Layout (20)

Plus de Jussi Pohjolainen

Plus de Jussi Pohjolainen (20)

Dernier

Dernier (20)

CSS and Layout