CSS

Pemahaman CSS

1. Memahami CSS

    CSS atau Cascading Style Sheet adalah bahasa pemrograman yang digunakan untuk menggambarkan tampilan dan format suatu dokumen yang ditulis dalam bahasa markup seperti HTML (Hypertext Markup Language), CSS dikembangkan oleh W3C (World Wide web Consortium) pada tahun 1996. CSS dapat membuat desain yang konsisten dan responsif di seluruh situs web atau aplikasi web. Selain itu ada tiga metode penulisan CSS atribut, yaitu: inline, internal, extrernal

2. CSS Inline

    CSS inline mengacu pada teknik pemrograman web di mana user menambahkan styling langsung pada elemen HTML individual menggunakan atribut `style`. Ini berarti user menambahkan peraturan CSS ke dalam tag HTML itu sendiri dan styling tersebut hanya berlaku untuk elemen tersebut. 
Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <p style="color: blue; font-size: 16px;">Ini membuat teks berwarna biru dengan font ukuran 16 pixel.</p>
</body>
</html>

Keuntungan CSS inline adalah kemudahan dan kemampuannya untuk mengganti styling secara langsung pada elemen tanpa harus membuat file CSS terpisah. Namun, ada beberapa kelemahan yaitu kurang efisien dan fleksibel

3. CSS Internal

CSS internal, juga dikenal sebagai CSS internal stylesheet, mengacu pada praktik menyertakan kode CSS (Cascading Style Sheets) langsung dalam dokumen HTML yang berisi deklarasi CSS dalam tag `<style>` yang terletak di dalam bagian `<head>` dari dokumen HTML. Ini memungkinkan Anda untuk mendefinisikan gaya yang akan digunakan khusus untuk halaman web tersebut. 
Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Internal</title>
    <style>
        /* Deklarasi CSS internal */
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: darkblue;
        }

        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Ini adalah contoh CSS internal.</p>
</body>
</html>

CSS internal ditempatkan di dalam tag <style> yang ada di bagian <head> dari dokumen HTML. Ini memungkinkan user untuk mendefinisikan berbagai properti CSS untuk elemen-elemen di halaman web tersebut. Keuntungan dari penggunaan CSS internal adalah isolasi styling dan kode yang lebih bersih

4. CSS External

CSS external adalah praktik menyimpan kode CSS (Cascading Style Sheets) dalam file terpisah dengan ekstensi `.css`. File CSS ini kemudian dapat dihubungkan ke dokumen HTML menggunakan elemen <link>. Ini adalah cara yang paling umum dalam pengembangan web untuk mengelola tampilan 
Contoh:

mulai dengan membuat file CSS terpisah dengan format ".css" (misalnya styles.css)
 
   /* styles.css */

   body {
       background-color: lightblue;
       font-family: Arial, sans-serif;
   }

   h1 {
       color: darkblue;
   }

   p {
       font-size: 16px;
   }
   ```

Lalu menghubungkannya dengan HTML menggunakan tag <link> dalam bagian <head> 
Contoh:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Contoh CSS External</title>
       <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
       <h1>Hello World!</h1>
       <p>Ini adalah contoh CSS external.</p>
   </body>
   </html>

   Dalam contoh ini, atribut `href` pada elemen `<link>` menunjuk ke file CSS eksternal (`styles.css`).

Keuntungan dari penggunaan CSS external diantaranya adalah kode yang bersih dan terstruktur dan dapat digunakan di seluruh situs. Penggunaan CSS external sangat umum dalam pengembangan web, terutama untuk proyek-proyek yang lebih besar dan kompleks, karena memungkinkan pengelolaan tampilan yang lebih efisien dan pemeliharaan yang mudah.

Komentar

Posting Komentar