Cascading Style Sheets

Cascading Style Sheets
(CSS)
-Tutorial
- Lesson
Cascading Style Sheets (CSS)
• Software yang dibutuhkan:
browser dan teks editor
• CSS adalah style language untuk
mendefinisikan layout dokumen HTML
ex. Fonts, colours, margins,lines, height,
width, background images, advanced
positions, etc..
Cascading Style Sheets (CSS)
• Perbedaan CSS & HTML:

HTML digunakan untuk membuat structure content. CSS
digunakan untuk formatting structured content.
• Keuntungan menggunakan CSS:

– Mengkontrol layout banyak dokumen dari satu style
sheet.
– Lebih akurat dalam mengkontrol layout
– Mengaplikasikan perbedaan layout ke berbagai jenis
media ex. Screen, print, etc..
– Dapat menggunakan teknik-teknik tertentu.
HTML vs. XHTML
• Strict
• Transitional
• Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head> <title>My XHTML Page</title>
</head>
<body>
<p>This is my first XHTML page.</p>
</body>
</html>
Cara Kerja CSS
• Sintaks dasar CSS:
HTML -> <body bgcolor=“#FF0000”>
CSS -> body {background-color: #FF0000;}
Selector {property: value;}
Lokasi tempat pemformatan dilakukan pada tag(s) HTML
Yang dilakukan property

Nilai dari property
Applying CSS to an HTML Document
• In-line (the attribute style)

Menggunakan atribut style HTML
ex. <html>
<head> <title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
• Internal (the tag style)
Menyertakan kode CSS menggunakan tag HTML <style>
ex. <html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
• External (link to a style sheet)

ex.
<link rel="stylesheet" type="text/css“ href="style/style.css" />

<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css“ href="style/style.css" />
</head>
<body>
...
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Colors & Backgrounds
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
Foreground color: the 'color' property
h1 {
color: #ff0000;
}
Colors can be entered as hexadecimal values

as in the example above (#ff0000), or you can
use the names of the colors ("red") or rgb-
values (rgb(255,0,0)).
The 'background-color' property
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Background images [background-image]
body {
background-image: url("butterfly.gif");
}
h1 {
color: #990000; background-color: #FC9804;
}
Notice how we specified the location of the image as

url("butterfly.gif"). This means that the image is located in the
same folder as the style sheet. You can also refer to images in other
folders using url("../images/butterfly.gif") or even on the Internet
indicating the full address of the file:
url("http://www.html.net/butterfly.gif").
Repeat background image [background repeat]
Value
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: repeat
Example: background-repeat: no repeat
body {
background-repeat: no-repeat;
}
h1 {
color: #990000;
}
Lock background image [background-attachment]
The property background-attachment specifies whether a

background picture is fixed or scrolls (scroll) along with the
containing element.
body {
background-attachment: fixed;
}
h1 {
color: #990000;
}
Place background image [background-position]
Value Description
The image is positioned 2
background-position: 2cm cm from the left and
2cm 2 cm down the page
The image is centrally
background-position: 50% positioned and one
25% fourth down the page
The image is positioned
background-position: top in the top-right
right corner of the page
body {
background-position: right bottom;
}
h1 {
color: #990000;
}
Compiling [background]
With background you can compress several properties and thereby

write your style sheet in a shorter way which makes it easier to read.
background-position: right bottom;
Dapat di tulis langsung:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Urutan:
[background-color] | [background-image] | [background-repeat] |
[background-attachment] | [background-position]
Apabila tidak diisi maka akan diset sebagai default.

Fonts
• Font family [font-family]
h1 {font-family: arial, verdana, sans-serif;
}
h2 {font-family: "Times New Roman", serif;
}
Fonts
Font style [font-style]
The property font-style defines the chosen font either in normal,
italic or oblique. In the example below, all headlines marked with
<h2> will be shown in italics.
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif; font-style: italic;
}
Layout:
Heading 1 written in Arial
And heading 2 in Times New Roman - italic
Fonts
Font variant [font-variant]
The property font-variant is used to choose between
normal or small-caps variants of a font. A small-caps
font is a font that uses smaller sized capitalized letters
(upper case) instead of lower case letters.
h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}
Fonts
Font weight [font-weight]
The property font-weight describes how bold or "heavy" a font
should be presented. A font can either be normal or bold. Some
browsers even support the use of numbers between 100-900 (in
hundreds) to describe the weight of a font
Ex.
p{
font-family: arial, verdana, sans-serif;
}
td {
font-family: arial, verdana, sans-serif; font-weight: bold;
}
Fonts
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Font weight - Lesson 4, Example 4 | CSS Tutorial | HTML.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="lesson4_ex4.css" type="text/css" media="all" />
</head>
<body>
<p> </p>
<table border="1" cellpadding="10">
<tr>
<td>Text in bold in the cells</td>
</tr>
</table>
<p>Normal text here</p>
</body>
</html>
Fonts
Font size [font-size]
The size of a font is set by the property font-size.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Fonts
Compiling [font]
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Dapat dipersingkat:
p { font: italic bold 30px arial, sans-serif; }
Urutan:
font-style | font-variant | font-weight | font-size | font-family
TEXT
Text indention [text-indent]
The property text-indent allows you to add an
elegant touch to text paragraphs by applying an
indent to the first line of the paragraph. In the
example below a 30px is applied to all text
paragraphs marked with <p>:
p{
text-indent: 30px;
}
TEXT
Text alignment [text-align]
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
TEXT
Text decoration [text-decoration]
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
TEXT
Letter space [letter-spacing]
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
TEXT
Text transformation [text-transform]
The text-transform property controls the capitalization of a text. You can choose to capitalize, use
uppercase or lowercase regardless of how the original text is looks in the HTML code.
• capitalize
– Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".
• uppercase
– Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".
• lowercase
– Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".
• none
– No transformations - the text is presented as it appears in the HTML code.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Links
a{
color: blue;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:active {
background-color: #FFFF00;
}
a:hover {
color: orange; font-style: italic;
}
Links
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Menghilangkan garis bawah pada link

a{
text-decoration:none;
}
Identification and grouping of
elements (class and id)
Grouping elements with class
Ex. In HTML
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Then we want the white wine links to be yellow, the red

wine links to be red and the rest of the existing links on
the webpage to stay blue.
Dalam HTML
<p>Grapes for white wine:</p>

<ul>
<li><a href="ri.htm“ class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul> <p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
a{
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Identification of element using id
In addition to grouping elements, you might need to
identify one unique element.
<h1>Chapter 1</h1> <h1 id="c1">Chapter 1</h1>
... ...
<h2>Chapter 1.1</h2> <h2 id="c1-1">Chapter 1.1</h2>
... ...
... ...
<h1>Chapter 2</h1> <h1 id="c2">Chapter 2</h1>
... ...
... ...
<h3>Chapter 2.1.2</h3> <h3 id="c2-1-2">Chapter 2.1.2</h3>
… ...
Identification of element using id
Let us say that the headline for chapter 1.2

must be in red. This can be done accordingly
with CSS:
#c1-2 {
color: red;
}
Grouping of elements (span and div)
Grouping with <span>
The element <span> is what you could call a neutral element which does
not add anything to the document itself. But with CSS, <span> can be used
to add visual features to specific parts of text in your documents.
<p>Early to bed and early to rise

makes a man <spanclass="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
span.benefit {
color:red;
}
Grouping with <div>
Whereas <span> is used within a block-level element as seen in the
previous example, <div> is used to group one or more block-level
elements.
<div id="democrats"> <div id="republicans">

<ul> <ul>
<li>Franklin D. Roosevelt</li> <li>Dwight D. Eisenhower</li>
<li>Harry S. Truman</li> <li>Richard Nixon</li>
<li>John F. Kennedy</li> <li>Gerald Ford</li>
<li>Lyndon B. Johnson</li> <li>Ronald Reagan</li>
<li>Jimmy Carter</li> <li>George Bush</li>
<li>Bill Clinton</li> <li>George W. Bush</li>
</ul> </ul>
</div> </div>
#democrats {
background:blue;
}
#republicans {
background:red;
}
The box model
The box model in CSS describes the boxes which are being
generated for HTML-elements. The box model also contains
detailed options regarding adjusting margin, border, padding and
content for each element. The diagram below shows how the box
model is constructed:
The box model
<h1>Article 1:</h1>
<p>All human beings are born free and equal in dignity and rights.
They are endowed with reason and conscience and should act
towards one another in a spirit of brotherhood</p>
Margin and padding
Set the margin in an element
An element has four sides: right, left, top and bottom. The margin is
the distance from each side to the neighboring element (or the
borders of the document)
Margin and padding
CSS code:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Kompilasi:
body {
margin: 100px 40px 10px 70px;
}
Margin and padding
body {
}
p{
}
Margin and padding
Set padding in an element
Padding can also be understood as "filling". This makes
sense as padding does not affect the distance of the
element to other elements but only defines the inner
distance between the border and the content of the
element.
h1 {
background: yellow;
}
h2 {
background: orange;
}
Margin and padding
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Borders
The width of borders [border-width]
Borders
The color of borders [border-color]
The property border-color defines which

