MODUL CSS

INTRODUCTION

Capaian Pembelajaran :
Peserta didik dapat membuat website dan aplikasi berbasis web.

Tujuan Pembelajaran:
Memahami Konsep Dasar Cascade Style Sheet(CSS)

Materi:
Pada mulanya halaman web hanya berupa teks saja cukup untuk menyampaikan pesan pesan
penting rahasia dan hanya digunakan untuk kepentingan militer pada departemen pertahanan
AS. Seiring tuntutan kebutuhan dan inovasi-inovasi yg dibuat para ilmuwan sehingga teknologi
web ini berkembang sangat pesat seperti yang kita kenal saat ini. Yang sebelumnya hanya
untuk kepentingan militer sekarang sudah bisa dinikmati oleh siapa [Link] tadinya hanya
teks saja sekarang sudah multimedia.
Meski demikian, html saja tidak cukup untuk membuat halaman web profesional , kita perlu
menambahkan style/CSS sebagai pelengkapnya.
Jadi, CSS adalah sekumpulan kode untuk mengatur elemen-elemen halaman web agar
memiliki tampilan yang menarik, artistik dan profesional serta mudah digunakan sehingga
dapat memikat pengunjung.
Sebelum mulai menerapkan style ini kita perlu memahami beberapa istilah yg kelak akan
digunakan dalam pengkodean dan penerapannya pada html.

A. Selector
Selector atau istilahnya disebut penyeleksi ini merujuk pada elemen-elemen halaman web
seperti teks, gambar, video, tabel , formulir dll. yg akan diberikan style/css.
Ada 3 jenis selector dalam css

1. Tag
Selctor tag merujuk oada tag-tag html seperti h, p ,img, a, li dan banyak lagi.
2. Class
Selctor class merupakan selector yang paling umum dan banyak digunakan untuk membuat
style pada halaman web. Untuk menerapkan kode css dengan selector class kita perlu
membuat nama class terlebih dahulu yg kemudian disisipkan kedalam tag html yg akan
diberikan style.
Aturan penulisan nama class pada CSS sebagai berikut.
1. Nama class diawali dengan titik (.)
Contoh : .teks1, .teks_1 , .teks-1
2. Nama class bersifat case sensitive yaitu huruf besar dan kecil memiliki arti yang
berbeda.
3. Nama class bersifat unik (tidak ada nama class yang sama/identik.
3. id (#) sama seperti class bedanya diawali dengan tanda pagar (#) contoh : #teks-1

B. Atribut
Atribut merupakan identitas/properti dari selector(tag,class,id) contoh: color, font-family,
font-size dll. Atribut ibarat kosakata dalam suatu bahasa. Semakin banyak menguasai kosakata
semakin lancar berbicara. Begitu juga css semakin banyak menguasai atribut akan semakin
mudah mendesain halaman web

C. Value (Nilai)
Value/nilai merupakan satuan data untuk atribut (isi atribut). Contoh : red merupakan nilai
untuk atribut color, background.

Bentuk Umum Penulisan CSS (Cascade style sheet)

selector {
atribut : value;
}
Contoh selector Tag : h1 { color : red }
Contoh selector class : .teks-merah { color:red }
Contoh selector id : #teks-merah { color:red }

Keterangan :
Atribut harus ditulis huruf kecil
Jika atribut lebih dari satu dipisahkan dengan titik koma (;)
Atribut dan value berada dalam kurung kurawal

Ada 3 cara penerapan CSS (Cascade Style Sheet) pada dokumen HTML.

1. inline : dalam baris (kode css disisipkan dalam kode html

2. internal/embedding : penulisan css nya secara terpisah tapi masih dalam 1 file/ satu
halaman.
Contoh :
3. eksternal : penulisan css dibuat dengan file terpisah dan dihubungkan dengan file html
contoh : pertama kita buat file [Link] lalu isi dengan kode-kode css selanjutnya
hubungkan dengan file html. Seperti contoh berikut;

Keterangan :. style css merupakan nama file css-nya.

Dalam praktiknya kita menggunakan cara yang ketiga yaitu cara eksternal, lebih efektif
dan mudah dalam pengelolaan. Meski demikian kita harus faham juga dengan cara
pertama dan kedua.