HTML

CSS di HTML: Cara membuat dan Contoh Sintaknya

CSS adalah singkatan dari Cascading Style Sheets.

CSS dapat mengontrol tata letak beberapa halaman web sekaligus dan meringankan pekerjaan kita.

Apa itu CSS?

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

Dengan CSS, kita bisa mengontrol warna, font, ukuran teks, jarak antar elemen, posisi dan tata elemen, gambar latar belakang atau warna latar yang akan digunakan, tampilan berbeda untuk perangkat dan ukuran layar yang berbeda, dan lebih masih banyak lagi.

Tips: Kata cascading berarti gaya yang diterapkan ke elemen induk juga akan diterapkan ke semua elemen turunan dalam induk. Jadi, jika kita menyetel warna teks isi menjadi “biru”, semua judul, paragraf, dan elemen teks lain di dalam badan juga akan mendapatkan warna yang sama (kecuali kita akan menentukan yang lain)!

Menggunakan CSS

CSS bisa ditambahkan ke dokumen HTML dengan 3 cara, sebagai berikut:

  • Inline – Menggunakan atribut style di dalem elemen HTML.
  • Internal – Menggunakan elemen <style> dibagian <head> .
  • External – Menggunakan elemen <link> untuk ditautkan ke file CSS eksternal.

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

Inline CSS

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

Inline CSS menggunakan atribut style dari elemen HTML.

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

Contoh :

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

<p style="color:red;">Paragraf</p>

Internal CSS

Internal CSS digunakan untuk menentukan gaya untuk satu halaman HTML.

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

Contoh berikut menyetel SEMUA warna teks di dalam elemen <h1> (pada halaman itu) menjadi biru, dan SEMUA warna teks <p> elemen 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 heading</h1>
<p>Ini Paragraf.</p>

</body>
</html>

Eksternal CSS

Eksternal CSS digunakan untuk menentukan gaya untuk banyak halaman HTML.

Untuk menggunakan eksternal CSS, pada setiap halaman HTML tambahkan link di bagian <head>:

Contoh :

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

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

</body>
</html>

Eksternal CSS 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”:

“styles.css”

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

Warna, Font, dan Ukuran CSS

Di sini, kita akan mendemonstrasikan beberapa properti CSS yang umum digunakan.

Properti warna CSS menentukan warna teks yang akan digunakan.

Properti CSS font-family mendefinisikan font yang akan digunakan.

Properti CSS font-size menentukan ukuran teks yang akan digunakan.

Contoh penggunaan properti warna CSS, font-family dan 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>Ini heading</h1>
<p>Ini Paragraf.</p>

</body>
</html>

Border CSS

Properti border di CSS mendefinisikan garis tepi di sekitar elemen HTML.

Tip: kita bisa menentukan batas untuk hampir semua elemen HTML.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

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


</body>
</html>

Padding CSS

Properti padding di CSS mendefinisikan padding (spasi) antara teks dan garis tepi(border).

Contoh Penggunaan CSS border dan properti padding:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

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

</body>
</html>

Margin CSS

Properti margin di CSS mendefinisikan margin (spasi) di luar garis tepi(border).

Contoh Penggunaan properti border dan margin CSS: :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

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

</body>
</html>

Tautan ke Eksternal CSS

Eksternal CSS dapat direferensikan dengan URL lengkap atau dengan jalur yang berhubungan dengan halaman web.

Contoh ini menggunakan URL lengkap untuk ditautkan ke halaman eksternal CSS:

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

Contoh ini menautkan ke file style yang terletak di dalam folder html di situs browser:

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

Contoh ini menautkan ke file style yang terletak di dalam folder yang sama dengan halaman tersebut :

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

Ringkasan

  • Gunakan atribut style untuk CSS Inline
  • Gunakan elemen <style> untuk menentukan CSS Internal
  • Gunakan elemen <link> HTML untuk merujuk ke file CSS eksternal
  • Gunakan elemen <head> HTML untuk menyimpan elemen <style> dan <link>
  • Gunakan properti CSS color untuk warna teks
  • Gunakan properti CSS font-family untuk font teks
  • Gunakan properti CSS font-size untuk ukuran teks
  • Gunakan properti CSS border untuk sisi tepi
  • Gunakan properti CSS padding untuk ruang di dalam sisi tepi
  • Gunakan properti CSS margin untuk ruang di luar siis tepi


Hanifah Nurbaeti

Share
Tags: CSShtmlhtml dan css