KATA PENGANTAR

Puji dan syukur kami panjatkan kepada Allah SWT atas segala rahmat dan

karunia-Nya sehingga saya dapat menyelesaikan Tugas ini yang berjudul“ CSS

(CASCADING STYLE SHEET) “.Tak lupa shalawat dan salam selalu tercurah

kepada junjungan kita Nabi Besar Muhammad SAW beserta para keluarga, sahabat, dan

pengikut – pengikutnya sampai akhir zaman. Penyusun menyadari bahwa makalah ini

jauh dari sempurna. Oleh karena itu sangat mengharapkan kritik dan saran yang bersifat

membangun guna perbaikan dimasa mendatang.

Tak lupa mengucapkan rasa terima kasih karena dalam penyelesaian makalah

inibanyak mendapat bimbingan dari dosen, dari pihak lain, baik yang diberikan secara

lisan maupun tulisan.

Semoga Allah SWT memberikan balasan pahala atas segala amal yang telah

diberikan dan semoga Karya Tulis Ilmiah ini dapat bermanfaat bagi kita dan

perkembangan ilmu pengetahuan. Semoga kita selalu dalam lindungan Allah SWT.

Amin.

Makassar, 26 Juni 2014

Penyusun

BAB I

PENDAHULUAN

A. Latar Belakang

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk

mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi

dari dokumen HTML dengan kode untuk menampilkannya (CSS).

Didalam dunia desain web, layout atau mengatur letak web, format

huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat

penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web

lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan

salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap

browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default

dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal

layout css adalah IE karena kurang dukungannya terhadap CSS.

B. Rumusan maslah

Adapun rumusan masalah dalam makalah ini yaitu :

1. Apa yang dimaksud CSS?

2. Apa saja perintah – perintah CSS?

C. Tujuan Penulisan

Adapun tujuan dari penulisan ini yaitu :

1. Untuk mengetahui tentang CSS

2. Untuk mengetahui tentang perintah – perintah CSS dan dapat

mengaplikasikannya?

BAB II

PEMBAHASAN

A. Pengertian Cassading Style Sheet (CSS)

CSS adalah kepanjangan dari Cassading Style Sheet. Kode CSS ini

hampir terdapat di seluruh bagian template blog anda. Adapun fungsi dari CSS

adalah untuk mempercantik sebuah halaman web, termasuk blog. CSS dapat

bekerja secara maksimal jika tidak ada kesalahan dalam mengedit atau

menambahkan kode CSS kedalam template blog Anda. Jika tedapat kesalahan,

baik dalam menambahkan atau mengedit tampilan blog, maka dapat dipastikan

blog anda akan menjadi berantakan. Sebenarnya, untuk menjadikan blog anda

indah dan cantik, Anda tidak perlu mendalami pengetahuan kode CSS karena

kode CSS ini akan bekerja maksimal dengan sistem kode yang disebut mark up

language, seperti kode HTML, XHTML, dan XML. 

Namun, mempelajari dasar-dasar kode CSS dapat membantu Anda

dalam mengedit template blog sehingga terlihat cantik dan menarik.

Pengetahuan dasar tentang kode CSS akan membantu Anda nantinya, dalam

mempelajari dan mempraktikkan bab-bab selanjutnya. Kode CSS tidak jauh

berbeda dengan kode HTML. Perintah dasar dari kode CSS hampir sama dengan

kode HTML yang diawali dengan kode pembuka dan kode penutup. Jika tidak,

template tidak dapat di-parse atau disimpan pada halaman blog anda. ciri dari

kode CSS adalah dapat ditambahkan atau digunakan langsung untuk mengedit

dari template blog anda. Kode-kode CSS biasanya meliputi warna dan aksesori

yang ada di halaman blog Anda. Misalnya, jika anda ingin menuliskan tulisan

"blog pertamaku" dengan warna merah, maka kode yang membuat warna merah

itulah yang disebut dengan CSS.

Keuntungan Menggunakan CSS:

CSS memberikan keseragaman pada halaman web.

Dengan CSS dapat menghemat banyak waktu dan pekerjaan

berulang. Saat menggunakan CSS, perubahan tidak perlu

dilakukan dalam setiap halaman web. Anda hanya perlu membuat

perubahan dalam style sheet.

CSS memungkinkan Anda untuk memuat halaman web Anda

