CSS

CSS

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

CSS

•  CSS
is
a
stylesheet
language
used
to
describe

the
presenta>on
of
a
document
wri@en
in

markup
language

•  Usually
used
with
(x)html

•  Deﬁning
fonts,
colors
and
layout

•  Separates
document
content
and

presenta>on

Some
History

•  CSS1
spec
ﬁnished
1996,
it
took
three
years
before

browsers
supported
CSS1

•  2000
IE
5.0
for
Mac
was
the
ﬁrst
browser
to
fully

support
CSS1

•  =>
CSS
Filtering

•  S>ll
hundreds
of
bugs
in
browsers

CSS
Versions

•  CSS1

–  W3C
Recommenda>on
1996

–  Typography,
fonts,
text
alignment

–  No
layout
and
design

•  CSS2

–  W3C
Recommenda>on
1998

–  Layout,
style
sheets
could
be
imported,
selectors

–  Revision
to
CSS2
-‐>
CSS2.1

•  CSS3

–  Several
speciﬁca>ons:
modules

–  Not
ready
yet,
four
modules
are
published
under
recommenda>on:

media
queries,
namespaces,
selectors
level
3,
Color

–  Some
func>onality
already
implemented
in
browsers

Rendering
Engines

h@p://www.quirksmode.org/css/contents.html

<blink>
again!?

•  April
3rd,
2013
Google
launches
Blink,
a
fork
of

the
WebKit
browser
engine

–  h@p://www.chromium.org/blink

•  Apple
and
Google
will
have
their
own

implementa>ons
of
WebKit…

•  Mozilla
and
Samsung
collabora>ng
on
new
web

browser
engine

–  h@p://blog.mozilla.org/blog/2013/04/03/mozilla-‐and-‐
samsung-‐collaborate-‐on-‐next-‐genera>on-‐web-‐
browser-‐engine/

Before
CSS

•  Presenta>on
was
part
of
the
document

structure:

<h2 align="center">
<font color="red" size="+4" face="Times New Roman, serif">
<i>Usage of CSS</i>
</font>
</h2>

•  Many
problems…

Using
CSS

•  Structure
is
clear:

<h2>Usage of CSS</h2>
•  Presenta>on
is
clear:

h2 {
text-align: center;
color: red;
font: italic large "Times New Roman", serif;
}

CSS
Possibili>es

•  Colors,
fonts,
layout,
sizes,
borders..

•  Possible
to
do
diﬀerent
css
–
ﬁles
for
prin>ng,

mobile
devices,
desktop
computers.

•  See

–  h@p://www.csszengarden.com/

Linking
CSS
to
Web
Document

<html>
<head>
<title>Page</title>
<link rel="stylesheet"
type="text/css"
media="screen"
href="screen.css" />
</head>
<body>
<h1>Title</h1>
<p>paragraph</p>
</body>
</html>

Media
Types

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen"
href="screen.css" />
<link rel="stylesheet" type="text/css" media="handheld"
href="mobile.css" />
<link rel="stylesheet" type="text/css" media="print"
href="print.css" />
</head>
<body>
<h1>Title</h1>
<p>paragraph</p>
</body>
</html>

Linking

•  Linking
to
external
CSS

–  <link
rel="stylesheet"
type="text/css"
href="/
style.css"
media="screen">

•  The
same
using
@import
rule
and
"internal"

style
sheet

–  <style
type="text/css">

– 

@import
url(/style.css);

–  </style>

Internal
CSS

•  To
use
internal:

–  <style
type="text/css"
media="screen,projec>on">

– 

⋮
CSS
rules…

–  </style>

•  And
to
use
inline

–  <ul
style="font-‐size:120%;
color:#060">

– 

⋮
list
items…

–  </ul>

CSS3
Media
Queries

•  Media
Queries
is
CSS3
extension

–  <link
rel="stylesheet"
type="text/css"
href="/
style.css"
media="handheld
and
(min-‐width:
20em)">

<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>

<meta charset="UTF-8">
<style type="text/css" media="only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)">

body {
background-color: RGB(255,0,0);
}

</style>
<script type="text/javascript"></script>

</head>

<body>
The content
</body>

</html>

General
Syntax

/* A sample style sheet */
@import url(base.css); // at-rule

h2 { // rule-set
color: #666;
font-weight: bold;
}

CSS
Rule
Sets

•  CSS
rule
sets

–  selector
declara>on

•  Example:

–  h1
{
color:
blue;
}

•  h1
=
selector

•  color:
blue;
=
declara>on

Selectors

•  Element
(h1)

•  Class
(.important)

•  Class
(h1.important)

