Session 8:
Cascading Style Sheet
J 0394 – Perancangan Situs Web
Program Studi Manajemen
Universitas Bina Nusantara
Cascading Style Sheet
HTML was originally developed primarily as a
universal coding system that would enable
anyone to view the same pages.
HTML offered structural formatiing but did not
allow designers much control over the
appearance of the page.
While the browser manufacturers were trying to
satisfy this, the World Wide Web Consortium
went to work on a system that would keep HTML
universal while allowing designers more control
over the look of their pages that is called
Cascading Style Sheet
BWD
Bina Nusantara University
2
Cascading Style Sheet (2)
CSS is a simple style that let you assign
several properties at once to all the
elements on your page marked with a
particular TAG.
For example, display H1 headers in a
particular size, font, and color.
BWD
Bina Nusantara University
3
Cascading Style Sheet (3)
The Advantages of using Style Sheet:
– Save time
– Easy to change
– Computers are better at applying styles
consistently than you are
– Styles let you control text in ways that are out
of reach of HTML TAGS
– Styles make it easy to create a common
format for all your Webpages and you still only
have to define the style once
BWD
Bina Nusantara University
4
Cascading Style Sheet (4)
Disadvantages of using style sheets:
– No browser supports them completely.
– CSS is in a state of change
– Take a more time to learn how to use
them, because they have a distinct
syntax.
BWD
Bina Nusantara University
5
Cascading Style Sheet (5)
The Anatomy of a Style:
– Made up of a tag name
– Each definition contains a property, a colon,
and one or more values
– Some properties can be grouped together with
a special umbrella property
BWD
Bina Nusantara University
6
The Anatomy of a Style (continued):
– Definition always look the same, whether the
style is applied locally, internally, or externally.
The only difference is in the punctuation
surrounding them (curly brackets vs. quote
marks)
– Some properties are automatically inherited
from tag to tag.
BWD
Bina Nusantara University
7
Cascading Style Sheet (6)
Style Sheets Properties :
–
–
–
–
–
–
–
–
–
BWD
Colour and background properties
Font properties
Text properties
Box properties
Classification properties
Positioning properties
Printing properties
Filter properties
Miscellaneous properties
Bina Nusantara University
8
Cascading Style Sheets (7)
Colour and Background
Properties
– color:”color_value”
– background-color:”color_value |
transparent”
– background-image:”URL | none”
BWD
Bina Nusantara University
9
Cascading Style Sheets (8)
Font Properties
– font-size:”absolute_size | relative_size |
length | percentage”
– font-family:“[[family_name |
generic_family],]* [family_name |
generic_family]”
– font-weight:”normal | bold | bolder |
lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900”
– font-style:”normal | italic | oblique”
BWD
Bina Nusantara University
10
Cascading Style Sheets (9)
Text Properties
– letter-spacing:”normal | length”
– text-decoration:none | [ underline ||
overline || line-through || blink ]
– text-align:“right | left | center | justify”
– text-indent:”length | percentage”
BWD
Bina Nusantara University
11