Borders
color the border has. The values are the
normal color-values for example
"#123456", "rgb(123,123,123)" or "yellow"
Borders
Types of borders [border-style]
Borders
Examples of defining borders
h1 { p{
border-width: thick; border-width: 1px;
border-style: dotted; border-style: dashed;
border-color: gold; border-color: blue;
} }
h2 { ul {
border-width: 20px; border-width: thin;
border-style: outset; border-style: solid;
border-color: red; border-color: orange;
} }
Borders
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Borders
Compilation [border]
p{
border-width: 1px;
border-style: solid;
border-color: blue;
}
Dikompilasi:
p{
border: 1px solid blue;
}
Height and width
Setting the width [width]
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
<body>
<h1>200px width <div> with text</h1>
<div class="box">Text </div>
</body>
Height and width
Setting the height [height]
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
<h1>200px width and 500px
height <div> with text</h1>
<div class="box">Text </div>
Floating elements (floats)
An element can be floated to the right or to
left by using the property float
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes, idciro etiam nostrarum
voluntatum...</p>
#picture {
float:left; width: 100px;
}
Another example: columns
HTML Code:
<div id="column1">
<p>Haec disserens qua de re agatur et in quo causa
consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes, idciro etiam
nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra potestate si res ita se
haberet...</p>
</div>
CSS Code
float can be set as either left, right or none.
#column1 {
float:left; width: 33%;
}
#column2 {
}
#column3 {
}
The property clear
The clear property is used to control how the subsequent elements

