Cara menggunakan css data attribute

Question

Pada tutorial sebelumnya, kita sudah berkenalan dengan CSS. Berikutnya, kita akan belajar gimana cara menulis CSS di HTML.

Table of Contents Show

1. Internal CSS
2. Eksternal CSS
Eksternal CSS di dalam Folder
Eksternal CSS dari Internet (CDN)
3. Inline CSS
Apa Selanjutnya?
Apa itu atribut dalam CSS?
Apa itu CSS selector dan contohnya?
Selector Css apa saja?
Apa fungsi dari ID Selector CSS?

Ada tiga cara menulis CSS di HTML:

Internal CSS –> ditulis di dalam tag
```
p { color: red }
```
5;
Inline CSS –> ditulis di atribut elemen HTML;
External CSS –> ditulis di file CSS terpisah dengan HTML.

Gimana contoh dan caranya?

Mari kita bahas!

1. Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag

p { color: red }

5. Intarnal CSS juga dikenal dengan sebutan Embeded CSS.

Tag

p { color: red }

5 bisa ditulis di dalam tag

p { color: red }

8, bisa juga ditulis di dalam tag

p { color: red }

9. Namun kebanyakan orang menulisnya di dalam

p { color: red }

8.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya:

Iframe embed of //codepen.io/ardianta/embed/eNrXGW/?height=265&theme-id=dark&default-tab=result&embed-version=2

Penulisan css di dalam tag

p { color: red }

8 akan lebih dahulu dibaca dibandingkan di

p { color: red }

9. Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir.

Misalnya kita punya style seperti ini di dalam

p { color: red }

8:

p { color: red }

Lalu di body kita buat lagi seperti ini:

p { color: blue }

Maka yang akan dipakai adalah yang terakhir, yakni yang

p { color: blue }

4.

Karena itu, biar konsisten dan tidak bentrok.. sebaiknya tulis CSS hanya dalam satu tempat saja. Misal di

p { color: red }

8 saja.

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi

p { color: blue }

6.

Contoh:

Kita akan membuat sebuah file bernama

p { color: blue }

7 yang di dalamnya berisi kode CSS.

Berikut ini isinya:

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML.

Ada dua cara yang bisa kita lakukan:

Menggunakan tag
```
p { color: blue }
```
8
Menggunakan
```
p { color: blue }
```
9

Contoh:

Cara 1: menggunakan tag

p { color: blue }

8

<link rel="stylesheet" type="text/css" href="style-ku.css">

Cara 2: menggunakan

p { color: blue }

9

<style type="text/css">
@import "style-ku.css";
</style>

Jika kita menggunakan Cara 1, maka kode lengkap HTMLnya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya:

Iframe embed of //codepen.io/ardianta/embed/eNrXGW/?height=265&theme-id=dark&default-tab=result&embed-version=2

CSS eksternal biasanya digunakan saat kita ingin menggunakan kembali style yang sudah dibuat.

Misalnya ada lima halaman HTML, dan semua halaman ini membuatuhkan CSS yang sama. Maka sebaiknya kita menggunakan eksternal CSS agar tidak menulis ulang kode CSS di setiap file HTML.

Eksternal CSS di dalam Folder

Jika file eksternal CSS berada di dalam folder yang berbeda, maka kita bisa tulis alamat path-nya di tag

p { color: blue }

8.

Contoh:

Misalnya kita punya struktur folder project seperti ini.

File

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

3 akan kita pakai di

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

4, tapi dia berada di dalam folder

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

5.

Maka kita bisa tuliskan seperti ini:

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

Namun, sekarang gimana kalau file HTML-nya berada di folder yang berbeda.

Misalnya strukturnya seperti ini:

Gimana cara pakai

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

3 di

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

7?

Gampang.

Kita hanya perlu naik satu level dengan

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

8 kemudian menuliskan

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

9 setelahnya.

Contoh:

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

Jika file HTML-nya berada di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi.. 😄 gimana tuh?

Ya tinggal naik beberapa level, misalnya dia berada di dalam folder level ke 3, maka nainya 3 level seperti ini:

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

Perhatikan

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

8 artinya naik satu level, karena ada tiga

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

8 maka kita naik 3 level.

Bingung?

Tenang, tidak perlu khawatir.

Jika kamu paham sistem path di Linux, maka kamu akan mudah memahami ini.

Oh iya, selain cara ini, kita bisa juga menggunakan

<link rel="stylesheet" type="text/css" href="style-ku.css">

2 untuk mewakili root folder dari project atau nama domain.

Contoh:

p { color: red }

0

Ini akan membuatnya konsisten, karena

<link rel="stylesheet" type="text/css" href="style-ku.css">

2 nantinya akan mewakili nama domain.

Jadi dimana pun kita akan menggunakan file CSS-nya tidak perlu ribet naik level.

Eksternal CSS dari Internet (CDN)

Selain menggunakan eksternal CSS yang ada di satu folder dengan project, kita juga bisa gunakan CSS yang sudah ada di internet atau domain lain.

Contoh:

Misalnya file CSS-nya berada di:

p { color: red }

1

Maka kita bisa menggunakannya di HTML seperti ini:

p { color: red }

2

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut

<link rel="stylesheet" type="text/css" href="style-ku.css">

4 di elemen HTML.

Kode CSS ditulis langsung tanpa menggunakan kurung kurawal

<link rel="stylesheet" type="text/css" href="style-ku.css">

5. Kemudian properti tetap dipisah dengan titik koma.

Contoh:

p { color: red }

3

Contoh lengkap:

p { color: red }

4

Hasilnya:

Iframe embed of //codepen.io/ardianta/embed/NqMmjj/?height=265&theme-id=dark&default-tab=result&embed-version=2

Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal.

Akan tetapi, Inline CSS jarang digunakan pada proyek-proyek besar, karena cukup menyulitkan mengelola kode jika sudah teralau banyak menggunakan inline.

Gunakanlah seperlunya dan seadanya. Jangan terlalu banyak, biar kodemu lebih rapi.

Apa Selanjutnya?

Kita sudah belajar cara menulis CSS di HTML. Ada tiga cara yang digunakan, yakni Internal CSS, Eksternal CSS, dan Inline CSS.

Apa itu atribut dalam CSS?

Pengertian Attribute Selector CSS Attribute Selector atau Atribut Selector adalah selector CSS yang digunakan untuk 'mencari' elemen HTML dengan menggunakan nilai attribut dari tag HTML. Jika kalian akan menggunakan attribute selector, kalian dapat menulisnya di dalam tanda kurung siku. Contohnya : a[target].

Apa itu CSS selector dan contohnya?

Pada CSS, selector digunakan untuk memilih elemen mana dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila kita ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector.

Selector Css apa saja?

Dalam CSS terdapat 5 macam selector dasar yang wajib kita ketahui, yaitu:.

Universal Selector..

Tag Selector..

Id Selector..

Class Selector..

Atribut Selector..

Apa fungsi dari ID Selector CSS?

ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue} .

kode css