•  ID
(#important)

•  Contextual
(h1
p)

•  Pseudo
(a:link)

Element

•  XHTML:

<h1>Title</h1>!
•  Css:

h1 {!
color: RGB(255,0,0);!
}!

Class

•  XHTML:

<h1 class="tarkea">Otsikko</h1>!
<p>Tässä tekstiä ja tämä <span
class="tarkea">erityisen tärkeää
tekstiä</span></p>!
<p class="tarkea">Ja tämä vasta tärkeää
onkin</p>!
•  Css:

.tarkea {!
color: RGB(255,0,0);!
}!

Class

•  Css:

h1.tarkea {!
color: RGB(255,0,0);!
}!

ID

•  XHTML:

<h1 id="paaotsikko">Otsikko</h1>!
•  Css:

#paaotsikko {!
color: RGB(255,0,0);!
}!

Contextual

•  XHTML:

<ul>!
<li>Porkkana</li>!
</ul>!
•  Css:

ul li{!
color: RGB(255,0,0);!
}!
•  This
is
diﬀerent!

•  h1, p{!
color: RGB(255,0,0);!
}!

Pseudo

•  Example:

<a href="http://www.tamk.fi/">TAMK</a>!
!
a:link { color: red; }!
a:visited { color: blue; }!
a:active { color: lime; }!
a:hover { color: green; }!

Font-‐family

•  sans-‐serif,
example:
Helve>ca

•  serif,
example:
Times

•  cursive,
example:
Zapf-‐Chancery

•  fantasy,
example:
Impact

•  monospace,
example:
Courier

•  Example:

–  font-‐family:
verdana,
arial,
sans-‐serif

font-‐style,
font-‐weight

•  Font-‐style

–  normal
(default),
italic,
oblique

–  example:

•  font-‐style:
italic;

•  Font-‐weight:

–  normal,
bold,
bolder,
lighter,
100,
200
...
900

–  normal
=
400

–  bold
=
700

–  bolder
and
lighter

Lengths
and
Units

•  The
value
type
for
many
CSS
proper>es
is

speciﬁed
as
<length>.

•  Can
be
rela>ve
or
absolute

•  Rela>ve
units

–  em
–
current
font
size
(1
em)

–  ex
–
x
height
of
the
current
font
(heigth
of
char
x)

–  px
–
pixels,
considered
as
rela>ve
since
no
ﬁxed

physical
measure

•  Absolute
units

–  mm,
cm,
in,
pt,
pc

font-‐size

•  And
even
more:

–  font-size: x-small; /* absolute */
–  font-size: larger; /* relative */
–  font-size: 12pt; /* unit of length */
–  font-size: 80%; /* percentage */

Colors

color: red;
color: rgb(255,0,0);
color: #FF0000;
color: #F00;

// CSS3
rgba(0, 160, 255, 0.2)

Background

•  Background
color:

–  background-‐color:
#C0C0C0;

•  Background
image:

–  background-‐image:
url("marble.gif");

–  Repeat

•  repeat
(default):
repeat
both
direc>ons

•  repeat-‐x:
repeat
horizontally

•  repeat-‐y:
repeat
ver>cally

•  no-‐repeat:
no
repeat

–  background-‐a@achment:
ﬁxed
|
scroll

•  Is
the
image
s>ll
or
does
it
move
when
scrolling

Background
Image
Posi>on

background-position: right top; /* right upper-corner */
background-position: 100% 0%; /* right upper-corner */
background-position: 100%; /* right upper-corner */
background-position: center bottom;/* center bottom */
background-position: 50% 100%; /* center bottom */
background-position: 100%; /* right top */
background-position: 50% 10px; /* center 10 pixels from top */

Text
Features

•  word-‐spacing

•  le@er-‐spacing

•  text-‐decora>on

–  underline

–  overline

–  line-‐through

–  blink

Text
Features

•  ver>cal-‐align

–  baseline,
middle,
sub,
super,
text-‐top,
text-‐bo@om,
top,
bo@om,

prosenxluku

•  text-‐transform

–  capitalize,
uppercase,
lowercase

•  text-‐align

–  ley,
right,
center,
jus>fy

•  text-‐indent

•  line-‐height

CASCADE,
SPECIFICITY
AND

INHERITANCE

Cascade

// What now?
h1
{
background-color: rgb(100,100,100);
}

h1
{
color: rgb(255,0,0);
}

Cascade

// And now?
h1
{
}

h1
{
}

Process
of
Resolu>on

1.  For
a
given
property,
find
all
declara>ons
that
apply
to
a

specific
element.

2.  Sort
the
declara>ons
according
to
their
levels
of

importance,
and
origins.

–  !important statement

–  origin?
user-‐agent
css,
author
css
(link),
user
css

3.  Sort
declara>ons
with
the
same
level
of
importance
and

