praktikum css
Post on 04-Aug-2015
140 Views
Preview:
TRANSCRIPT
BAB 2
CSS (Cascading Style Sheet)
By:
Yunia ikawati
NEXT
Praktek Pemrograman WEB
• Tujuan:
Memahami dan mempelajari elemen web Cascading Style
Sheets (Syntax CSS, agaimana menggunakan CSS, Background
CSS, Text CSS,Font CSS,Border CSS,Margin CSS,Padding
CSS,List CSS,Dimensi CSS,Klasifikasi CSS)
CSS (CASCADING STYLE SHEET)
CSS (Cascading Style Sheet)
Manfaat:
• Memperindah tampilan halaman website.
• Mempermudah mengubah secara keseluruhan warna dan tampilan.
• Memformat ulang situs Anda secara cepat.
• Menghemat kode dan waktu dalam mendesain tampilan website.
NEXT
CSS (Cascading Style Sheet)
Ketentuan Mendasar
• Penulisan script CSS terletak diantara tag <HEAD>…</HEAD>
• Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration.
<HTML>
<HEAD>
<TITLE>…..</TITLE>
<STYLE TYPE=text/css>
selector { declaration }
</STYLE>
</HEAD>
<BODY>
……..
</BODY>
</HTML>
NEXTBACK
CSS (Cascading Style Sheet)
Tag Komentar
<html>
<head>
<title>……</title>
<style type=text/css>
…aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */
</style>
</head>
<body>
…………………
</body>
</html>
NEXTBACK
CSS (Cascading Style Sheet)
CSS dapat diimplementasikan dalam 3 cara:
1. Inline Style yaitu menjadi atribut dalam tag HTML, atributnya
adalah style.
2. Internal Style Sheet atau Embed Style yaitu berada di dalam tag
<HEAD> .
3. External Style Sheet atau Linked Style Sheet yaitu style CSS
berada terpisah pada sebuah file.css, sedangkan untuk
pemanggilannya dalam document HTML yang akan
menggunakannya dilakukan dengan cara:
<link rel=“stylesheet” href=“file.css” type=“teks/css” />
1. Inline Style:
<html>
<head><title>contoh:Inline Style
Sheet</title>
</head>
<body>
<p style='color:red; font-
size:200%'>Selamat Belajar CSS</p>
</body>
</html>
CSS (CASCADING STYLE SHEET)
2. Internal Style Sheet atau Embeded Style
<html>
<head><title>contoh:Embedded Style Sheet</title>
<style>
h1 {color:red}
</style>
</head>
<body>
<h1> Selamat Belajar CSS</h1>
</body>
</html>
CSS (CASCADING STYLE SHEET)
- linked.css
h1{
color:blue;
}
CSS (CASCADING STYLE SHEET)
3. External Style Sheet atau Linked
Style Sheet
- linked.html
<html>
<head><title> contoh:Linked Style Sheet </title>
<link href="linked.css" rel="stylesheet"
type="teks/css" />
</head>
<body>
<h1> Selamat Belajar CSS</h1>
</body>
</html>
CSS (Cascading Style Sheet)Konsep:
• Pewarisan (inheritance)
• Selektor-Kontekstual (Contextual Selector)
• Kelas (classes)
NEXTBACK
CSS Pewarisan (inheritance)
Text
<html>
<head>
<title>CSS_01</title>
<style type=text/css>
b { color:blue }
i { color:#3333CC }
</style>
</head>
<body>
<i>Akademi Komunitas Negeri Lamongan </i><br>
<b>Teknik Informatika</b>
</body>
</html>
Catatan: Untuk declaration color dapat juga menggunakan kode heksa NEXTBACK
CSS Selektor-Kontekstual (Contextual Selector)
Text
<html>
<head>
<title>CSS_01</title>
<style type=text/css>
b,i { color:ff00ff;
text-decoration:underline;
}
</style>
</head>
<body>
<b>Akademi Komunitas Negeri Lamongan</b>
<br>
<i>Teknik Informatika</i>
</body>
</html>
Catatan: selector ini kesemuanya untuk bold+italic text NEXTBACK
CSS (Cascading Style Sheet)
Perbedaan CSS pewarisan (inheritance) dengan
CSS Selektor-Kontekstual (Contextual Selector) !!!
<html><head><title>CSS Inheritance</title><style type=text/css>
b { color:blue; text-decoration:underline }
i { color:blue; text-decoration:underline }</style></head><body>
<b>Akademi Komunitas Negeri Lamongan</b>
<br><i><Teknik Informatika</i>
</body></html>
<html><head><title>Selektor-Kontekstual</title><style type=text/css>
b,i { color:blue; text-decoration:underline;
}</style></head><body>
<b>Akademi Komunitas Negeri Lamongan</b>
<br><i>Teknik Informatika</i>
</body></html
Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector)
NEXTBACK
CSS (Cascading Style Sheet)
Deklarasi :
• font-family:Tahoma,Arial etc
• font-size:14px, 23px etc
• font-weigth: bold
• font-style:italic,underline
• font-variant:small-caps
(mengganti semua kar.lower-case
dengan kar.upper-case),none
(tanpa efek)
• text-indent:30px (membuat
indent awal paragraf)
• text-transform: capitalize
(Kar.pertama huruf besar),
uppercase (Semua kar. huruf
besar), lowercase (Semua kar.
Huruf kecil)
• letter-spacing:10px, 14px
(mengendalikan jumlah spasi
karakter)
• text-decoration:underline
(tampil garis dibawah text),
overline (tampil garis diatas text),
line-trough (tampil garis melalui
text), none (non-efek)
CSS (Cascading Style Sheet)<html>
<head>
<title>CSS_13</title>
<style type=text/css>
h4 { color:blue;font-family:Tahoma;
letter-spacing:10px;}
h3 { color:blue;font-family:Tahoma;
text-indent:30px;}
h2 { color:blue;font-family:Tahoma;
text-transform: capitalize;}
b { color:blue;font-family:Tahoma;
text-transform: uppercase;}
i { color:blue;font-family:Tahoma;
text-decoration:line-through;}
</style>
</head>
NEXTBACK
<body>
<h4>Teknik Informatika</h4>
<h3>Teknik Informatika</h3>
<h2>Teknik Informatika</h2>
<b>Teknik Informatika</b>
<i>Teknik Informatika</i>
</body>
</html>
FONT
CSS (Cascading Style Sheet)
Catatan:
Nilai list-style-type:
disc -> efek lingkaran
square -> efek persegi empat
circle-> efek lingkaran yang transparan
decimal -> 1,2,3,…dst
lower-roman -> i,ii,iii,…dst
upper-roman -> I,II,III,…dst
lower-alpha -> a,b,c,…dst
upper-alpha -> A,B,C,…dst
None -> Tanpa Efek
NEXTBACK
CSS (Cascading Style Sheet)
<html>
<head>
<title>CSS_10</title>
<style type=text/css>
body{background-image:url(bunga.jpg);}
li { list-style-type:square;
font-weight:bold;background-color:blue;
}
h3{background-color:yellow;}
</style>
</head>
<body>
<h3>Teknik Informatika </h3>
<ol>
<li>Pemrograman Web</li>
<li>Praktek Pemrograman Web</li>
</ol>
</body>
</html>
NEXTBACK
List & Background
CSS (Cascading Style Sheet)
<html>
<head>
<style type="text/css">
p1
{border: medium double rgb(300,0,255)}
p2
{border: dashed rgb(200,450,200)}
</style>
</head>
<body>
<p1>Pemrograman Web</p1>
<br><br>
<p2>Pemrograman Web</p2>
</body>
</html>
Border
CSS (Cascading Style Sheet)
<html>
<head>
<style type="text/css">
h1 { background: yellow;padding: 100px 20px
20px 100px;}
h2 { background: red;padding-left:150px;}
h3 { background: green; margin-top: 50px;
margin-right: 5px; margin-bottom: 5px;
margin-left: 10px;}
h4 { background: orange; margin: 80px 20px
80px 55px; }
</style>
</head>
<body>
<h1>AKNELA</h1>
<h2>AKNELA</h2>
<h3>AKNELA</h3>
<h4>AKNELA</h4>
</body>
</html>
Margin & Padding
CSS (Cascading Style Sheet)
1. Tuliskan source code tampilan berikut dengan CSS Internal
Style Sheet atau Embeded Style
CSS (Cascading Style Sheet)
2. Tuliskan source code tampilan berikut dengan CSS Internal
Style Sheet atau Embeded Style
CSS (Cascading Style Sheet)
3. Tuliskan source code tampilan berikut dengan CSS
External Style Sheet atau Linked Style Sheet
top related