Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Cara Menambahkan CSS


Ketika browser membaca style sheet, maka akan memformat dokumen HTML sesuai dengan informasi di style sheet.


Tiga Cara Menyisipkan CSS

Ada tiga cara untuk menyisipkan style sheet:

  • CSS eksternal
  • CSS internal
  • CSS sebaris

CSS eksternal

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Setiap halaman HTML harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link>, di dalam bagian head.

Contoh

Gaya eksternal didefinisikan dalam elemen <link>, di dalam bagian <head> halaman HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Lembar gaya eksternal dapat ditulis dalam editor teks apa pun, dan harus disimpan dengan ekstensi .css.

File .css eksternal tidak boleh berisi tag HTML apa pun.

Berikut adalah tampilan file "mystyle.css":

"gayaku.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Catatan: Jangan tambahkan spasi antara nilai properti dan unit:
Salah (spasi): margin-left: 20 px;
Benar (tanpa spasi):margin-left: 20px;



CSS internal

Lembar gaya internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.

Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian kepala.

Contoh

Gaya internal didefinisikan dalam elemen <style>, di dalam bagian <head> halaman HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS sebaris

Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk satu elemen.

Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.

Contoh

Gaya sebaris didefinisikan dalam atribut "gaya" dari elemen yang relevan:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Tip: Gaya sebaris kehilangan banyak keuntungan dari lembar gaya (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan hemat.


Beberapa Lembar Gaya

Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di lembar gaya yang berbeda, nilai dari lembar gaya yang terakhir dibaca akan digunakan. 

Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen <h1>:

h1 {
  color: navy;
}

Kemudian, asumsikan bahwa lembar gaya internal juga memiliki gaya berikut untuk elemen <h1>:

h1 {
  color: orange;   
}

Contoh

Jika gaya internal ditentukan setelah tautan ke lembar gaya eksternal, elemen <h1> akan menjadi "oranye":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Contoh

Namun, jika gaya internal ditentukan sebelum tautan ke lembar gaya eksternal, elemen <h1> akan menjadi "navy": 

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Urutan bertingkat

Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Semua gaya dalam sebuah halaman akan "mengalir" ke dalam lembar gaya "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:

  1. Gaya sebaris (di dalam elemen HTML)
  2. Lembar gaya eksternal dan internal (di bagian kepala)
  3. Peramban bawaan

Jadi, gaya sebaris memiliki prioritas tertinggi, dan akan menggantikan gaya eksternal dan internal serta default browser.

Pernah mendengar tentang W3Schools Spaces ? Di sini Anda dapat membuat situs web Anda sendiri, atau menyimpan cuplikan kode untuk digunakan nanti, secara gratis.

Mulai gratis

* tidak perlu kartu kredit


Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan lembar gaya eksternal dengan URL: "mystyle.css".

<head>

</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>