Assalamualaikum…

A. Pendahuluan
      kali ini saya mempelajari tentang CSS. Dan mempraktikkan coding dari CSS tersebut,target minggu ini adalah membuat tamplate menggunakan Bootstrap. Padahal sebelumnya saya masih bingung apa itu bootstrap. Kemudian hari ini saya akan berusaha mempelajari dulu CSS sampai selesai,kemudian baru fokus ke Bootstrap.

B. Pengertian
       CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer
untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari
memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah
supaya diperoleh suatu kekonsistenan style pada elemen tertentu.

C. Latar Belakang
       Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web
Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk
membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998,

W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya
untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3
oleh W3C yang sampai saat ini masih terus diperbarui lagi.

Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser,
tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung
CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja.

Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk
mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk
mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel
dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading
tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan
apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading
yang ada.

Contoh :
coding:







hasil :






Perhatikan code sebelumnya! Untuk mengatur style elemen heading 1 (h1) cukup
menuliskannya pada CSS sekali saja. Bandingkan apabila Anda tidak menggunakan CSS.
Selain itu, dengan CSS akan diperoleh suatu kekonsistenan style. Anda tentu dapat
merasakan keuntungan ini, dibandingkan dengan tanpa adanya CSS yang kemungkinan
besar ketidakkonsistenan akan terjadi. Hal ini dikarenakan style hanya dituliskan sekali,
tidak seperti dengan tanpa CSS yang ditulis style berulang kali.

Struktur Style

Style pada CSS memiliki struktur sebagai berikut
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. Berikut sintaksnya :



h1, h2, h3 { properti1 : value1;
properti2 : value2;
properti3 : value3;
.
.
.
}


Apabila Anda lupa memberikan tanda titik koma, maka style tersebut tidak akan
dijalankan oleh browser.
Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak
terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: red;
}
em {
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf.
Ini
adalah
paragraf.
<em>Ini
adalah
huruf
dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1><em>Ini adalah heading 1</em></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf.
Ini
adalah
paragraf.
<em>Ini
adalah
huruf
dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
</body>
</html>



Hasilnya :







Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan
untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang
terjadi dengan tampilannya di browser.

Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style
tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading).
Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading
menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas.. bagaimana cara
mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam
paragraf saja


Value

Pada bab ini akan dijelaskan lebih lanjut tentang aturan penulisan value dari properti
yang diberikan.
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. Untuk properti font-style terdapat pilihan
value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique.
Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.
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
http://blog.rosihanari.net
{
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(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
Pada contoh-contoh sebelumnya, jenis CSS yang dibuat adalah CSS internal karena
ditulis jadi satu dengan code (X)HTML nya. Perhatikan kembali contoh berikut ini :

<!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">
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
p.group {
color: #FF0000;
/* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
</style>
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3.
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.
</p>
</body>
</html>

Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan
harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang
disebut CSS eksternal yang memiliki file extension .css

Membuat Teks Tebal (Bold)
Untuk membuat teks tebal atau bold, properti yang digunakan adalah
font-weight : bold;


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.

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.

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.


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.


Mengatur Jarak Spasi Antar Text
Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak
tersebut diatur dengan menggunakan properti sbb:
word-spacing : jarak;
letter-spacing : jarak;
Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang
kedua untuk mengatur jarak antar huruf.


Membuat Text Indent
Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke
dalam paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk
mengaturnya:
text-indent : jarak;


Perataan Teks (Text Alignment)
Anda dapat mengatur perataan teks dengan menggunakan properti
text-align : jenis;
dengan value jenis dapat digantikan dengan left, center, right dan justify.


Mengubah Text Case
Dengan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua
(lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata
yang dibuat besar). Hal ini dilakukan dengan menggunakan properti
text-transform : option;
dengan option dapat diganti dengan lowercase, uppercase, atau capitalize.

D. Maksud dan Tujuan
mengerti apa itu CSS dan mempraktikkan contoh programnya dengan benar dan teliti.

E. Alat dan Bahan
1. Laptop
2. File Items
3. Teext Editor

F. Hasil yang diharapkan
dapat menerapkan dan mempelajari css dengan mudah tanpa kebingungan.

G. Referensi

1.