MAKALAH PEMROGRAMAN BERBASIS WEB

CASCADING STYLE SHEET (CSS) 3

Oleh

Kelompok

I Wayan Haris Apriyana (07086050678)

JURUSAN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS UDAYANA
2010
 ABSTRAK

Cascading Style Sheet merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur
dan seragam. Cascading Style Sheet merupakan sebuah bahasa yang dimanfaatkan untuk
mendefinisikan aspek antarmuka (rendering) dari suatu formatted document seperti
HTML dan dokumen XML.
Sebuah Dokumen CSS berisi selektor-selektor yang merepresentasikan pola-pola
yang bersesuaian dengan elemen-elemen yang ada pada suatu dokumen HTML serta
merupakan salah satu teknologi yang dapat dimanfaatkan untuk menyeleksi nodes pada
dokumen XML. CSS berkorelasi dengan formatted document melalui selektor-selektor.
Selektor-selektor pada CSS mampu mengendalikan berbagai aspek rendering dari setiap
elemen pada dokumen HTML. Salah satunya adalah warna elemen. Pada CSS versi
termutakhir ,CSS3, selain selector terdapat properti baru CSS yang disebut Pseudo-
element.
CSS3 tidak jauh berbeda, dalam hal sintaksis, namun kekuatan CSS3 jauh lebih
besar. Seperti yang akan Anda lihat dalam teknik berikut ini,  dengan CSS3 anda dapat
membuat sudut membulat (rounded corners), bayangan pada tulisan (Text Shadow), latar
belakang bening (Transparency Background) dan masih banyak lagi.

Kata kunci : CSS3, pseudo-element, selector, rendering, text shadow, dan transparency
background.

ABSTRACT

Cascading Style Sheet is one of the web programming language to control several
components in a web that would be more structured and uniform. Cascading Style Sheets
is a language used to define aspects of the interface (rendering) of a formatted document
such as HTML and XML documents.
A CSS document contains a selector-selector that represents the patterns corresponding to
the elements that exist in an HTML document and is one technology that can be used to
select nodes in XML documents. CSS correlated with formatted document via selector-
selector. -Selector in the CSS selector able to control various aspects of the rendering of
each element in an HTML document. One of them is the color elements. In the latest
version of CSS, CSS3, in addition to CSS selectors there is a new property called Pseudo-
element.
CSS3 is not much different, in terms of syntax, but much greater strength CSS3. As you
will see in the following techniques, with CSS3 you can make rounded corners (rounded
Corners), the shadow on the text (Text Shadow), the background transparent
(Transparency Background) and many more.

Keywords: CSS3, pseudo-element, selector, rendering, text shadow, and transparency

background.
DAFTAR ISI
 Bab I
PENDAHULUAN

I.1 Latar Belakang

Perkembangan tenik dan bahasa pemrograman dalam mendesain dan

memrograman web akhir-akhir ini sudah semakin berkembang. Kebutuhan untuk
mempermudah dan memperindah desain suatu web mutlak dibutuhkan. Salah satu bahasa
pemrograman yang digunakan untuk mempermudah mendisain sebuah web adalah
dengan Cascading Style Sheet (CSS). Cascading Style Sheet merupakan salah satu
bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam.
Cascading Style Sheet merupakan sebuah bahasa yang dimanfaatkan untuk
mendefinisikan aspek antarmuka (rendering) dari suatu formatted document seperti
HTML dan dokumen XML. Hingga saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2,
CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2
dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer. Selain itu CSS 2 mendukung penentuan posisi konten,
downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk
printer. Sedangkan CSS3 telah memberikan cara-cara yang mudah untuk membuat efek /
style pada sebuah elemen HTML dengan meninggalkan cara lama yang dibantu oleh
Javascript.
Untuk itulah, penulis tertarik untuk membahas tentang CSS3 yang menawarkan
fitur-fitur yang lebih baik dan membuat tampilan web menjadi semakin cantik.

I.2 Tujuan
Adapun tujuan yang diharapkan oleh penulis adalah sebagai berikut :
1. Untuk mengetahui fitur-fitur yang dimiliki oleh CSS3
2. Untuk mengetahui cara-cara penerapan CSS3

I.3 Manfaat
Adapun manfaat yang diharapkan oleh penulis adalah sebagai berikut :
1. Agar mengetahui fitur-fitur yang dimiliki oleh CSS3
2. Agar mengetahui cara-cara penerapan CSS3
 BAB II
KAJIAN PUSTAKA

II.1 Sejarah CSS

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web
untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti
Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman
web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran
gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna
hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan,
atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk
mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang berbeda.
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-
child) pada setiap style CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru
mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Hingga saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, CSS3. CSS1
dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk
memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. Selain
itu CSS 2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan
pada tabel (table layout) dan media tipe untuk printer. Sedangkan CSS3 telah
memberikan cara-cara yang mudah untuk membuat efek / style pada sebuah elemen
HTML dengan meninggalkan cara lama yang dibantu oleh Javascript.

II.2 Penulisan CSS

Penulisan CSS menggunakan dua bagian utama yakni selector dan declaration.
Selector adalah elemen HTML yang ingin Anda atur style nya. Sedangkan Declaration
terdiri dari dua bagian yakni property dan value. Properti adalah attribut gaya dan value
adalah nilai pengaturnya.
selector {property: value}

selector: h1, property: font-size, value: 10px.

Berarti: Ukuran huruf dari bagian h1 adalah 10 px
1. Property dan value dipisahkan dengan titik dua (”:”)
2. Pengaturan sifat atau declaration terdapat di dalam kurung keriting (”{}”)
 3. Jika satu properti memiliki beberapa nilai (value) maka dipisahkan dengan
koma (”,”)
selector {property: value1, value2, value3}
4. Jika satu isian value menggunakan lebih dari satu kata, maka apitlah
dengan tanda petik (” "" ”)
Contoh:
body {font-family: "Trebuchet MS", Georgia, Arial, serif;}

Perhatikan kode di atas!

 Selector body memiliki beberapa pengaturan sifat yakni background dan font-
family.
 Trebuchet MS terdiri dari dua kata, oleh karena itu diapit tanda petik

Di atas telah jelas diterangkan cara penulisan CSS. Sekarang bagaimana jika satu
selector, memiliki banyak sifat. Jika menggunakan beberapa deklarasi, maka akhiri
deklarasi dengan titik koma (” : ”).
 Satu sifat:
selector {property: value;}
 Banyak sifat:
selector {property1: value; property2: value; property3: value;}
atau jika ingin lebih mudah dibaca, ditulis:
selector {
property1: value;
property2: value;
property3: value;
}

Contoh:
body {
  background: #000000;
  font-family: “Trebuchet MS”, Georgia, Arial, serif;
}