dengan mudah.

Layers (Lapisan), seperti item pop-up, dapat digunakan dalam

dokumen.

CSS membantu Anda memelihara halaman web Anda dengan

mudah dan efektif.

B. Perintah – perintah CSS

Adapun format penulisan CSS adalah :

1) selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur /

diformat.

Property untuk menunjukkan, bagian (properti) dari selector yang

hendak diatur.

Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa : 

Selector: h1

Property: color

Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini:

Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam

selector dengan cara menggunakan koma. Misalkan anda mau

mengatur agar tag h1, h2 dan h3 semua menggunakan

warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik

koma ( ; ).

Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan

warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan

beberapa baris dimana pengaturan property dan values nya di

indent. Hal ini bertujuan agar terlihat rapi.

Contoh:

h1,h2,h3 {

color:red;

font-family:arial;

font-size:150%;

}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat

CSS. Pelajaran berikutnya akan mengajarkan anda

mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kenapa kita perluh belajar membuat comment dalam CSS ?

alasannya karena kadang kala, ada baiknya anda menuliskan

komentar ke dalam kode CSS anda untuk memberi catatan

pengingat.

Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk

menuliskan komentar. Segala teks yang berada di antara tag /*

dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan

untuk diri anda.

Contoh :

/* Tulis komentar anda di sini */

P

{

text-align: justify;

/* Tulis komentar anda di sini */

color: blue;

IMPLEMNTASI CSS

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman

web, yaitu:

Inline CSS

Embed atau memasang kode css ke dalam bagian <head>

Pada link ke external CSS

Import CSS file

a) Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML

yang ingin di format. Penulisan cara ini tidak

memerlukan penulisan selector dalam kode CSS.

Cara ini sebaiknya hanya digunakan jika anda mau

memformat suatu elemen satu kali saja.

Contoh:

<P style=”color:blue”>

Isi paragraf.

</p>

Pada contoh di atas, elemen paragraf <P> di format

agar tulisannya menggunakan warnabiru. Elemen

paragraf lain, tidak akan menggunakan warna biru,

karena format ini hanya berlaku pada elemen paragraf

yang ditentukan kode CSS nya.

Penulisan CSS dengan cara ini di mulai dengan

kata style: lalu di ikuti dengan syntax property: value.

2. Embedded CSS

Anda bisa juga menempelkan kode CSS di antara

tag <head> dan </head>. Penulisan CSS dengan cara

ini diawali dengan tag <style> dan diakhiri dengan

tag </style>. Kode CSS-nya diletakkan pada halaman

yang sama dengan yang ingin diformat. 

Contoh:

<head>

<style type="text/css" media=screen>

p {color:blue;}

</style>

</head>

Dalam contoh di atas semua elemen <P> dalam

halaman web tersebut akan diformat  menggunakan font

berwarna biru.

3. External CSS

Kode CSS external di tulis dalam satu file terpisah yang

disimpan dengan akhiran .css atau ekstensi .css . Anda

lalu perlu memanggil file CSS tersebut ke dalam semua

halaman web yang anda buat. Dengan cara ini, anda

hanya perlu memiliki satu set kode CSS yang digunakan

untuk semua halaman web anda. Jadi ada dua langkah

dalam pengimplementasian CSS dengan cara ini.

Contoh:

1) Anda membuat satu file dengan notepad atau teks editor

lain, dan berinama, misalkan:style.css, lalu tuliskan

kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small;} h1 {color: red; }

2) Langkah kedua adalah memanggil file style.css dari

semua halaman web. Caranya dengan memasukkan kode

di bawah ini, di antara tag <head> dan </head>

<head>

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

</head>

4. Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website

menggunakan tag import.

Contoh:

@import "style.css";

atau

@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka

yang akan digunakan adalah kode yang lebih spesifik.

Misalkan dalam satu halaman web, menggunakan eksternal style

sheet untuk memformat elemen H1 sebagai berikut:

h1 {

color: red;

text-align: left;

font-size: 8pt

}

Sementara di halaman web yang sama, di antara tag <head> ada

kode CSS sbb:

h1 {

text-align: right;

font-size: 20pt

}

Perhatikan bagaimana pemformatan saling bertabrakan, dari

eksternal style sheet, text-align=left sementara dari internal style

sheet, text-align=right.

Dalam kasus seperti ini, maka yang akan aktif adalah kode yang