origin
by
selector
specificity.

–  h@p://reference.sitepoint.com/css/specificity

4.  Finally,
if
declara>ons
have
the
same
level
of
importance,

origin,
and
specificity,
sort
them
by
the
order
in
which

they’re
specified;
the
last
declara>on
wins.

Inheritance

•  Pass
proper>es
from
parent
to
child

•  CSS
div {
font-size: 20px;
}
•  HTML

<div>
<p>
This <em>sentence</em> will have a 20px
<a href="#">font-size</a>.
</p>
</div>

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
posi>on
of
these
are

deﬁned
in
CSS

–  Example:
naviga>on,
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

–  Width

–  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-‐bo@om

–  padding-‐ley

–  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)
•  Combina>ons

–  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);
border: 2px dotted RGB(0,0,0);
padding: 10px;
text-align: center;
}

Posi>oning

•  PosiJon
property
is
used
to
define
whether

box
is
absolute,
rela>ve,
sta>c
or
fixed

–  staJc
–
default
value

–  relaJve
–
box
can
be
offset
(top,
right,
bo@om,

ley)

–  absolute
–
pulls
the
box
out
of
normal
flow,
can

be
placed
anywhere
(top,
right,
bo@om,
ley)

–  fixed
–
like
absolute,
but
when
scrolling
stays
in

the
same
place

<!DOCTYPE
html>

<html>
<body>
<head>

<>tle>
<nav id="navigation">
<ul>

Title

<li><a href="this.html">This</a></li>

</>tle>

<li><a href="that.html">That</a></li>

<li><a href="theOther.html">The Other</a></li>

<meta
charset="UTF-‐8">
</ul>

<style
type="text/css"
media="screen">
</nav>

#navigaJon
{

posiJon:
absolute;
<section id="content">

top:
0;
<h1>Title</h1>

leT:
0;
<p>Text text.</p>

width:
200px;
</section>
</body>

}

</html>

#content
{

margin-‐leT:
200px;

}

</style>

<script
type="text/javascript"></script>

</head>

Floa>ng

•  Problem
in
previous
example
is
that
there
is

now
way
to
determine
when
absolute
box

ends

–  How
to
put
footer
below
these
boxes?

•  Use
ﬂoaJng
box

–  Floa>ng
a
box
will
shiy
it
to
the
right
or
ley
of
a

line,
with
surrounding
content
ﬂowing
around
it.

HTML

<nav id="navigation1">
<ul>
</ul>
</nav>

<nav id="navigation2">
<ul>
</ul>
</nav>

<section id="content">
<h1>Title</h1>

</section>

<footer>
<p>kk</p>
</footer>

CSS

#navigation1 {
float: left;
width: 200px;
}

#navigation2 {

float: right;
width: 200px;
}

#content {
margin: 0 200px;
}

footer {
}

Clear

•  If
you
don't
want
next
box
to
wrap
around
the

ﬂoa>ng
objects,
use
clear

–  clear:
ley

–  clear:
right

–  clear:
both

•  Let's
add

–  footer
{

– 

border:
1px
solid
black;

– 

clear:
both;

–  }

Example:
Layout
using
divs

<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);
clear: both;
}

!

<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>

<style type="text/css" media="screen">

#roundCorners {
border: 5px solid #8b2;
background: #fc0;
padding: 20px;
border-radius: 0px 10px 30px 50px;
box-shadow: 15px 15px 3px 5px #999;
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
</style>

</head>

<body>
<section id="roundCorners">
The content
</section>
</body>
</html>

A@ribute
selectors

•  abbr[title] { border-bottom: 1px dotted #ccc }
•  input[type=text] { width: 200px; }
•  [this^=that] will match a the value of an attribute (“this”) that
begins with something (“that”)
•  [this$=that] will match a the value of an attribute (“this”) that
ends with something (“that”)
•  [this*=that] will match a the value of an attribute (“this”) that
contains with something (“that”), be it in the beginning, middle,
or end.

<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>

<style type="text/css" media="screen">
a:link {
transition: all .5s ease 0;
font-size: 1em;
color: hsl(36,50%,50%);
}
a:hover {
color: hsl(36,100%,50%);
font-size: 2em;
}
</style>
</head>
<body>
<section>
<a href="">The content</a>
</section>
</body>
</html>

#moldme {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width: 300px;
height: 300px;
background: hsl(36,100%,50%);

// only in webkit (transform: is standard)
-webkit-transform: rotate(-10deg);
-webkit-transform: skew(20deg,10deg);

background: linear-gradient(orange, red);

}

CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a CSS

Similar a CSS (20)

Más de Jussi Pohjolainen

Más de Jussi Pohjolainen (20)

Último

Último (20)

CSS