Cascading Style Sheet (CSS)
1. Pengertian
CSS adalah
singkatan dari cascading style sheets, yaitu sebuh bahasa untuk mengatur visual
atau tata letak dengan mengatur elemen yan gada pada HTML. Seperti mengatur
jenis font, warna tulisan, latar belakang / background.
CSS
digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun
sebuah website yang menarik dan memiliki fungsi yang berjalan baik.
CSS juga
berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman
website. Kenapa demikian?
Apabila
hanya menggunakan HTML ketika membangun website dengan beberapa halaman, Anda
harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut.
Dengan
adanya CSS, Anda cukup menulis kode satu kali untuk sebuah elemen HTML untuk
diterapkan ke semua halaman. Nantinya, ketika akan melakukan perubahan, Anda
juga cukup melakukan perubahan pada satu kode tadi.
2. Fungsi CSS
1. Mempercepat loading HTML
2. Memudahkan pengelolaan KODE
3. Menawarkan lebih banyak variasi
Tampilan
4. Membuat website tampil rapi disemua
ukuran layer (Responsive)
3. Aturan Penulisan Kode CSS
A.
Susunan CSS
Kode CSS tersusun atas selector
dan deklarasi. Selector adalah tag HTML
yang akan diberi atau
dikenai CSS, sedangkan deklarasi adalah properti dan nilai
yang akan ditentukan
untuk tag bersangkutan.
Contoh :
body {
background: black;
}
Pada kode di atas, body
disebut sebagai selector dan background: black;
disebut sebagai deklarasi. background adalah properti dari tag
<body> yang akan di-
set nilainya, sedangkan black adalah nilai yang digunakan atau
akan diisikan ke
dalam atribut background.
Sebuah selector dapat memiliki lebih dari satu deklarasi,
dimana setiap deklarasi
harus diakhiri oleh tanda titik koma atau semicolon (;).
Ada kalanya, dalam
membuat kode CSS kita menjumpai satu atau beberapa selector yang memiliki
deklarasi yang sama dengan selector lainnya. Untuk kasus semacam ini, deklarasi
cukup ditulis sekali saja, akan tetapi daftar selector-nya saja yang harus
disebutkan satu persatu dengan memisahkannya menggunakan tanda koma. Berikut
ini contoh kode yang akan menunjukkan hal tersebut.
body,
td, h2 {
background: black;
color: red;
}
Pada contoh kode di atas,
deklarasi akan berlaku untuk tag <body>, <td>, dan
<h2>.
B. Penulisan
1. Inline CSS
Menuliskan kode CSS
langsung pada tag yang akan diubah atau diatur style-nya
Contoh :
<h1 style=”color: red;
border-bottom: 1px solid red;”>
Heading 1
</h1>
2. Internal CSS (Embedded Styles)
Menuliskan CSS dibagian
antara tag head pembuka dan penutup (<head> …..
</head>) penulisan
ini hanya berlaku untuk 1 halaman saja. Jika ingin menyamakan css setiap
halaman, maka internal CSS ini harus selalu dituliskan
Contoh :
<head>
<style>
Body {
background-color:blue;
}
P {
font-size:20px;
color:white;
}
</style>
</head>
<p>Ini
adalah contoh kalimat.</p>
3. External CSS (Linked Styles)
external CSS adalah kode
CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini
berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan.
Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman
sekaligus.
Tag <link> yang
digunakan untuk memanggil file .css diletakkan pada bagian
header dokumen HTML,
dengan bentuk umum penggunaan seperti berikut:
<link
rel=”stylesheet” href=”nama_file_css” type=”text/css” />
Dengan menggunakan cara
seperti di atas, ada beberapa keuntungan yang
diperoleh, yaitu:
·
Kode
(baik CSS maupun HTML) tampak lebih rapi dan mudah untuk dibaca atau dipahami.
·
Lebih
mudah dikembangkan atau dimodifikasi.
·
Kode
CSS dapat digunakan oleh dokumen-dokumen HTML lain yang ingin menerapkan style
tersebut.
·
Perubahan
pada file.css akan berpengaruh terhadap semua dokumen HTML yang menerapkannya.
Artinya perubahan style hanya dilakukan sekali pada file .css-nya saja.
4. Latihan
1. Buatkan sebuah folder di project
kalian (Folder nama anda) dengan nama folder Latihan CSS, kemudian
didalam folder Latihan, buatkan satu buah file HTML dengan nama index.html dan
satu buah folder dengan nama assets dan didalam folder assets buatkan
satu buah file dengan nama style.css
2. Tuliskan sourcode berikut kedalam file index.html
3. Tuliskan sourcode berikut kedalam
file style.css
5. Tugas
Melanjutkan tugas praktikum ke 2 (Membuat
CV) dengan menambahkan CSS agar web CV menjadi lebih indah dan memiliki daya Tarik
bagi pembacanya
0 Komentar