Gaya HTML - CSS


CSS adalah singkatan dari Cascading Style Sheets.

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


CSS = Gaya dan Warna

Memanipulasi Teks
Warna,  Kotak


Apa itu CSS?

Cascading Style Sheets (CSS) digunakan untuk memformat tata letak halaman web.

Dengan CSS, Anda dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen diposisikan dan ditata, gambar latar belakang atau warna latar apa yang akan digunakan, tampilan berbeda untuk perangkat dan ukuran layar yang berbeda, dan lebih banyak!

Tip: Kata cascading berarti bahwa gaya yang diterapkan ke elemen induk juga akan diterapkan ke semua elemen turunan di dalam induk. Jadi, jika Anda mengatur warna teks isi ke "biru", semua judul, paragraf, dan elemen teks lain di dalam badan juga akan mendapatkan warna yang sama (kecuali jika Anda menentukan yang lain)!


Menggunakan CSS

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara:

  • Inline - dengan menggunakan styleatribut di dalam elemen HTML
  • Internal - dengan menggunakan <style>elemen di <head>bagian
  • Eksternal - dengan menggunakan <link> elemen untuk menautkan ke file CSS eksternal

Cara paling umum untuk menambahkan CSS, adalah dengan menyimpan gaya di file CSS eksternal. Namun, dalam tutorial ini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk didemonstrasikan, dan lebih mudah bagi Anda untuk mencobanya sendiri.


CSS sebaris

CSS sebaris digunakan untuk menerapkan gaya unik ke satu elemen HTML.

CSS sebaris menggunakan styleatribut elemen HTML.

Contoh berikut menyetel warna teks <h1>elemen menjadi biru, dan warna teks <p>elemen menjadi merah:

Contoh

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


CSS internal

CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML.

CSS internal didefinisikan di <head>bagian halaman HTML, di dalam <style>elemen.

Contoh berikut menyetel warna teks SEMUA <h1>elemen (pada halaman itu) menjadi biru, dan warna teks SEMUA <p>elemen menjadi merah. Selain itu, halaman akan ditampilkan dengan warna latar belakang "biru bubuk": 

Contoh

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

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

</body>
</html>

CSS eksternal

Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.

Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke dalamnya di <head>bagian setiap halaman HTML:

Contoh

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.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. File tidak boleh berisi kode HTML apa pun, dan harus disimpan dengan ekstensi .css.

Berikut adalah tampilan file "styles.css":

"styles.css":

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

Tips: Dengan lembar gaya eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!


Warna, Font, dan Ukuran CSS

Di sini, kami akan mendemonstrasikan beberapa properti CSS yang umum digunakan. Anda akan belajar lebih banyak tentang mereka nanti.

Properti CSS colormendefinisikan warna teks yang akan digunakan.

Properti CSS font-familymendefinisikan font yang akan digunakan.

Properti CSS font-sizemendefinisikan ukuran teks yang akan digunakan.

Contoh

Penggunaan warna CSS, font-family dan properti font-size:

<!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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Perbatasan CSS

Properti CSS bordermendefinisikan batas di sekitar elemen HTML.

Tip: Anda dapat menentukan batas untuk hampir semua elemen HTML.

Contoh

Penggunaan properti perbatasan CSS: 

p {
  border: 2px solid powderblue;
}

Lapisan CSS

Properti CSS paddingmendefinisikan padding (spasi) antara teks dan perbatasan.

Contoh

Penggunaan perbatasan CSS dan properti padding:

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

Batas CSS

Properti CSS marginmendefinisikan margin (spasi) di luar perbatasan.

Contoh

Penggunaan perbatasan CSS dan properti margin:

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

Tautan ke CSS Eksternal

Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini.

Contoh

Contoh ini menggunakan URL lengkap untuk menautkan ke lembar gaya:

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

Contoh

Contoh ini menautkan ke lembar gaya yang terletak di folder html di situs web saat ini: 

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

Contoh

Contoh ini menautkan ke lembar gaya yang terletak di folder yang sama dengan halaman saat ini:

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

Anda dapat membaca lebih lanjut tentang jalur file di bab Jalur File HTML .


Ringkasan Bab

  • Gunakan styleatribut HTML untuk penataan sebaris
  • Gunakan elemen HTML <style>untuk mendefinisikan CSS internal
  • Gunakan <link>elemen HTML untuk merujuk ke file CSS eksternal
  • Gunakan <head>elemen HTML untuk menyimpan elemen <style> dan <link>
  • Gunakan properti CSS coloruntuk warna teks
  • Gunakan font-familyproperti CSS untuk font teks
  • Gunakan properti CSS font-sizeuntuk ukuran teks
  • Gunakan borderproperti CSS untuk perbatasan
  • Gunakan paddingproperti CSS untuk ruang di dalam perbatasan
  • Gunakan marginproperti CSS untuk ruang di luar perbatasan

Tip: Anda dapat mempelajari lebih lanjut tentang CSS di Tutorial CSS kami .


Latihan HTML

Uji Diri Anda Dengan Latihan

Olahraga:

Gunakan CSS untuk mengatur warna latar belakang dokumen (tubuh) menjadi kuning.

<!DOCTYPE html>
<html>
<head>
<style>

  :kuning;

</style>
</head>
<body>

<h1>Halaman Beranda Saya</h1>

</body>
</html>


Tag Gaya HTML

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource

Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .