-->
› ›
[Belajar HTML #13] Styling HTML dengan CSS

[Belajar HTML #13] Styling HTML dengan CSS

By October 18, 2019 0 Komen

CSS = Gaya dan Warna

Memanipulasi Teks
Warna,  Kotak

Styling HTML Dengan CSS

CSS adalah singkatan dari C ascading S tyle S heets.

CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain.

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

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:

  • Inline - dengan menggunakan atribut style dalam elemen HTML
  • Internal - dengan menggunakan <style> elemen di <head> bagian tersebutEksternal - dengan menggunakan file CSS eksternal

Cara paling umum untuk menambahkan CSS, adalah untuk menjaga gaya dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk ditunjukkan, dan lebih mudah bagi Anda untuk mencobanya sendiri.

Catatan: Anda dapat belajar lebih banyak tentang CSS di Tutorial CSS kami.



Inline CSS / CSS Sebaris

CSS sebaris digunakan untuk menerapkan gaya unik ke elemen HTML tunggal. CSS sebaris menggunakan atribut gaya elemen HTML. Contoh ini mengatur warna teks <h1> elemen menjadi biru:

Contoh:

<h1 style="color:blue;">Ini Adalah Heading Biru</h1>
Cobalah sendiri


CSS internal

CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML. CSS internal didefinisikan di bagian <head> halaman HTML, di dalam elemen <style>:

Contoh:

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

<div>
<h1>Ini Heading</h1>
<p>Ini Paragraf</p>
</div>

</body>
</html>
Cobalah sendiri


CSS Eksternal

Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file! Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di bagian <head> halaman HTML:

Contoh:

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

<h1>Ini Heading</h1>
<p>Ini Paragraf</p>

</body>
</html>

Lembar gaya eksternal dapat ditulis dalam editor teks apa pun. File tidak boleh mengandung kode HTML apa pun, dan harus disimpan dengan ekstensi .css.

Beginilah tampilan "styles.css":

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

Contoh Jadi:

Ini Heading

Ini Paragraf



Font CSS

color Properti CSS mendefinisikan warna teks yang akan digunakan.

font-family Properti CSS mendefinisikan font yang akan digunakan.

font-size Properti 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 Heading</h1>
<p>Ini Paragraf</p>

</body>
</html>
Cobalah sendiri


Border / Batas CSS

Properti CSS border mendefinisikan batas di sekitar elemen HTML:

Contoh:

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

<h1>Ini Adalah Heading</h1>

<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>

</body>
</html>
Cobalah sendiri

Contoh Jadi:

Ini Adalah Heading

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf



Padding CSS

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

Contoh:

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

<h1>Ini Adalah Heading</h1>

<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>

</body>
</html>
Cobalah sendiri

Contoh Jadi:

Ini Adalah Heading

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf



CSS Margin

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

Contoh:

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

<h1>Ini Adalah Heading</h1>

<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>
<p>Ini adalah sebuah paragraf</p>

</body>
</html>
Cobalah sendiri

Contoh Jadi:

Ini Adalah Heading

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf



Atribut id

Untuk menentukan gaya tertentu untuk satu elemen khusus, tambahkan atribut id ke elemen:

<p id="p01">Aku berbeda</p>
Cobalah sendiri

lalu tentukan gaya untuk elemen dengan id spesifik:

<style>
#p01 {
  color: blue;
}
</style>
Cobalah sendiri

Contoh Jadi:

Ini adalah sebuah paragraf

Ini adalah sebuah paragraf

Aku berbeda

Catatan: Id suatu elemen harus unik di dalam halaman, jadi selector id digunakan untuk memilih satu elemen unik! (Berbeda)



Atribut class

Untuk menentukan gaya untuk jenis elemen khusus, tambahkan atribut class ke elemen:

Contoh:

<p class="error">Aku berbeda</p>
Cobalah sendiri

Contoh:

<style>
p.error {
  color: red;
}
</style>
Cobalah sendiri


Ringkasan Bab

  • Gunakan styleatribut HTML untuk penataan inline
  • Gunakan <style>elemen HTML 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 colorproperti CSS untuk warna teks
  • Gunakan font-familyproperti CSS untuk font teks
  • Gunakan font-sizeproperti CSS untuk ukuran teks
  • Gunakan borderproperti CSS untuk batas
  • Gunakan paddingproperti CSS untuk ruang di dalam perbatasan
  • Gunakan marginproperti CSS untuk ruang di luar perbatasan

Berlangganan update artikel terbaru via email:

0 Response to "[Belajar HTML #13] Styling HTML dengan CSS"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel