Styling HTML dengan CSS

CSS adalah singkatan dari Cascading Style Sheets.

CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya.

CSS menghemat banyak pekerjaan. Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:

Inline - dengan menggunakan atribut style pada elemen HTML
Internal - dengan menggunakan elemen <style> dalam <head>
Eksternal - dengan menggunakan file CSS eksternal

Cara yang paling umum untuk menambahkan CSS, adalah untuk menjaga style di file CSS secara terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena akan lebih mudah untuk didemonstrasikan, dan lebih mudah untuk kita coba sendiri.

Tips: Pelajari lebih banyak tentang CSS di bagian Tutorial CSS.

CSS Inline

Sebuah CSS inline digunakan untuk menerapkan gaya yang unik pada elemen HTML tunggal.

Sebuah CSS inline menggunakan atribut style pada elemen HTML.

Contoh berikut mengatur warna teks dari elemen <h1> menjadi biru:

Contoh


<h1 style="color:blue;">Ini adalah Heading Biru</h1>

CSS internal

Sebuah CSS internal digunakan untuk menentukan style untuk sebuah halaman HTML.

Sebuah CSS internal didefinisikan pada bagian <head> di halaman HTML, dengan sebuah elemen <style>:

Contoh


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Ini Heading</h1>
<p>Ini paragraf.</p>

</body>
</html>

CSS eksternal

Sebuah style sheet eksternal digunakan untuk mendefinisikan style pada banyak halaman HTML.

Dengan style sheet eksternal, Kita dapat mengubah tampilan style seluruh halaman web, dengan hanya mengubah satu file.

Untuk menggunakan style sheet eksternal, tambahkan sebuah elemen link ke dalam <head> dari halaman HTML:

Contoh


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

<h1>Ini heading</h1>
<p>Ini paragraph.</p>

</body>
</html>

Style sheet eksternal dapat ditulis dalam editor teks apapun. file tidak boleh berisi kode HTML, dan harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana "styles.css" terlihat:


body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Font CSS

Properti color pada CSS mendefinisikan warna teks yang akan digunakan.

Properti font-family pada CSS mendefinisikan font yang akan digunakan.

Proerti font-size pada CSS mendefinisikan ukuran teks yang akan digunakan.

Contoh


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>Ini heading</h1>
<p>ini paragraf.</p>

</body>
</html>

Border CSS

Properti border pada CSS mendefinisikan border (batas tepi) di sekitar elemen HTML:
Contoh


p {
    border: 1px solid powderblue;
}

Padding CSS

Properti padding pada CSS mendefinisikan padding (ruang) antara teks dan border:

Contoh


p {
    border: 1px solid powderblue;
    padding: 30px;
}

Margin CSS

Properti margin pada CSS mendefinisikan margin (ruang) di luar border:
Contoh


p {
    border: 1px solid powderblue;
    margin: 50px;
}

Atribut id

Untuk menentukan sebuah style spesifik pada satu elemen khusus, tambahkan atribut id ke dalam elemen:


<p id="p01">Saya berbeda</p>

kemudian tentukan style untuk elemen dengan id spesifik:
Contoh


#p01 {
    color: blue;
}

Catatan: id dari elemen harus unik dalam suatu halaman, sehingga selector id digunakan untuk memilih salah satu elemen yang unik

Atribut class

Untuk menentukan style untuk jenis tertentu pada elemen, tambahkan atribut class ke dalam elemen:


<p class="error">I am different</p>

Kemudian tentukan style untuk elemen - elemen yang memiliki class spesifik:

Contoh


p.error {
    color: red;
}

Referensi eksternal

style sheet eksternal dapat dirujuk dengan URL penuh atau dengan path relatif terhadap halaman web saat ini.

Contoh ini menggunakan URL lengkap untuk link ke sebuah style sheet:
Contoh


<link rel="stylesheet" href="https://www.urlpurwana.net/html/styles.css">

Contoh berikut memperlihatkan link ke style sheet yang terletak di folder html pada alamat web saat ini:
Contoh


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

Contoh berikut memperlihatkan link ke style sheet yang terletak di folder yang sama dengan halaman web saat ini:
Contoh


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

Baca lebih lanjut tentang path file di bagian Path (Jalur) File HTML.

Ringkasan Tentang Style CSS HTML

Gunakan atribut style HTML untuk styling inline
Gunakan elemen HTML <style> untuk mendefinisikan CSS internal
Gunakan elemen HTML <link> untuk merujuk ke file CSS eksternal
Gunakan elemen HTML <head> untuk menyimpan elemen <style> dan <link>
Gunakan properti color pada CSS untuk warna teks
Gunakan properti font-family pada CSS untuk font teks
Gunakan properti font-size pada CSS untuk ukuran teks
Gunakan properti border pada CSS untuk batas tepi
Gunakan properti padding pada CSS untuk memberi ruang di dalam border
Gunakan properti margin pada CSS untuk memberi ruang luar border

Tag Style HTML

Tag	Deskripsi
<style>	Mendefinisikan informasi style untuk sebuah dokumen HTML
<link>	Mendefinisikan link antara sebuah dokumen dan sumber external

CSS = Gaya dan Warna

Manipulasi Teks

Warna, Box

Post Top Ad

Minggu, 01 Januari 2017

Style CSS HTML