Cascading Style
Sheets (CSS)
Desain Web – SIF15012
Aryo Pinandito, ST, M.MT
Introduction to CSS
What is CSS?
Cascading Style Sheets (CSS):
is a simple mechanism for
adding style (e.g. fonts, colors,
layouts) to Web documents.
Styles provide powerful control
over the presentation of web
pages.
Internal Style Sheet
A style sheet consists of a set of rules.
Each rule consists of one or more selectors and a
declaration block.
A declaration block consists of a list of
declarations in curly braces ({}).
Each declaration consists of a property, a colon (:),
a value, then a semi-colon (;).
Style Sheet Syntax
selector { property: value; }
Three Scopes of CSS
Local
confined to a single element (tag)
Internal
affect elements in an entire page
External
can affect multiple pages
Precedence
Local > Internal > External
Local Style Sheet
Example
<h1
style="color:white;
background:orange;
font-‐
weight:bold;">Internal
Style
Sheet
Applied
to
Header
1</h1>
Practice
add “text-align” property to make it centered
add “border” property to let it has black, 1px thick, solid
border at left, right, top, and bottom
Tip: use “border:
<top>
<right>
<bottom>
<left>;”
format for 4 sides; use “border-<side>: xx yy zz;” for a
particular side, where <side> can be left, right, top or
bottom. Can apply to other similar properties.
Internal Style Sheet
How to create?
Put <style>
</style> tag between
<head>
and
</head> tags of your HTML page
Use type attribute to indicate the style sheet type,
usually type=“text/css”
Specify a default style sheet language for the whole
document by
<meta
http-‐equiv="Content-‐Style-‐Type"
content="text/css"
/>
Put your set of style sheet rules in between <style>
and </style> tags
Internal Style Sheet
Practice
Create same style in the example in the local style
sheet section, but using internal style sheet instead.
External Style Sheet
An external style sheet is simply a text-only file that
contains only CSS rules.
How to link to external style sheet?
<link
href=“URL
of
CSS
File"
rel="stylesheet"
type="text/css"
/>
Practice
Create a file called “mystyle.css” and do the
example in local style sheet, but as external style
sheet
Selector Type
Tag
redefines the look of a specific tag
body
{background-‐color:
#000000;}
Class
can apply to any tag
.indent{margin-‐right:5%;margin-‐left:
5%;}
In HTML, <p
class="indent">
Advanced
IDs, pseudo-class selectors
#myId
{
color:
#38608A;
}
a:hover
{
color:
#FF0000;
}
Values - Lenghts
Lengths [a number + unit identifier]
Unit identifier can be
em (font size of the relevant font),
ex (x-height of the relevant font),
px (pixels),
in (inches), cm (centimeter), mm,
pt (points, =1/72 in), pc (picas, 1 pc = 12 pt)
E.g.
h1
{
margin:
0.5em
},
h1
{
margin:
1ex
},
p
{
font-‐size:
12px
},
h2
{
line-‐height:
3cm
},
h4
{
font-‐size:
12pt
},
h4
{
font-‐size:
1pc
}
Values – Percentages &
URIs
Percentages [a number + %]
p
{
line-‐height:
120%
}
URLs & URIs
url(“<A URI/URL>”), or
url(<A URI/URL>)
li
{
list-‐style:
url(http://ptiik.ub.ac.id/image/
bullet2.jpg)
disc
}
body
{
background:
url("yellow.png")
}
Note: “yellow.png” location is relative to the URI of the
style sheet.
Values - Colors
Colors
A color is either a keyword (e.g. white, red), or a
numerical RGB specification (e.g. ).
A numerical RGB specification can be:
An RGB value in hexadecimal notation, which is a ‘#’
immediately followed by a 6 digit or 3 digit
hexadecimal number, i.e.
#rrggbb or #rgb.
e.g. #ff0000, #f00
An RGB value in functional notation, i.e.
rgb(rrr,ggg,bbb),
rgb(r%,g%,b%)
e.g. rgb(255,0,0),
rgb(100%,0%,0%)
Values - Colors
16 original predefined color codes (names)
http://www.elizabethcastro.com/html/colors/
sixteencolors.html
216 browser safe colors
Colors display correctly on all color monitors
http://webdesign.about.com/od/colorcharts/l/
bl_colors.htm
Values - Strings
String
Sequence of characters written inside double quotes
("") or single quotes ('').
Examples
"this
is
a
'string'"
"this
is
a
\"string\""
'this
is
a
"string"'
'this
is
a
\'string\''
CSS Box Model
Box Model
Box Properties
margin : <length>
border : <style> <width> <color>
padding : <length>
width & height : <length>
Examples: p
{
margin:
50px;
padding:
30px;
float:
right;
height:
200px;
width:
400px;
border:
5px
solid
#006633;
}
Box Properties
Practice
Create an internal style called “boxStyle”
Insert an image that fits into one page.
Apply the “boxStyle” to the image
Color value: #9DACBF
Text Properties
font-family : <font name>, | <font name>, …
font-size : <length> | <percentage> | inherit
font-weight : normal | bold | lighter | 100 | 200 ...
normal = 400, bold = 700, lighter is relative
font-style : normal | italic | oblique | inherit
line-height : normal | <length> | <percentage> | inherit
text-transform : capitalize | uppercase | lowercase | none | inherit
color : <color>
text-indent : <length> | <percentage> | inherit
text-align : left | right | center | justify | inherit
Text Properties Practice
Practice
Create a paragraph text
Create internal style for <p> tag as following
p
{
margin:
50px;
padding:
50px;
clear:
right;
float:
right;
border:
10px
solid
#0066CC;
}
Create a internal style called “textStyle” and apply it
to paragraph text
Text Properties Practice
Color is #666666; font-family is Arial, Helvetica, sans-
serif; text-indent is 20%;
Positioning Properties
height : <length> | <percentage> | inherit
width : <length> | <percentage> | inherit
left : <length> | <percentage> | auto | inherit
top : <length> | <percentage> | auto | inherit
right : <length> | <percentage> | auto | inherit
bottom : <length> | <percentage> | auto | inherit
position : static | relative | absolute | fixed | inherit
left/top/right/bottom usually used when position is
specified as absolute.
Values for position property
static
Default. An element with position: static always has the position the normal
flow of the page gives it (a static element ignores any top, bottom, left, or right
declarations)
relative
An element with position: relative moves an element relative to its normal
position, so "left:20" adds 20 pixels to the element's LEFT position
absolute
An element with position: absolute is positioned at the specified coordinates
relative to its containing block. The element's position is specified with the
"left", "top", "right", and "bottom" properties
fixed
An element with position: fixed is positioned at the specified coordinates
relative to the browser window. The element's position is specified with the
"left", "top", "right", and "bottom" properties. The element remains at that
position regardless of scrolling. Works in IE7 (strict mode)
Positioning Properties
A floated box is shifted to the left or right until its
outer edge touches the containing block edge or the
outer edge of another float.
Example
.positionStyle
{
height:
400px;
width:
200px;
left:
50px;
top:
50px;
right:
50px;
bottom:
50px;
position:absolute;
float:
right;
}
Positioning Properties
Practice – thumbnail image
Create a table with only one cell
Insert the following image 10 times inside the only
cell of the table.
Create a rule called “.thumbImg” which floats to left,
has a margin of 20 pixels on the top & bottom and
15 pixels on the left & right; has a 5-pixel solid border
with silver color
Apply the rule to all the 10 images
List Properties
list-style: [disc | circle | square | decimal | lower-
roman | upper-roman | lower-alpha | upper-alpha |
none] || [inside | outside] || [<url> | none]
Example
li
{
list-‐style:
url(https://cdn1.iconfinder.com/data/
icons/Momentum_GlossyEntireSet/32/bullet-‐
black.png)
disc
inside;
}
Can use the list-style-type, list-style-image, list-
style-position separately.
List Properties
Difference between inside and outside
Outside
Background Properties
background-‐color:
<color>
|
transparent
|
inherit
background-‐image:
<uri>
|
none
|
inherit
background-‐position:
[[
<percentage>
|
<length>
|
left
|
center
|
right
]
[<percentage>
|
<length>
|
top
|
center
|
bottom
]?
]
|
[
[
left
|
center
|
right
]
||
[
top
|
center
|
bottom
]
]
|
inherit
background-‐repeat:
repeat
|
repeat-‐x
|
repeat-‐y
|
no-‐repeat
|
inherit
background-‐attachment:
scroll
|
fixed
|
inherit
Background Properties
Practice
body
{
background-‐image:
url(http://ptiik.ub.ac.id/labkcv/
assets/img/logo.png);
background-‐repeat:no-‐repeat;
color:
#FFFFFF;
background-‐position:center
center;
background-‐color:
#666666;
background-‐attachment:
fixed;
}
<div> and <span> tags
<div>
is a generic block-level tag
<span>
is a generic inline tag, it spans a series of characters
Example
.subTitle
{
font-‐family:
Georgia,
Times,
serif;
font-‐size:
14px;
font-‐weight:
bold;
color:
#960000;
}
<p>blah blah blah <span class="subTitle">some text in
different style</span> text text text text</p>
Assignment
Assignment: CSS
From the previous assignments, apply CSS to
beautify the page.
Apply CSS for:
Fonts
Color
Background
Border
Floats
Any Questions?
