Tiga Cara Design Website Dengan CSS

Kangbadar.com

Daftar Isi:

  1. Pengantar
  2. External Style Sheet
  3. Internal Style Sheet
  4. Inline Style Sheet

1. Pengantar

Ketika memulai perjalanan dalam membuat website, pemahaman dasar tentang CSS (Cascading Style Sheet) menjadi kunci. CSS adalah singkatan dari Cascading Style Sheet yang berfungsi untuk mendesain (style) pada dokumen HTML.

Pada dasarnya, CSS memiliki fungsi untuk merangkum sejumlah file HTML dengan satu perintah. Ini memungkinkan kita untuk mengubah tampilan elemen-elemen HTML secara konsisten dengan hanya mengedit satu file CSS. Sebagai contoh, jika kita ingin mengubah jenis huruf (font) pada seluruh halaman web, kita hanya perlu mengedit file CSS tanpa harus menyentuh file HTML satu per satu.

2. External Style Sheet

External Style Sheet adalah cara yang paling umum digunakan dalam menggunakan CSS. Ini melibatkan pembuatan file CSS terpisah yang kemudian disisipkan ke dalam tag HTML. Cara ini memungkinkan gaya-gaya yang sama digunakan di berbagai halaman web dengan mengacu pada satu file CSS eksternal.

     
 
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

3. Internal Style Sheet

Internal Style Sheet melibatkan penempatan kode CSS langsung di dalam tag <style> di dalam tag <head> dari dokumen HTML. Meskipun gaya-gaya ini hanya berlaku untuk halaman web tertentu, cara ini tetap berguna jika Anda ingin menerapkan gaya yang unik untuk halaman tersebut.

<head>
    <style type="text/css">
        #coba {
            width: 40%;
            float: left;
            margin: 0;
            text-align: left;
        }
    </style>
</head>

4. Inline Style Sheet

Inline Style Sheet merupakan cara paling langsung untuk menerapkan gaya pada elemen HTML, di mana kode CSS ditempatkan langsung di dalam atribut style dari elemen HTML tersebut.

<div style="width: 40%; float: left; margin: 0; text-align: left;"></div>

Dengan menguasai ketiga cara di atas, Anda akan memiliki kemampuan yang lebih luas dalam mendesain website Anda. Setiap metode memiliki kelebihan dan kekurangan masing-masing, dan pemilihan tergantung pada kebutuhan dan preferensi Anda dalam pengembangan website. Selamat mencoba!

You might be interested in …