Adakalanya beberapa selector ternyata memiliki property dan value yang sama
persis. Misalkan sebagai berikut:
h1 {font-size: 8px; color:#cccccc;}
dan
h2 {font-size: 8px; color:#cccccc;}
dan
h3 {font-size: 8px; color:#cccccc;}
dan
h4 {font-size: 8px; color:#cccccc;}
dan
h5 {font-size: 8px; color:#cccccc;}
Karena kode tersebut terlalu panjang, kita bisa menyingkatnya. Pisahkan antara selector
dengan koma.
h1, h2, h3, h4, h5 {font-size: 8px; color:#cccccc;}
Comments tag diberikan sebagai informasi untuk CSS tertentu. Ketika CSS sudah
sangat panjang, maka informasi ini dibutuhkan agar css tertentu lebih mudah ditemukan.
Cara penulisannya adalah dibuka dengan /* dan ditutup dengan */

Contoh:
/* Ini adalah pengaturan header*/
#header-wrapper {
width: 120px;
height: 90px;
}

Selain selector terdapat properti baru CSS yang disebut Pseudo-element.

Berdasarkan W3C pseudo class didefiniskan sebagai berikut:
The pseudo-class concept is introduced to permit selection based on information that lies
outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class
and optionally by a value between parentheses. Pseudo-classes are allowed in all
sequences of simple selectors contained in a selector. Pseudo-classes are allowed
anywhere in sequences of simple selectors, after the leading type selector or universal
selector (possibly omitted). Pseudo-class names are caseinsensitive. Some pseudo-
classes are mutually exclusive, while others can be applied simultaneously to the same
element. Pseudoclasses may be dynamic, in the sense that an element may acquire or
lose a pseudo-class while a user interacts with the document.

Terjemahan ke bahasa Indonesia :

Konsep pseudo-class diperkenalkan untuk memungkinkan pemilihan berdasarkan
informasi yang terletak di luar pohon dokumen atau yang tidak dapat dinyatakan dengan
menggunakan selektor sederhana lainnya. A pseudo-kelas selalu terdiri dari sebuah "titik
dua" (:) diikuti dengan nama pseudo-class dan secara opsional dengan nilai antara tanda
kurung. Pseudo-class yang diperbolehkan di semua urutan selektor sederhana yang
terkandung dalam selector. Pseudo-class yang diperbolehkan di mana saja di urutan
pemilih sederhana, setelah jenis terkemuka pemilih atau pemilih universal (mungkin
dihilangkan). Pseudo-nama kelas caseinsensitive. Beberapa pseudo-kelas yang saling
eksklusif, sedangkan yang lain dapat diterapkan secara bersamaan untuk elemen yang
sama. Pseudoclasses mungkin bersifat dinamis, dalam arti bahwa suatu elemen dapat
memperoleh atau kehilangan pseudo-class sementara pengguna berinteraksi dengan
dokumen.
 BAB III
PEMBAHASAN

III.1 Fitur-fitur CSS3

CSS3 memiliki banyak sekali fitur-fitur baru di dalamnya yang membuat tampilan
web akan semakin cantik namun dapat mengurangi kecepatan load web. CSS digunakan
dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi
menggunakan metode table, karena dampak dari penggunaan table yang paling terasa
adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil
penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena
sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun
efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.
Fitur-fitur baru yang dimiliki oleh  CSS3 yaitu fasilitas untuk shadow dari suatu
div layout, fitur transparansi, gradien warna pada border, warna pada text yang diseleksi,
fitur skala memperkecil atau memperbesar layout, kolom pada text, dan fitur gradien
pada background.
Drop Shadow merupakan fitur yang dapat membuat bayangan pada suatu objek.
Objek dapat berupa teks maupun bangun dua dimensi. Dengan Frop Shadow maka objek
tersebut akan tampak lebih menonjol dari objek sekitarnya.Transparency membuat suatu
objek menjadi transparan. Multiple Border Color merupakan fitur yang dapat membuat
border memiliki warna yang lebih dari satu. Select Text Color merupakan fitur yang
membuat warna teks yang diseleksi (blok) akan memiliki warna sesuai keinginan kita,
default dari warna teks yang diseleksi adalah biru tua. Scale merupakan fitur yang dapat
membuat objek menjadi lebih besar atau lebih kecil dengan merubah skala objek. Text
Column merupakan fitur untuk membuat teks berbentuk teks kolom seperti kolom berita
pada surat kabar. Gradient merupakan fitur yang dapat membuat objek memilki warna
yang digradiasi.

III.2 Penerapan CSS3

Sintak untuk pembuatan CSS3 sama seperti versi yang sebelumnya, yaitu
menggunakan Selector dan Declaration. Selector adalah elemen HTML yang ingin Anda
atur style nya. Sedangkan Declaration terdiri dari dua bagian yakni property dan value.
Properti adalah attribut gaya dan value adalah nilai pengaturnya.

selector {property: value}

Terdapat perbedaan penamaan style antara safari dan chrome dengan firefox
1. Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris
 -moz-box-shadow: #585858 3px 3px 4px;
 -webkit-box-shadow: #585858 3px 3px 4px;
Perintah -moz digunakan untuk browser firefox dan -webkit digunakan untuk browser
chrome serta safari. Contoh penggunaan drop shadow adalah seperti di bawah ini
2. RGBA (Transparency)
Contoh penggunaannya adalah background-color: rgba(218, 227, 240, .3);
rgb 218,227,240 menghasilkan warna abu-abu namun lebih keputih, dan .3 ini
menjelaskan penggunaan transparansi 30%.
contohnya adalah seperti ini

3. Multiple Border Color

Contoh penggunaannya adalah -moz-border-bottom-colors: #0101DF #5858FA
#8181F7 #A9A9F5 #CECEF6 #E0E0F8 #EFEFFB #fff;
-moz-border memungkinkan satu div memiliki banyak border yang berlapis dan hasilnya
adalah seperti ini

4. Select Text Color

Contoh penggunaannya adalah
p.selection::-moz-selection {
background: #2E9AFE; /* Firefox */
color: #fff;
}
-moz-selection terjadi ketika textnya diseleksi

Berikut adalah gambar teks sebelum diseleksi

Berikut adalah gambar teks diseleksi

Berikut adalah gambar perbandingan teks yang diseleksi secara default

5. Scale
Contoh dari penggunaannya adalah
 -moz-transform: scale(1.05);
 -webkit-transform: scale(1.05);
moz-transform digunakan untuk firefox, dan scale(1.05) menghasilkan perbesaran 1,05
dari ukuran aslinya dan begitu juga dengan webkit-transform yang digunakan untuk
browser safari dan chrome.

Berikut adalah gambar objek sebelum difokus oleh kursor

Berikut adalah gambar objek yang difokus oleh kursor

6. Text Column
Contoh penggunaahnya adalah
-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 30px;
Sintak di atas menjadikan text memiliki 3 kolom. dan memiliki garis tengah sedangkan
gap disini sama seperti padding, atau jarak antar text.

7. Gradient
Contoh penggunaannya adalah
background: -moz-linear-gradient(-45deg, #2E9AFE,#0404B4 );
Penggunaan sintak -moz-linear-gradien dengan 45 derajat mulai dari biru tua sampai biru
muda, hasilnya adalah seperti ini :
 BAB IV
KESIMPULAN DAN SARAN

IV.1 Kesimpulan

 CSS merupakan bahasa pemrograman yang digunakan untuk mempermudah

dalam mendesain suatu web dan mempercantik halaman web tersebut
 CSS3 merupakan versi terbaru dari CSS yag memiliki banyak fitur yang
mempercepat load suatu web
 CSS3 tidak memiliki perbedaan dalam sintaksis (penulisan sintak) namun lebih
banyak fitur yang dimiliki

IV.2 Saran
 Menggunakan CSS3 akan mempermudah dalam mendesain suatu web dan
mempercantik halaman web tersebut
DAFTAR PUSTAKA