�ݺ�ߣ

Cascade Style Sheet
(CSS)
Riki Afriansyah
Teknologi Rekayasa Perangkat Lunak
Polman Babel

Pengantar
• Cascading Style Sheet adalah suatu teknologi yang digunakan
untuk memperindah tampilan halaman website. Singkatnya
dengan menggunakan Metode CSS ini anda dengan mudah
mengubah secara keseluruhan warna dan tampilan yang ada di
situs anda, sekaligus memformat ulang situs anda (merubah
secara cepat).
• Dengan CSS, anda dapat lebih mempercantik tampilan web. Baik
dari style teks, button, textfield, tabel dan lain-lain.

Keuntugan
• Cascading Style Sheet adalah suatu teknologi yang digunakan
untuk memperindah tampilan halaman website. Singkatnya
dengan menggunakan Metode CSS ini anda dengan mudah
mengubah secara keseluruhan warna dan tampilan yang ada di
situs anda, sekaligus memformat ulang situs anda (merubah
secara cepat).
• Dengan CSS, anda dapat lebih mempercantik tampilan web. Baik
dari style teks, button, textfield, tabel dan lain-lain.

Contoh Coding
<html >
<head>
<title>CSS Guide</title>
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. </p>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. </p>
</body>
</html>

Struktur Style
 Selector digunakan untuk menentukan pada
elemen apa style tersebut diterapkan.
 Selector dapat berupa nama id elemen atau nama
class.
 Bagian deklarasi menerangkan style yang akan
dibuat.
 Bagian ini terdiri dari properti dan value.
 Properti dapat diisi dengan jenis warna, ukuran,
perataan margin dll, sedangkan value diisi dengan
nilai dari propertinya, misalnya red untuk warna
dll.

Selector
<head>
p {
color: red;
}
em {
color: green;
}
</style>
</head>
<body>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. <em>Ini adalah huruf dicetak
miring</em>. Ini adalah paragraf. </p>
<h1><em>Ini adalah heading 1</em></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. <em>Ini adalah huruf dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf.
</p>
</body>
</html>

Selector Dengan Class
dan Nama ID
Class dapat digunakan untuk mengelompokkan beberapa elemen
supaya memiliki style sama. Secara umum sintaks style untuk class
tertentu adalah sbb:
.namaKelas {
properti1 : value1;
properti2 : value2;
}

