sintaks dasar css

Belajar CSS #2: Sintaks Dasar CSS untuk Pemula

CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk menentukan gaya atau style tampilan dari dokumen HTML. Dengan CSS, kita bisa membuat halaman web lebih menarik dan mudah dipahami oleh pengguna. Untuk pemula yang sedang belajar WEB dan CSS ada beberapa sintaks dasar css yang harus kamu ketahui dan pelajari.

Nah, pada artikel ini kita akan belajar mengenai sintaks dasar CSS yang harus kamu ketahui dan kamu pelajari agar kamu bisa mulai menerapkannya dalam proyek web kamu.

Apa Itu CSS dan Fungsinya?

CSS adalah bahasa yang mengatur tampilan dan tata letak dari elemen-elemen pada halaman web. Tanpa CSS, halaman web hanya akan terlihat polos dengan elemen-elemen dasar HTML. CSS memungkinkan kamu untuk mengontrol warna, font, margin, padding, posisi dan berbagai aspek visual lainnya.

Mengapa CSS Penting dalam Pengembangan Web?

CSS memungkinkan pemisahan konten dan gaya pada halaman web. Ini memudahkan proses pengembangan dan pemeliharaan, karena satu perubahan pada file CSS bisa berdampak pada tampilan seluruh halaman yang terhubung. Dengan CSS, desain web menjadi lebih konsisten, fleksibel dan responsif.

Bagaimana CSS Bekerja?

CSS bekerja dengan menerapkan aturan-aturan gaya ke elemen HTML menggunakan sintaks tertentu. Setiap aturan CSS terdiri dari selector, property dan value. Selector menentukan elemen mana yang akan diberi gaya, sementara property dan value mendefinisikan gaya yang diterapkan.

Sintaks Dasar CSS

1. Selector

Selector adalah bagian dari aturan CSS yang menentukan elemen HTML mana yang akan diberi gaya. Contoh selector umum meliputi nama tag HTML, class, dan ID.

Baca juga :   Media Transmisi: Pengertian, Kegunaan dan Jenis-Jenisnya

2. Property dan Value

Setiap property diikuti oleh value yang mengatur gaya tampilan elemen. Misalnya, untuk mengubah warna teks, kamu bisa menggunakan properti color dengan nilai warna yang diinginkan.

Contoh:

p {
  color: blue;
  font-size: 16px;
}

Cara Menggunakan CSS dalam HTML

CSS dapat digunakan dengan berbagai cara namun ada tiga cara utama untuk menambahkan CSS dalam HTML:

1. Inline CSS

Inline CSS digunakan langsung pada elemen HTML dengan atribut style. Metode ini diterapkan jika kamu hanya ingin memberi gaya pada elemen tertentu saja, tanpa memengaruhi elemen lain.

Cara Menggunakan Inline CSS

Inline CSS ditulis di dalam tag HTML yang ingin diberi gaya, menggunakan atribut style, dan mendefinisikan property serta value CSS.

<p style="color: blue; font-size: 18px;">Ini adalah teks dengan warna biru dan ukuran font 18px.</p>

Kelebihan Inline CSS:

  • Cocok untuk gaya yang hanya diaplikasikan pada satu elemen.
  • Tidak memerlukan file CSS terpisah atau tag <style>.

Kekurangan Inline CSS:

  • Kurang efisien jika harus digunakan pada banyak elemen.
  • Sulit dikelola jika ada banyak gaya yang berbeda di satu halaman, karena mengacaukan kode HTML.

2. Internal CSS

Internal CSS ditulis di dalam tag <style> di dalam file HTML. Biasanya, metode ini digunakan untuk mengatur gaya pada satu halaman tertentu saja.

Cara Menggunakan Internal CSS

