Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CSS #1 – Pengenalan CSS

2 min read

Tutorial CSS - Pengenalan CSS

Ilmucoding.comPengenalan CSS. CSS merupakan singkatan dari Cascading Style Sheets.

CSS bukan termasuk ke dalam bahasa pemrograman karena tidak mampu melakukan proses seperti perulangan, perkalian dan penyimpanan data.

Cascading Style Sheets mengatur bagaimana penampilan setiap elemen HTML pada halaman web. Karena itu, CSS dapat mengendalikan beberapa hal, yaitu:

  • ukuran gambar
  • warna bagian tubuh pada teks
  • warna tabel
  • ukuran border
  • warna border
  • hyperlink
  • warna mouse over
  • spasi antar paragraf
  • spasi antar teks
  • margin kiri, kanan, atas, bawah
  • dan parameter lainnya.[1]

Manfaat menggunakan CSS adalah satu file bisa digunakan untuk beberapa halaman website. Anda tidak perlu membuat CSS pada setiap file HTML. Cukup satu file CSS dan sudah bisa digunakan pada file HTML lainnya.

Bagaimana CSS Bekerja?

CSS bekerja dengan mengaitkan rule dengan elemen HTML. Rule-rule ini mengatur bagaimana konten elemen tertentu harus ditampilkan.

Aturan CSS berisi dua bagian: selector dan declaration.

pengenalan css

Deklarasi CSS ditandai dengan { … } dan masing-masing terdiri dari dua bagian: properti dan nilai, dipisahkan oleh titik dua. Anda bisa menentukan beberapa properti dalam satu deklarasi, masing-masing dipisahkan oleh tanda titik koma.

Lihat gambar di bawah ini:

Pengenalan CSS

Bagaimana Cara Menggunakan CSS?

Ada 3 cara dalam menggunakan CSS, yaitu:

  1. Inline: menggunakan atribut style pada elemen HTML.
  2. Internal: menggunakan elemen style pada bagian head dokumen HTML.
  3. External: menggunakan file CSS terpisah.

Inline CSS

Cara ini merupakan cara termudah untuk menggunakan CSS yang digunakan untuk mengatur tampilan (style) untuk sebuah elemen HTML.

Jika terdapat 10 elemen HTML yang akan anda ubah style-nya, maka anda harus menuliskan manual untuk ke-10 elemen tersebut.

Untuk menggunakan inlince CSS, anda bisa menggunakan atribut style. Misal:

<h1 style="color: blue;">This is heading blue</h1>

Kelemahan Inline CSS

  1. Internal CSS biasa digunakan untuk mengatur tampilan (style) beberapa elemen dalam 1 dokumen HTML.
  2. Untuk menggunakan internal CSS, anda bisa meletakan elemen style di bagian head pada dokumen HTML.

Contoh:

<html>
<head>title>Inline CSS</title></head>
<body>
    <h1 style="color: blue;">This is a Heading 1</h1>
</body>
</html>

Hasil dari kode di atas:

pengenalan css

Internal CSS

Internal CSS biasa digunakan untuk mengatur tampilan (style) beberapa elemen dalam 1 dokumen HTML. Tipe ini berada di antara tag <head>..</head>. Kemudian di dalam tag head Anda bisa menambahkan tag <style> … code css … </style>

Contoh:

<html>
<head>
    <title>Internal CSS</title>
    <style>
        body{
            background: grey;
        }
        .heading1{
            color: azure;
        }
    </style>
</head>
<body>
    <h1 class="heading1">This is a Heading 1</h1>
</body>
</html>

Hasilnya:

pengenalan css

Kelemahan Internal CSS

  1. Internal CSS hanya bisa digunakan pada 1 file HTML
  2. Internal CSS tidak bisa digunakan pada file HTML lainnya

External CSS

External CSS bisa digunakan untuk mengatur tampilan (style) untuk beberapa dokumen HTML. Untuk menggunakan External CSS, anda bisa membuat sebuah file dengan ekstensi .css.

Misal style.css.

Tambahkan link ke file style.css pada dokumen HTML anda di dalam elemen head.

Contoh:

<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

Dan pada style.css, ketik script berikut:

.heading1{
    color: red;
}

Hasilnya:

Penutup:

Pada akhir artikel ini saya ingin mengucapkan terus semangat untuk belajar.

Masih banyak yang perlu dipelajari, contohnya:

  • Attribut id dan class
  • Selector child
  • Tipe Selector turunan
  • Selector universal
  • Selector important
  • dan masih banyak lagi …

Selamat berjuang…

Sumber:

[1] Slamet Riyanto, Membuat Web Portal Multi Bahasa Jomla 1.5X + CD, halaman 236. Elex Media Komputindo.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.