Selector
<html>
<head>
.inputText {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
</style>
</head>
<body>
<form name="form1">
Nama Anda <br />
<input type="text" name="alamat" class="inputText"
/><br /><br />
Alamat Anda <br />
<textarea class="inputText"></textarea><br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Lebih Lanjut Tentang
Value
Terdapat beberapa jenis value yang dapat berikan
pada properti style, antara lain berupa predefined
value, bilangan, prosentase, url, dan juga warna.

Predefined Value
Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai
ini dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan
predefined value ini adalah pada style berikut:
h1 {
font-style : italic;
}
Style di atas digunakan untuk membuat text miring pada elemen heading 1.
Dalam hal ini value ‘italic’ merupakan predefined value.

Bilangan
Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut
ini contohnya:
p {
line-height : 2;
}
Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali
dari ukuran fontnya.

Panjang, Besar dan
Prosentase
Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan
seperti px (pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc
(picas). Berikut ini beberapa contohnya
h1 {
font-size : 20px; /* membuat ukuran font 20 pixel */
}
hr {
width : 20%;
/* membuat garis horizontal dengan panjang 20% terhadap lebar jendela
browser /*
}

URL
Sebuah value juga dapat berupa URL. Berikut ini contohnya
body
{
background : url(/slideshow/pemograman-web-css/123048953/img/image.jpg);
}
Style di atas untuk memberi background image pada body yang diambil dari
folder img dengan nama file image.jpg.

Warna
Untuk memberi value berupa warna pada properti, ada beberapa cara yang
dapat dilakukan yaitu dengan menuliskan secara eksplisit warna yang
diinginkan, misal (red, green, yellow, dll) atau dengan menuliskannya dalam
kode hexadesimal. Berikut ini contohnya
p {
color : red;
}
p{
color : #FF0000; /* identik dengan warna merah (hexadesimal)
}

Membuat CSS Eksternal
kita simpan ke dalam file style.css. Contoh isinya
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}

Membuat CSS Eksternal
Lantas… bagaimana cara mengintegrasikan style.css tersebut ke halaman web yang kita buat?
Caranya adalah dengan memberikan perintah
<link rel="stylesheet" type="text/css" href="style.css" />
pada bagian header halaman web.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Ini adalah paragraf 1. </p>
Coba
<p>Ini adalah paragraf 2. </p>
</body>

Style Untuk Font Family
Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks.
Berikut ini adalah nama properti dan penulisan valuenya:
font-family: name;
dengan name adalah jenis font yang Anda inginkan.
Contoh
p {
font-family: arial;
}

Membuat Teks Italic
Membuat teks italic dapat pula dilakukan melalui style. Berikut ini cara penulisannya
font-style : italic;
<html>
<head>
p {
font-family: arial;
font-style: italic;
}
</style>
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. </body>
</html>

Membuat Teks Tebal
(Bold)
Untuk membuat teks tebal atau bold, properti yang digunakan adalah
font-weight : bold;
<html>
<head>
p {
font-family: arial;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
</body>
</html>

Mengatur Ukuran Font
Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti font-size : size; dengan
size diisi angka yang menyatakan ukuran disertai satuannya.
<html>
<head>
p.styled {
font-size: 20px; /* membuat font berukuran 20pixel */
}
</style>
</head>
<body>
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1.</p>
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
</body>
</html>

Mengatur Jarak Baris
Dalam Paragraf
Anda dapat mengatur jarak baris teks dalam suatu paragraf dengan menggunakan CSS. Berikut ini adalah
nama properti nya
line-height : size;
dengan size diisi angka yang menyatakan ukuran disertai satuannya.
<html>
<head>
p.styled {
line-height: 30px;
}
</style>
</head>
<body>
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1.</p>
</body>

Mengubah Warna Text
Untuk mengubah warna font, propertinya adalah:
color : warna;
dengan value warna diisikan dengan warna yang diinginkan, dapat berupa kode
hexadesimalnya, maupun nama eksplisitnya.
<head>
p.styled1 {
font-family: "Palatino Linotype";
font-size: 20px;
color: #FF0000;
}
p.styled2 {
color: green;
}
</style>
</head>
<body>
<p class="styled1">Ini adalah paragraf 1. Ini
adalah paragraf 1</p>
<p class="styled2">Ini adalah paragraf 2. Ini
adalah paragraf 2. Ini
adalah paragraf 2. </p>
</body>
</html>

Mengubah Warna
Background Text
Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya:
background : warna;
cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit
warna yang diinginkan maupun kode hexadesimalnya.
<html>
<head>
body {
background : green;
}
p.styled {
font-family: "Palatino Linotype";
font-size: 20px;
color: #FF0000;
background: #FFFFFF; /* warna
putih */
}
p {
color: orange;
font-weight: bold;
background: #000000; /* warna hitam */
}
</style>
</head>
<body>
<p class="styled">Ini adalah paragraf 1. Ini adalah
paragraf 1. </p>
</body>
</html>

Tugas
TUGAS KELOMPOK
• Buatlah tutorial berbentuk video oleh masing-masing kelompok sekreatif mungkin dengan mengacu “Tugas Besar”
yang akan dibuat dimana kontennya terdiri dari:
• Style Untuk Font Family
• Membuat Teks Italic
• Membuat Teks Tebal
• Mengatur Ukuran Font
• Mengatur Jarak Baris Dalam Paragraf
• Mengubah Warna Text
• Mengubah Warna Background Text
Contoh url:
https://www.youtube.com/watch?v=uyaV_EWWRmo
https://www.youtube.com/watch?v=NjHMJNhYBY4
Software untuk screen recording: ACTION! SCREEN RECORDER, Bandicamp,camtasia, Open Broadcaster
Software, dll
File video ditaruh pada folder minggu 6 -> foleder nama_kelompok

�ݺ�ߣ

Pemograman WEB (CSS)

More Related Content

Pemograman WEB (CSS)