lebih spesifik, dalam hal ini, internal style sheet lebih spesifik

dibandingkan eksternal style sheet.

Jadi, dalam contoh di atas, kode yang akan diimplementasikan

adalah sebagai berikut :

color: red;

text-align: right;

font-size: 20pt

CLASS dan ID SELECTOR

Masih ingat kan pada pelajaran syntax CSS pada bagian atas

posting ini , yang di tulis adalah selector. Pada contoh-contoh di

pelajaran sebelumnya, anda melihat penggunaan tag HTML

sebagai selector.

Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang

bagaimana jika anda ingin memformat tag <h1> dengan warna /

property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri

berwarna biru sementara tag <h1> di kolom tengah berwarna

hitam.

Untuk kasus seperti ini, anda bisa menggunakan Class selector

dan ID selector. 

o Class Selector

Class selector adalah penggabungan beberapa

properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika

anda ingin menggunakan class selector di luar kode HTML

anda menggunakan tag <div class=nama-class> dan di akhiri

dengan tag</div>.

Contoh:

Penulisan kode CSS:

.tengah {text-align:center;}

p.tengah {color:red;}

h1.kiri {color:blue;}

h1.tengah {color:black;}

Pemakaian kode CSS

<div class=tengah>

<p>Teks tengah akan berwarna merah.</p>

<h1 > Tag H1 tengah akan berwarna hitam</h1>

</div>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasilnya jika di jalankan pada browser adalah :

- Teks tengah akan berwarna merah.

- Tag H1 tengah akan berwarna hitam

- Tag H1 kiri akan berwarna biru

ID Selector

ID Selector mirip dengan Class selector. Untuk

membedakannya, gunakanlah ID selector untuk memformat

bagian yang hanya muncul satu kali dalam satu halaman web,

misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika

anda ingin menggunakan class selector di luar kode

HTML anda menggunakan tag <div id=nama-ID> dan di

akhiri dengan tag </div>.

CSS Font Family

CSS dapat memformat font dengan berbagai

macam cara mulai dari pengaturan tipe font, ukuran, dll.

Saya akan coba bahas satu per satu ya.

1. CSS Font Family

Kalau anda biasa menggunakan ms word atau aplikasi

lainnya dimana anda bisa merubah jenis / tipe font, pasti

anda sudah mengenal nama-nama font seperti: arial,

verdana, times new roman dll. Nah kalau di CSS kita

sebut tipe font ini Font Family.

Cara penulisan:

property -> font-family

value -> nama-nama font, disarankan menggunakan hanya

nama-nama font default

Contoh penulisan:

h1 {

font-family: verdana;

}

h2 {

font-family: “times new roman”;

}

Hasilnya jika dijalankan di browser :

Ini adalah Heading 1 (H1) menggunakan font Verdana

Ini adalah Heading 2 (H2) menggunakan font Times New

Roman

2. CSS Font Variant

Properti font variant digunakan untuk menampilkan font

dalam huruf kapital kecil. Jadi semua huruf non kapital

akan berubah menjadi huruf kapital, tetapi ukuran nya

tetap sama. Perlu diketahui, tidak semua jenis font dapat

menggunakan properti ini.

Cara penulisan:

property -> font-variant

value -> small-caps

Contoh penulisan:

h1 {

font-size: 14px;

font-variant: small-caps;

}

C. Aturan Penulisan CSS

Untuk Aturan Penulisan di bagi menjadi 3, yaitu, internal CSS, ekternal CSS,

dan Inline CSS

Internal CSS

Internal CSS adalah kode-kode css yang dipasang langsung

didalam file HTML, lebih tepatnya ditaruh di dalam tag “< head

>” dan sebelum tag “< / head >”. Contoh :

<html>

<head>

<style type = "text/css">

.header {

width:900px;

height:50px;

border: 1px solid #640404;

}

.headerLeft {

width:400px;

background-color:#CCCCCC;

height:50px;

float:left;

text-align:center;

}

.headerRight {

width:450px;

background-color:#999999;

height:50px;

float:right;

text-align:center;

}

</style>

</head>

<body>

</body>

</html>

Bagian yang di beri highlight merupakan contoh dari Internal

CSS, Internal CSS digunakan hanya dalam kondisi tertentu saja

apabila ingin merubah sebuah element yang hanya ada pada satu

halaman HTML atau bisa juga dipakai untuk sebuah halaman

statis(tidak berubah-ubah).

External CSS

External CSS adalah sebuah document/file yang hanya berisikan

kode kode CSS, extensi file css biasanya “.css”. External CSS ini

terpisah dari file HTML, untuk di butuhkan sebuah perintah

untuk menghubungkan/memanggil External CSS pada file

HTML. Contoh perintah :

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”public.css”/>

</head>

<body>

</body>

</html>

Anda bisa lihat baris yang diberi highlight, perintah href seperti

di atas yang digunakan untuk memanggil External CSS dengan

contoh saya beri nama “file.css”. External CSS merupakan cara

penulisan yang lebih sering digunakan, karena dalam file ini

hanya ada kode-kode css saja, untuk itu memudahkan dalam hal

pengeditan.

Inline CSS

Inline CSS merupakan cara pemasangan kode CSS yang

langsung ditulis pada tag HTML. Memang tidak

direkomendasikan menggunakan cara ini, namun tidak bisa

dipungkiri saya pun masih menggunakan cara ini apabila berada

dalam sebuah kondisi yang harus merubah satu atau dua element

yang hanya ada dalam satu halaman saja.Contoh :

<html>

<head>

</head>

<div style="background-color:#999999; text-

align:center;">Inline CSS</div>

</body>

</html>

Jika kita menggunakan teknik external CSS, maka kita perlu

membuat file css, misal buat file dan simpan dengan nama

style.css

Didalam HTML kita perlu memanggil file CSS dengan

menggunakan tag <link> yang diletakkan diantara tag <head>.

Pada contoh CSS selanjutnya kita menggunakan teknik external

CSS, jadi gunakan saja file style.css dan coba.html anda hanya

perlu mengubah isinya. Untuk file HTML anda gunakan

coba.html dan ubah isinya pada bagian <body> saja bagian yang

didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu

menggunakan atribut class untuk memanggil CSS selector (dalam

contoh diatas selectornya title dan thank). Dengan demikian

apabila semua halaman anda memanggil class title, dan jika anda

ingin mengganti font untuk semua halaman anda cukup

mengubah selector CSSnya saja. Bagaimana anda sudah paham

kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja

saya tidak akan menerangkan semuanya, saya hanya akan

menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf

yang kita spesifikasikan didalam CSS. Untuk itu kita perlu

mendeklarasikan lebih dari satu jenis huruf agar browser

mengenal jenis huruf yang digunakan. Anda dapat menggunakan

property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif

dan hurufnya Times yaitu Times New Roman. Anda dapat

menuliskannya dari yang paling spesifik sampai yang umum,

sehingga jika browser tidak mengenal fontnya, maka browser

akan otomatis melihat font yang umum. Untuk lebih jelasnya

lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times,

serif">Serif font</h1>

Untuk belajar css Aturan Penulisan CSS, sepertinya

cukup sekian dulu, karena Bagian ini hanya aturan

penulisan yang bisa digunakan dalam menggunakan CSS.

BAB III

PENUTUP

A. Kesimpula

CSS adalah kepanjangan dari Cassading Style Sheet. Kode CSS ini

hampir terdapat di seluruh bagian template blog anda. Adapun fungsi dari CSS

adalah untuk mempercantik sebuah halaman web, termasuk blog.

Keuntungan Menggunakan CSS:

CSS memberikan keseragaman pada halaman web.

Dengan CSS dapat menghemat banyak waktu dan pekerjaan

berulang. Saat menggunakan CSS, perubahan tidak perlu

dilakukan dalam setiap halaman web. Anda hanya perlu membuat

perubahan dalam style sheet.

CSS memungkinkan Anda untuk memuat halaman web Anda

dengan mudah.

Layers (Lapisan), seperti item pop-up, dapat digunakan dalam

dokumen.

CSS membantu Anda memelihara halaman web Anda dengan

mudah dan efektif.

Ada 3 aturan penulisan dalam CSS yaitu :

1. Internal CSS

2. Eksternal CSS

3. Inline CSS

B. Saran

Setelah kita mengetahui tentang CSS, pembaca

diharapkan dapat mengaplikasikan CSS dalam pembuatan web.

Sehingga kedepannya, pembaca dapat membuat tampilan web

yang lebih menarik dengan CSS.