CSS

CSS Pengenalan

CSS adalah bahasa yang digunakan untuk mendesain tampilan halaman web, termasuk warna, tata letak, dan font.

Apa itu CSS?

CSS singkatan dari Cascading Style Sheets
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya
CSS menghemat banyak pekerjaan. Ini bisa mengontrol tata letak beberapa halaman web sekaligus
File CSS eksternal dapat disimpan dalam file .css

Contoh CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: white;
        text-align: center;
      }
      p {
        font-family: verdana;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Ini adalah heading</h1>
    <p>Ini adalah paragraf.</p>
  </body>
</html>

Mengapa Menggunakan CSS?

CSS memisahkan konten dari desain
Gaya dapat diterapkan ke elemen HTML satu kali dan akan berlaku ke seluruh halaman
Memudahkan pemeliharaan dan pengubahan desain tanpa harus mengedit tiap elemen

Tiga Cara Menyisipkan CSS

Inline – menggunakan atribut style dalam elemen HTML
Internal – menggunakan tag <style> di dalam <head>
Eksternal – menggunakan file .css yang terpisah

Contoh CSS Inline

<h1 style="color:blue;">Judul Biru</h1>

Contoh CSS Internal

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

Contoh CSS Eksternal

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

File styles.css:

h1 {
  color: blue;
}

Sintaks CSS

CSS terdiri dari selektor dan blok deklarasi:

h1 {
  color: blue;
  font-size: 12px;
}

h1 adalah selektor
{ color: blue; font-size: 12px; } adalah blok deklarasi
color: blue; adalah deklarasi properti
font-size: 12px; adalah deklarasi lainnya

Selektor CSS

Selektor Elemen (h1, p, div, dll.)
Selektor ID (#header)
Selektor Kelas (.judul)

HTML YouTube

Pelajari cara menyematkan video dari YouTube ke halaman HTML menggunakan iframe.

CSS Sintaks

CSS terdiri dari aturan gaya yang digunakan untuk mendesain elemen HTML.