Internal CSS diletakkan di bagian <head> dokumen HTML di dalam tag <style>. Semua elemen yang memiliki selector sesuai akan mengikuti aturan gaya yang ditetapkan.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Internal CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
            font-family: Arial, sans-serif;
        }
        p {
            color: darkgrey;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah contoh paragraf menggunakan internal CSS.</p>
</body>
</html>

Kelebihan Internal CSS:

  • Memudahkan untuk menerapkan gaya konsisten pada satu halaman HTML.
  • Tidak memerlukan file CSS terpisah, sehingga cocok untuk halaman statis.

Kekurangan Internal CSS:

  • Menambah ukuran file HTML jika terlalu banyak gaya yang ditulis.
  • Gaya hanya berlaku untuk satu halaman, sehingga kurang efisien jika diterapkan pada beberapa halaman.
Baca juga :   Belajar Sistem Pakar: Pengertian, Cara Kerja dan Contoh Sistem Pakar

3. External CSS

External CSS adalah metode yang paling umum digunakan dalam proyek web skala besar. Gaya ditulis dalam file CSS terpisah dan dihubungkan ke file HTML menggunakan tag <link>. Metode ini memungkinkan kamu mengatur tampilan banyak halaman dari satu file CSS.

Cara Menggunakan External CSS

  1. Buat file CSS terpisah, misalnya style.css.
  2. Tulis aturan CSS di dalam file tersebut.
  3. Hubungkan file CSS ke HTML menggunakan tag <link> di dalam bagian <head>.

Contoh File HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh External CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf yang menggunakan external CSS.</p>
</body>
</html>

Contoh File CSS (style.css):

body {
    background-color: #eaeaea;
}

h1 {
    color: navy;
    font-family: Verdana, sans-serif;
}

p {
    color: darkslategray;
    font-size: 14px;
}

Kelebihan External CSS:

  • Memudahkan pengelolaan gaya untuk banyak halaman sekaligus.
  • Memisahkan konten HTML dari gaya, membuat kode lebih rapi dan mudah dibaca.
  • Meningkatkan performa halaman karena file CSS hanya perlu dimuat sekali.

Kekurangan External CSS:

  • Membutuhkan pemeliharaan file CSS terpisah.
  • Mengandalkan koneksi file eksternal, sehingga gaya tidak akan tampil jika file CSS tidak tersedia.

Sintaks CSS yang Sering Digunakan

CSS properties adalah aturan-aturan yang dapat kita gunakan untuk mengubah tampilan elemen HTML pada halaman web. Berikut adalah beberapa properti CSS yang sering digunakan dalam desain web.

1. Color (Warna)

Property color digunakan untuk mengatur warna teks dalam elemen HTML. Kamu bisa menetapkan warna dengan nama warna, nilai heksadesimal, RGB atau HSL.

Contoh:

p {
  color: blue;
}

2. Background (Latar Belakang)

Property background mengatur warna atau gambar latar belakang elemen. Kamu bisa menentukan berbagai aspek latar belakang, seperti warna, gambar, posisi dan pengulangan.

Contoh:

body {
  background-color: #f0f0f0;
}
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

3. Font-Family (Jenis Huruf)

Property font-family mengatur jenis huruf yang digunakan dalam teks elemen. Kamu dapat menetapkan beberapa jenis huruf sebagai fallback jika jenis utama tidak tersedia di perangkat pengguna.

Contoh:

p {
  font-family: Arial, sans-serif;
}

4. Font-Size (Ukuran Font)

Property font-size digunakan untuk mengatur ukuran teks. Ukuran bisa diatur dengan satuan seperti px, em atau rem.

Baca juga :   Deep Web Adalah: Pengertian, Dampak dan Manfaat

Contoh:

h1 {
  font-size: 24px;
}

5. Text-Align (Perataan Teks)

Property text-align menentukan perataan teks dalam elemen. Beberapa nilai umum termasuk left, right, center dan justify.

Contoh:

h2 {
  text-align: center;
}

6. Margin dan Padding

Property margin mengatur jarak luar elemen dari elemen lain, sementara padding mengatur jarak dalam antara isi elemen dan batas elemen (border).

Contoh:

.container {
  margin: 20px;
  padding: 10px;
}

7. Border (Batas Elemen)

Property border menambahkan batas pada elemen. Kamu bisa mengatur lebar, gaya dan warna border.

Contoh:

.box {
  border: 2px solid black;
}

8. Width dan Height

Property width dan height digunakan untuk mengatur lebar dan tinggi elemen. Satuan bisa berupa px, %, atau vw dan vh.

Contoh:

img {
  width: 100px;
  height: auto;
}

9. Display

Property display mengatur cara elemen ditampilkan. Nilai umum meliputi block, inline, flex dan grid.

Contoh:

span {
  display: inline;
}
div {
  display: block;
}

10. Position (Posisi Elemen)

Property position mengontrol posisi elemen dalam halaman. Nilai static, relative, absolute, dan fixed adalah beberapa contoh yang sering digunakan.

Contoh:

.header {
  position: fixed;
  top: 0;
}

12. Opacity (Transparansi)

Property opacity mengatur tingkat transparansi elemen dengan nilai antara 0 (transparan sepenuhnya) hingga 1 (tidak transparan).

Contoh:

.image {
  opacity: 0.8;
}

13. Transition (Transisi)

Property transition memungkinkan kamu menambahkan transisi halus pada perubahan gaya elemen.

Contoh:

.button {
  background-color: blue;
  transition: background-color 0.3s;
}
.button:hover {
  background-color: red;
}

Tips dan Trik CSS untuk Pemula

  1. Gunakan CSS External untuk memudahkan pemeliharaan.
  2. Manfaatkan DevTools di browser untuk melihat perubahan langsung.
  3. Eksperimen dengan berbagai selector untuk memahami fungsinya.
  4. Pelajari CSS Reset untuk konsistensi tampilan di berbagai browser.
  5. Gunakan Flexbox atau Grid untuk tata letak responsif.

Kesimpulan

Pada pembelajaran kita diatas dapat kita simpulkan bahwa Sintaks dasar CSS adalah pondasi penting dalam desain web, memungkinkan kita untuk mengatur gaya dan tata letak elemen HTML dengan lebih fleksibel. Dalam CSS, aturan gaya diterapkan melalui selector, property dan value, yang bersama-sama membantu menentukan elemen mana yang diberi gaya, jenis gaya yang diterapkan dan bagaimana tampilannya.

Ada tiga metode utama untuk menyisipkan CSS pada HTML: inline, internal, dan external. Metode inline cocok untuk gaya satu elemen, internal untuk satu halaman dan external sangat berguna dalam proyek yang lebih besar karena memudahkan pemeliharaan gaya secara konsisten di seluruh halaman.

Penggunaan properti CSS seperti color, background, font-family, margin dan padding adalah dasar dalam mengatur tampilan elemen. Dengan memahami properti ini, kita bisa mengendalikan aspek visual dari halaman web. Untuk pemula, praktik berulang dan penggunaan DevTools akan sangat membantu dalam menguasai CSS serta penerapannya untuk desain yang lebih rapi dan responsif.

Artikel ini merupakan bagian seri artikel BELAJAR CSS dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..