Cara Kerja dan anatomi Cascading Style Sheet

DEFINISI DAN FUNGSI CSS

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
3. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
5. Dapat digunakan dalam hampir semua jenis web browser.

CSS merupakan sebuah teknologi internet yang di rekomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di standarisasikan, internet explorer dan Netscape merilis browser terbaru yang mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3. Yaitu :

CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan. Ketika sebuah web yang semula menggunakan CSS 2 bermigrasi CSS 3, tidak perlu mengubah apapun.

Dengan adanya CSS mempermudah pengaturan dan pemeliharaan sebuah website dan tampilannya karena CSS memisahkan antara bagian pengatur gaya dan isi dari web.

ANATOMI DARI CSS

Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.

CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value. 
Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :

Selector{ Property : value; }

Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah form
form{ margin-left:0; }

Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :

• form : selector yang akan di atur stylenya
• margin-left : property yang digunakan untuk jarak fieldset dari batas kiri layout
• 0 : nilai dari property margin-left

Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda.

CARA KERJA CASCADING STYLE SHEET

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class, untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.

Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } .
Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma img. Bentuk umumnya :

Contoh :

Latihan 1 

A. Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <p></p> atau paragraf.
Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML, namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style jika terjadi perubahan tampilan website dikemudian hari.
Latihan 2

B. Embedded Style Sheet 

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>, lebih tepatnya didalam tag <head>.
Pada listing kode diatas, penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style> <style> input.btn 
{ …….}
Di bagian body terdapat penerapan CSS dengan cara memanggil nama class nya
Latihan 3

C. External Style Sheet 

CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file HTML. Contoh penulisan file.css
input.btn {color: #fff; background: #ffa20f; border: 2px outset #BBD16D; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold; width : auto;}

Latihan 4

ALAT DAN BAHAN 

1. Modul Praktikum
2. Perangkat Komputer
3. Aplikasi Notepad ++ 
4. Aplikasi Browser (Mozilla, IE, Chrome dan lain-lain)

mengatur Style Teks

Dasar mengatur teks pada CSS biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.

Properti	Keterangan
color	Properti color digunakan untuk mengubah warna text
direction	Properti direction digunakan untuk menentukan posisi text
letter-spacing	Properti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kata
word-spacing	Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimat
text-indent	Properti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat
text-align	Properti text-align digunakan untuk mengatur posisi atau perataan text
text-decoration	Properti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada teks
text-transform	Properti text-transform digunakan untuk mengatur huruf besar atau kecil
white-space	Properti white-space digunakan untuk mengatur jarak enter sebuah kalimat
text-shadow	Properti text-shadow untuk membuat bayangan pada teks

Properti-properti diatas akan kita bahas satu-persatu, penulis berharap pembaca sambil mempraktekan tutorial ini langsung, agar tahu bagaimana sebuah teks dapat dimanipulasi dengan sintaks css.
Source : KLIK

Mengatur Style multimedia

1. CSS pada Tampilan Gambar

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :

<img src="nama-file-gambar" width="lebar" height="tinggi" alt="text" title="text" border="1" />

Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak.

2. CSS Gambar untuk Background

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.

div { background: url( “latar.png”); background-image: url(“latar.png”);}

Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat bagaimana berikut :

Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti contoh di bawah ini :

<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5Erkt8vKLDXiCPTw5WZySLrNyz_r-UsHorg2YsCwp7YCsy9_H2p5sC78XwgP68ao4o26MOeB29Jye81K6Jowl68M40tnDGG2_m9kzXiLd1af-AgyoNPWnt8xmrR0VtjgDPFMOEF27MCE/s1600/back.jpg'); background-repeat: repeat;">
<div style="color: white; text-align: center;">
<b>BAGIMU NEGERI</b>
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
</div>
</div>

Maka hasilnya adalah sebagai berikut :

BAGIMU NEGERI

Padamu negeri kami berjanji

Padamu negeri kami berbakti

Padamu negeri kami mengabdi

Bagimu negeri jiwa raga kami

Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan satu kali :

3. CSS untuk Menyisipkan Gambar
Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS. Seperti contoh di bawah ini.

BAGIMU NEGERI

Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami

4. CSS pada Tampilan Video

Untuk penerapan Cascading style sheet pada elemen video dapat dituliskan secara inline seperti contoh berikut ini :

<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin: 0 auto; width:400px ; heigth:400;" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkLUdUQTNhU0hkYWs/" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>

Bila program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini :

5. CSS Video Embed dari Youtube

Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan CSS secara embed untuk menampilan video dari youtube. Seperti di bawah ini.

<html>
<head>
<title>Test</title>
<style>
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;
height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="videoWrapper">
<iframe width="560" height="349" src="url_video" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

source : KLIK

Mengatur Style table

 Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

<table>

    <!-- Data -->

</table>

dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr:

<table>

    <tr>

        <!-- Isi Baris Tabel -->

    </tr>

    <tr>

        <!-- Isi Baris Tabel -->

    </tr>

</table>

Dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:

<table>

    <tr>

        <td>NIM</td>

        <td>Nama</td>

    </tr>

    <tr>

        <td>23511000</td>

        <td>Alex Xandra Albert Sim</td>

    </tr>

</table>

maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:

Source : KLIK

Mengatur Style Formulir

Form di HTML dapat kita buat dengan tag <form>. Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

·         action untuk menentukan akasi yang akan dilakukan saat data dikirim;

·         method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">

<!-- form field di sini -->

</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh file proses php untuk memproses data form.

 Souce : KLIK