Menerapkan CSS pada Bagian Tertentu Halaman Website HTML

Sebuah halaman website terdiri dari beberapa bagian. Sebagai contoh, bagian utama website antara lain adalah header atau bagian kepala, menu navigasi, bagian konten, aside atau sidebar, dan bagian kaki atau footer. Bagian utama tersebut diatur sedemikian rupa supaya berada pada tempatnya masing-masing. Biasanya header dan menu navigasi berada di bagian atas, konten berdampingan / bersebelahan dengan aside di bagian tengah, dan footer berada di bagian paling bawah.

Kenyataannya, beberapa halaman website tidak hanya terdiri dari empat bagian saja seperti yang diilustrasikan di atas. Ada juga bagian-bagian yang diperlukan untuk menambah fungsi atau fitur pendukung lainnya. Bagian tersebut perlu juga diatur agar berada di tempat yang diinginkan.

Untuk memahami CSS secara umum silakan baca melalui halaman berikut.
Merapikan Tampilan Halaman Web HTML Menggunakan CSS

Setiap bagian pada website didesign secara unik sehingga bisa dibedakan mana header, navigasi, konten, aside, dan footer. Untuk membuat unik bagian-bagian sebuah website bisa dengan menggunakan bantuan CSS melalui fungsi CSS selector. Penerapannya antara lain dengan membedakan ukuran, warna, jenis huruf, dekorasi huruf, ketebalan, dan sebagainya.

Berikut ini adalah contoh penerapan kode CSS untuk mengatur suatu bagian pada sebuah halaman website HTML. Contoh-contoh berikut menggunakan metode CSS eksternal atau CSS internal. Untuk menerapkan CSS inline, bisa langsung diterapkan menggunakan kode seperti berikut.

<h1 style="kodecss">Judul</h1>
<p style="kodecss">Isi paragraf.</p>

CSS Selector Langsung untuk Tag HTML Umum

CSS selector jenis ini diterapkan untuk konten di antara tag html yang secara umum biasa digunakan seperti tag heading, paragraf, list atau daftar, tabel, dan sebagainya.

Misalnya jika ingin mengatur tag heading dan paragraf pada suatu halaman, contoh kode CSSnya adalah sebagai berikut.

h1,
h2{
color:#000;
font-size:30px;
font-weight:bold;
}
p{
color:#333;
font-size:16px;
line-height:24px;
}

Jika kode tersebut diterapkan, tulisan di antara tag h1 dan h2 (heading) akan berwarna hitam dengan ukuran 30px dan berbentuk tebal. Sedangkan tulisan antara tag p (paragraf) akan berwarna abu-abu gelap, ukuran huruf 16px dan jarak satu baris dengan baris lainnya setinggi 24px.

CSS Selector Khusus

Jika ingin menerapkan gaya tertentu pada sebuah paragraf, gunakan selector khusus. Dua jenis selector yang sering digunakan dalam penerapan kode CSS adalah class dan id.

Misal, jika ingin menampilkan paragraf tertentu berbeda dengan paragraf lainnya gunakan kode CSS seperti berikut.

.paragrafkhusus{
color:#ff0000;
font-style:italic;
}

Pada paragraf yang akan dikenai perlakuan khusus, gunakan kode seperti di bawah ini.

<p class="paragrafkhusus">Isi dari paragraf khusus.</p>

Paragraf tersebut akan terlihat berbeda dari paragraf lainnya. Huruf pada paragraf tersebut akan berwarna merah dengan huruf berjenis miring.

Tag yang sering digunakan untuk menerapkan css pada suatu bagian di sebuah halaman website html adalah div dan span. Perbedaan keduanya adalah tag div akan memberikan baris tambahan ketika digunakan. Sedangkan tag span hanya akan mengubah gaya tanpa menambahkan baris baru.

Contoh penggunaan tag div dan span yang akan diterapkan kode CSS adalah seperti berikut.

Menggunakan tag div

Tulisan sebelum tag div, setelah ini konten di dalam tag div akan berada pada baris baru.
<div class="sebelahkanan">
Isi atau konten dari tag div dengan css class sebelahkanan.
</div>
Tulisan setelah tag div, tulisan setelah tag div ini akan berada di baris baru.

Menggunakan tag span

<p>Tulisan sebelum tag span <span class="gayakhusus">isi atau konten dari tag span dengan css class gayakhusus</span> dilanjutkan dengan tulisan setelah tag span, tulisan setelah tag span tetap berada di baris yang sama.</p>

Kode CSS untuk mengatur tag div dan span di atas berturut-turut menggunakan selector class .sebelahkanan dan .gayakhusus. Agar dapat memahaminya, silakan Anda coba sendiri menggunakan kode-kode yang telah dijelaskan di atas. Selamat mencoba, semoga mendapat ilmu baru.