Cara menggunakan styling css apa saja?

Question

Pada pertemuan-pertemuan sebelumnya kita telah membahas berbagai macam tag pada HTML, baik yang berhubungan dengan teks, paragraf, gambar, link, list hingga tabel.

Table of Contents Show

Apa itu CSS?
Memasukkan CSS pada HTML
1. Menggunakan CSS Inline
2. Menggunakan CSS Internal
3. Menggunakan CSS Eksternal
Kapan Menggunakan CSS inline, internal, dan eksternal?
Kode Program Lengkap
Styling CSS apa saja?
Apa saja yang dikendalikan oleh CSS?
Berapa metode penggunaan CSS dalam pembuatan website?
Tuliskan metode apa saja yang bisa digunakan dalam menerapkan CSS pada HTML?

Akan tetapi kebanyakan dari elemen atau tag-tag tersebut ditampilkan apa adanya secara default, tanpa adanya sentuhan dari CSS.

Nah, pada pertemuan kali ini kita akan membahas secara singkat tentang cara menambahkan CSS pada dokumen HTML.

Apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheet, yaitu sebuah susunan kode yang kita gunakan untuk mengatur bagaimana dokumen HTML akan ditampilkan. Yang dimaksud mengatur di sini adalah: mengganti warna, tata letak, border, bayangan, posisi, background, dan lain sebagainya.

Faktanya, semua halaman web pada era ini hampir pasti menggunakan CSS. Sehingga semua situs yang kita jelajahi di internet (termasuk jago ngoding sendiri) adalah contoh penggunaan CSS.

Memasukkan CSS pada HTML

Untuk memasukkan CSS kepada HTML terdapat 3 cara:

Menggunakan CSS inline.
Menggunakan CSS internal.
dan Menggunakan CSS eksternal.

Kalau mau ditambahkan lagi: kita juga bisa mengatur CSS suatu element HTML dengan javascript, umumnya cara ini hanya digunakan pada komponen-komponen yang kompleks misalnya seperti komponen grafik.

1. Menggunakan CSS Inline

Cara pertama dan paling singkat adalah menggunakan CSS Inline.

CSS inline adalah sebuah kode CSS yang kita sematkan pada element apa pun di dalam body HTML, langsung menggunakan

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

1.

Misalkan kita punya dua button yang awalnya seperti ini:

<button>Masuk</button>
<button>Daftar</button>

Masuk Daftar

Kita bisa mengubah gaya dari dua tombol di atas dengan menambahkan atribut

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

1 secara langsung seperti ini:

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

Masuk Daftar

Nah, cara di atas dinamakan CSS inline, karena kita langsung menyisipkan CSS pada baris itu juga.

2. Menggunakan CSS Internal

Cara yang kedua adalah menggunakan CSS internal. CSS internal adalah CSS yang diletakkan pada bagian

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

3 suatu halaman HTML.

Misalkan kita memiliki dua buah link seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Dengan hasil keluaran:

Kita bisa tambahkan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

4 di bagian

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

3 seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sehingga hasil keluaran dua tombol di atas menjadi lebih berwarna dan enak dilihat:

Insyaallah kedepannya kita akan membahas CSS lebih detil dalam seri tutorial tersendiri.

3. Menggunakan CSS Eksternal

Dan cara ketiga untuk menambahkan CSS kedalam sebuah halaman HTML adalah menggunakan CSS Eksternal.

Yang dimaksud eksternal adalah kita membuat file tersendiri yang berekstensi

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

6. Kemudian file tersebut kita hubungkan ke dalam halaman HTML menggunakan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

7.

Misalkan kita memiliki struktur direktori seperti berikut:

├── index.html
└── style
    └── app.css

Jadi kita memiliki dua buah file:

Yang pertama

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

8

dan yang kedua adalah

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

9

Kita bisa menambahkan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

7 pada bagian

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

3 yang mengarah kepada file

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

9 seperti berikut:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Eksternal</title>

  <link rel="stylesheet" href="./style/app.css">
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sedangkan isi dari file

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

9 adalah sebagai berikut:

a {
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

a:first-of-type {
  background-color: #1fc296;
}

a:last-of-type {
  background-color: #d45a5a;
}

Catatan: Pada penggunaan CSS eksternal kita tidak perlu menggunakan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

4.

Hasil keluaran dari kode di atas adalah:

Catatan: tanda

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

5 pada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

6 (href tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

7) menandakan direktori yang sama dengan file

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

8. Misalkan file css berada pada “parent” directory, maka kita menggunakan dua buah titik (

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

9) sebagai pengganti.

Misal kita memiliki struktur file seperti ini:

├── blog
│   ├── linux
│   │   └── tutorial-ubuntu.html
│   └── tutorial-python.html
├── index.html
└── style
    └── app.css

Kita memiliki 3 buah file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

0 dan satu buah file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

1. Maka link yang mengarah ke file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

1 tersebut akan berbeda-beda (relatif terhadap lokasi file yang memanggilnya).

Link pada file

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

8 akan terlihat seperti kode di bawah:

<link rel="stylesheet" href="./app/style.css">

Sedangkan link pada file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

4 seperti ini:

<link rel="stylesheet" href="../app/style.css">

Dan yang terakhir, link pada file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

5 akan terlihat seperti berikut:

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

0

Link url seperti di atas dinamakan relative uri.

Kapan Menggunakan CSS inline, internal, dan eksternal?

Secara ideal di dalam real project, kita harus selalu menggunakan CSS eksternal.

Kenapa?

Agar susunan file di dalam project kita menjadi lebih rapi. Dan juga: agar kita bisa menggunakan satu file CSS yang sama untuk lebih dari satu halaman HTML.

Akan tetapi, ada kalanya kita lebih memilih penggunaan CSS internal mau pun inline. Seperti misalnya ketika kita hanya butuh sedikit CSS pada element tertentu saja, atau hanya pada halaman tertentu saja, maka kita bisa menggunakan CSS internal mau pun CSS inline.

Kesimpulan

HTML adalah kode markup yang digunakan untuk mendefinisikan struktur halaman web. Sedangkan CSS, ia merupakan pelengkap bagi HTML di mana tugasnya adalah memberikan “gaya” atau style kepada halaman HTML agar terlihat lebih bagus dan ramah pengguna.

Untuk menambahkan CSS pada suatu halaman HTML, kita bisa menggunakan 3 buah cara yaitu; inline, internal, dan eksternal.

CSS inline artinya kita menyisipkan CSS secara langsung pada suatu elemen HTML menggunakan atribut

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

1.

Sedangkan CSS internal artinya kita menyisipkan CSS pada bagian

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

3 menggunakan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

4.

Dan yang terakhir CSS eksternal adalah kita membuat satu file khusus dengan ekstensi

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

6, kemudian memasukkannya ke dalam dokumen HTML menggunakan tag

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

7.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Styling CSS apa saja?

3 Macam Style CSS Terdapat tiga macam style CSS, yaitu Inline CSS, External CSS, dan Internal CSS. Berikut adalah penjelasan lengkapnya!

Apa saja yang dikendalikan oleh CSS?

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.

Berapa metode penggunaan CSS dalam pembuatan website?

Ada tiga cara menulis CSS di HTML: Internal CSS –> ditulis di dalam tag <style> ; Inline CSS –> ditulis di atribut elemen HTML; External CSS –> ditulis di file CSS terpisah dengan HTML.