Merapikan Tampilan Halaman Web HTML Menggunakan CSS
CSS, singkatan dari Cascading Style Sheet merupakan kode yang mengatur tampilan sebuah dokumen html seperti mengatur ukuran lebar dan tinggi suatu bagian, warna, jarak, ukuran, dan sebagainya. Secara garis besar, kode CSS diterapkan di dua tempat, yaitu pada bagian head atau body. Sedangkan cara menggunakan CSS dilakukan dengan tiga cara, yaitu eksternal, internal, dan inline.
Dengan adanya CSS, informasi yang ditampilkan di halaman web html menjadi lebih rapi dan enak dipandang, sehingga pengunjung atau pembaca merasa nyaman ketika mengunjungi sebuah halaman website.
Penggunaan CSS
Telah disinggung di atas bahwa penggunaan CSS dilakukan dengan tiga cara, yaitu sebagai berikut.
Secara eksternal, kode CSS ditulis pada sebuah file dengan ekstensi .css dan dipanggil melalui tag link di dalam tag head. Berikut contoh kodenya.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
...
</head>
Secara internal, kode CSS ditulis langsung di dalam file html diapit oleh tag style masih di dalam tag head seperti berikut.
<head>
<style type="text/css">
...
</style>
...
</head>
Sedangkan secara inline, kode ditulis langsung pada komponen body, bukan di head. Penggunaan cara ini berguna ketika terdapat bagian konten pada body yang ingin diberi perlakuan khusus, bukan secara umum diterapkan untuk seluruh bagian dan halaman website. Contoh penggunaannya adalah seperti berikut.
<span style="...">konten</span>
Selectors, Properties, dan Values
Penulisan CSS dasar melibatkan tiga hal, yaitu selectors, properties, dan values. Ketiganya merupakan bagian yang tak terpisahkan.
Misal, kita menginginkan dokumen html memiliki lebar tertentu dan berada di tengah layar. Contoh kode CSS-nya adalah sebagai berikut
body{
margin : 0 auto;
width : 960px;
}
Dari sepenggal kode di atas, body disebut sebagai selector, margin dan width disebut sebagai property, sedangkan 0 auto dan 960px disebut value.
Tanda kurung kurawal menandakan bahwa property dan value yang ada di dalamnya berkaitan dengan selector yang didefinisikan. Tanda titik dua merupakan penghubung antara property dan value. Sebagai pemisah antara satu property yang satu dengan lainnya digunakan tanda titik koma.
Jenis Selectors
Contoh selector di atas akan mengatur komponen yang terletak di dalam tag body. Jenis selector lainnya yang perlu diketahui dalam mendesign dokumen html adalah class dan id. Selector class digunakan untuk bagian dokumen yang bisa digunakan berulang-ulang. Sedangkan id hanya bisa digunakan sekali untuk bagian unik.
Penggunaan selector class menggunakan tanda . sedangkan untuk id menggunakan tanda #.
Contoh penggunaannya adalah sebagai berikut.
.bagiansatu{
color : #000;
background-color : #fff;
border : 1px solid black;
}
#bagiandua{
color : #fff;
background-color : #000;
}
Penerapan kode CSS di atas pada dokumen html adalah sebagai berikut.
<div class="bagiansatu">
...
</div>
<div id="bagiandua">
...
</div>
Konten yang terdapat di dalam tag div akan menyesuaikan dengan pengaturan CSS yang telah ditetapkan.
Contoh penggunaan CSS untuk mengatur lebar body halaman web HTML
Dokumen html yang dibuat tanpa "sentuhan" akan tampak penuh satu halaman layar. Salah satu cara merapikan dokumen HTML sederhana adalah mengatur lebar body dengan ukuran tertentu.
Katakanlah kita telah membuat halaman website HTML dengan kode sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
Tulisan akan tampak memenuhi layar dan ini kurang enak dipandang mata. Untuk membuat tulisan tampil rapi dengan lebar tertentu, kita perlu menambahkan kode css di antara tag head seperti yang sudah dijelaskan sebelumnya.
Tambahkan tag style di antara tag head sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<style type="text/css">
...
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
Titik-titik di antara tag style tersebut adalah tempat diletakannya kode css untuk mengatur tampilan halaman website HTML.
Untuk membuat tulisan (konten) tampil di tengah layar dengan lebar tententu, tambahkan kode css berikut.
body {
width: 800px;
margin: auto;
}
Sedangkan jika CSS digunakan secara eksternal, kode CSS di atas disimpan di dalam file berekstensi .css, misalnya style.css. Kode pada HTML-nya menjadi seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
Sekarang tampilan halaman website HTML yang telah dibuat akan tampil dengan lebar 800px di tengah layar pada browser dengan resolusi lebar lebih besar dari 800px seperti berikut ini.
Demikian konsep dasar penggunaan CSS untuk merapikan tampilan HTML.
Oleh Opan
Dibuat 15/05/2017
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.
| ⇐ | Beberapa Tag yang Terdapat pada head dan body Dokumen HTML | Konsep Dasar Pemrograman PHP dan Pengenalan Variable | ⇒ |
Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.