of floated elements in a document shall behave.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes, idciro etiam

nostrarum voluntatum...</p>
#picture {
float:left; width: 100px;
}
.floatstop {
clear:both;
}
Positioning of elements
The principle behind CSS positioning
h1 {
position:absolute; top: 100px; left: 200px;
}
Absolute positioning
#box1 {
position:absolute; top: 50px; left: 50px;
}
#box2 {
position:absolute; top: 50px; right: 50px;
}
#box3 {
position:absolute; bottom: 50px; right: 50px;
}
#box4 {
position:absolute; bottom: 50px; left: 50px;
}
Layer on layer with z-index (Layers)
#ten_of_diamonds { #king_of_diamonds {
position: absolute; left: 100px; position: absolute; left: 145px;
bottom: 100px; z-index: 1; bottom: 145px; z-index: 4;
} }
#jack_of_diamonds { #ace_of_diamonds {
position: absolute; left: 115px; position: absolute; left: 160px;
bottom: 115px; z-index: 2; bottom: 160px; z-index: 5;
} }
#queen_of_diamonds {
position: absolute; left: 130px;
bottom: 130px; z-index: 3;
}
Layer on layer with z-index (Layers)
<div id="ten_of_diamonds">
<img src="diamonds_10.gif" alt="10 of diamonds">
</div>
<div id="jack_of_diamonds">
<img src="diamonds_jack.gif" alt="Jack of diamonds">
</div>
<div id="queen_of_diamonds">
<img src="diamonds_queen.gif" alt="Queen of diamonds">
</div>
<div id="king_of_diamonds">
<img src="diamonds_king.gif" alt="King of diamonds">
</div>
<div id="ace_of_diamonds">
<img src="diamonds_ace.gif" alt="Ace of diamonds">
</div>
Web-standards and validation
• W3C is the World Wide Web Consortium,
which is an independent organization that
manages code standards on the web (e.g.
HTML, CSS, XML and others)
• The idea of having standards is to agree

upon a common denominator on how to
use web technologies
Web-standards and validation
CSS validator
To make it easier to observe the CSS standard, W3C

has made a so-called validator which reads your
stylesheet and returns a status listing errors and
warnings, if your CSS does not validate
http://jigsaw.w3.org/css-validator/

Cascading Style Sheets

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cascading Style Sheets

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style Sheets

• Perbedaan CSS & HTML:

• Keuntungan menggunakan CSS:

Selector {property: value;}

Lokasi tempat pemformatan dilakukan pada tag(s) HTML

Yang dilakukan property

• In-line (the attribute style)

• External (link to a style sheet)

<link rel="stylesheet" type="text/css“ href="style/style.css" />

Colors can be entered as hexadecimal values

Notice how we specified the location of the image as

The property background-attachment specifies whether a

With background you can compress several properties and thereby

Dapat di tulis langsung:

Apabila tidak diisi maka akan diset sebagai default.

The size of a font is set by the property font-size.

Menghilangkan garis bawah pada link

Then we want the white wine links to be yellow, the red

<p>Grapes for white wine:</p>

Let us say that the headline for chapter 1.2

<p>Early to bed and early to rise

<div id="democrats"> <div id="republicans">

The property border-color defines which

The clear property is used to control how the subsequent elements

<p class="floatstop">causas naturales et antecedentes, idciro etiam

• The idea of having standards is to agree

To make it easier to observe the CSS standard, W3C

Anda mungkin juga menyukai