CSS HTML


CSS adalah singkatan dari Cascading Style Sheets.

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


Apa itu CSS?

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

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

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


Menggunakan CSS

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara:

  • Inline - dengan menggunakan atribut style di dalam elemen HTML
  • Internal - dengan menggunakan elemen <style> di bagian <head>
  • External - dengan menggunakan elemen <link> untuk ditautkan ke file CSS eksternal

Cara paling umum untuk menambahkan CSS, adalah mempertahankan style dalam file CSS eksternal. Namun, dalam tutorial ini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk didemonstrasikan, dan lebih mudah untuk dicoba sendiri.


Inline CSS

Inline CSS digunakan untuk menerapkan style unik ke satu elemen HTML.

Inline CSS menggunakan atribut style dari elemen HTML.

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

<h1 style="color:blue;">Heading Biru</h1>
<p style="color:red;">Paragraf merah.</p>

Internal CSS

Internal CSS digunakan untuk menentukan style untuk satu halaman HTML.

Internal CSS ditentukan di bagian <head> halaman HTML, dalam elemen <style>.

Contoh berikut mengatur warna teks semua elemen <h1> (pada halaman itu) menjadi biru, dan warna teks semua elemen <p> menjadi merah. Selain itu, halaman akan ditampilkan dengan warna latar belakang "powderblue".


Contoh

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

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

</body>
</html>

External CSS

External CSS digunakan untuk menentukan style untuk banyak halaman HTML.

Untuk menggunakan external CSS, tambahkan link ke dalamnya di bagian <head> pada setiap halaman HTML.


Contoh

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

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

</body>
</html>

Style sheet eksternal dapat ditulis di editor teks manapun. File tidak boleh berisi kode HTML apa pun, dan harus disimpan dengan ekstensi .css

Berikut adalah tampilan file "styles.css":

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

Tips: Dengan CSS eksternal, Anda bisa mengubah tampilan seluruh situs web, dengan mengubah satu file.


Warna, Font, dan Ukuran CSS

Di sini, akan mendemonstrasikan beberapa properti CSS yang umum digunakan. Anda akan mempelajari lebih lanjut tentang mereka nanti.

  • Properti color CSS menentukan warna teks yang akan digunakan.
  • Properti font-family CSS mendefinisikan font yang akan digunakan.
  • Properti font-size CSS menentukan 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 adalah heading</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>

Border CSS

Properti border CSS mendefinisikan batas di sekitar elemen HTML.

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


Contoh

p {
  border: 2px solid powderblue;
}

Padding CSS

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


Contoh

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

Margin CSS

Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan.


Contoh

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

Link(Tautan) ke CSS Eksternal

Style sheet eksternal dapat direferensikan dengan URL lengkap atau dengan jalur yang berhubungan dengan halaman web saat ini.


Contoh

1. Menggunakan URL lengkap untuk ditautkan ke style sheet:

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

2. Menautkan ke style sheet yang terletak di folder html di situs web saat ini: 

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

3. Menautkan ke style sheet yang terletak di folder yang sama dengan halaman saat ini: 

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

Ringkasan

  • Gunakan atribut style HTML untuk gaya inline
  • Gunakan elemen <style> HTMLuntuk menentukan CSS internal
  • Gunakan elemen <link> HTMLuntuk merujuk ke file CSS eksternal
  • Gunakan elemen <head> HTML untuk menyimpan elemen <style> dan <link&gt;
  • Gunakan properti color CSS untuk warna teks
  • Gunakan properti font-family CSS untuk font teks
  • Gunakan properti font-size CSS untuk ukuran teks
  • Gunakan properti border CSS untuk batas
  • Gunakan properti padding CSS untuk ruang di dalam batas
  • Gunakan properti margin CSS untuk ruang di luar batas

Sumber referensi: w3schools

Komentar

Posting Komentar