Tampilan Gaya HTML - CSS ~ KODELOVER

CSS = Gaya dan Warna
Memanipulasi Teks
Warna, Kotak

Styling HTML dengan CSS

CSS adalah singkatan dari Cascading Style Sheets

Styling dapat ditambahkan ke elemen HTML dengan 3 cara:

    Inline - menggunakan atribut gaya dalam elemen HTML
    Internal - menggunakan elemen <style> di bagian <head> HTML
    Eksternal - menggunakan satu atau lebih file CSS eksternal

Cara yang paling umum untuk menambahkan styling, adalah dengan menjaga gaya dalam file CSS terpisah. Tapi, dalam tutorial ini, kita menggunakan styling internal, karena lebih mudah untuk menunjukkan, dan lebih mudah untuk mencobanya sendiri.

Inline Styling (Inline CSS)

Inline styling digunakan untuk menerapkan gaya unik ke elemen HTML tunggal:

Inline styling menggunakan atribut style.

Contoh ini mengubah warna teks elemen <h1> menjadi biru:
Contoh
<h1 style = "color: blue;"> Ini adalah Blue Heading </h1>
Internal Styling (Internal CSS)

Styling internal digunakan untuk mendefinisikan gaya untuk satu halaman HTML.

Penataan internal didefinisikan di bagian <head> dari halaman HTML, dengan elemen <style>:
Contoh
<! DOCTYPE html>
<html>
<head>
<Style>
Tubuh {background-color: lightgrey;}
h1 {warna: biru;}
p {warna: hijau;}
</style>
</head>
<body>

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

</body>
</html>

Styling Eksternal (CSS Eksternal)

Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman.

Dengan lembar gaya eksternal, dapat mengubah tampilan keseluruhan situs web dengan mengubah satu file!

Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke bagian <head> pada halaman HTML:
Contoh
<! DOCTYPE html>
<html>
<head>
<Link rel = "stylesheet" href = "styles.css">
</head>
<body>

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

</body>
</html>

Lembar gaya eksternal dapat ditulis dalam editor teks manapun. File tidak boleh berisi tag html. File style sheet harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana tampilan "styles.css":
Tubuh {
    Background-color: lightgrey;
}

h1 {
    warna biru;
}

p {
    Warna: hijau;
}

Font CSS

Properti warna CSS mendefinisikan warna teks yang akan digunakan untuk elemen HTML.

Properti font-family CSS mendefinisikan font yang akan digunakan untuk elemen HTML.

Properti ukuran huruf CSS mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML.
Contoh
<! DOCTYPE html>
<html>
<head>
<Style>
h1 {
    warna biru;
    Font-family: verdana;
    Ukuran font: 300%;
}
p {
    warna merah;
    Font-family: kurir;
    Ukuran huruf: 160%;
}
</style>
</head>
<body>

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

</body>
</html>
Model Kotak CSS

Setiap elemen HTML memiliki kotak di sekitarnya, bahkan jika tidak dapat melihatnya.

Properti border CSS mendefinisikan batas yang terlihat di sekitar elemen HTML:
Contoh
p {
    Border: hitam solid 1px;
}

Properti padding CSS mendefinisikan padding (spasi) di dalam perbatasan:
Contoh
p {
    Border: hitam solid 1px;
    Padding: 10px;
}

Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan:
Contoh
p {
    Border: hitam solid 1px;
    Padding: 10px;
    Margin: 30px;
}
Catatan Contoh CSS di atas menggunakan px untuk menentukan ukuran dalam piksel.
Atribut id

Semua contoh di atas menggunakan CSS untuk meniru elemen HTML secara umum.

Untuk menentukan gaya khusus untuk satu elemen khusus, tambahkan dulu atribut id ke elemen:
<p id = "p01"> Saya berbeda </p>

Kemudian definisikan style untuk elemen dengan id tertentu:
Contoh
# P01 {
    warna biru;
}
Atribut kelas

Untuk mendefinisikan gaya untuk tipe (kelas) elemen khusus, tambahkan atribut kelas ke elemen:
<p class = "error"> Saya berbeda </p>

Sekarang dapat menentukan gaya yang berbeda untuk elemen dengan kelas tertentu:
Contoh
P.error {
    warna merah;
}
Catatan Gunakan id untuk menangani satu elemen. Gunakan kelas untuk menangani kelompok elemen.
Ringkasan

    Gunakan atribut style HTML untuk inline styling
    Gunakan elemen HTML <style> untuk menentukan CSS internal
    Gunakan elemen HTML <link> untuk merujuk ke file CSS eksternal
    Gunakan elemen <head> HTML untuk menyimpan elemen <style> dan <link>
    Gunakan properti warna CSS untuk warna teks
    Gunakan properti font-family CSS untuk font teks
    Gunakan properti ukuran huruf CSS untuk ukuran teks
    Gunakan properti border CSS untuk batas elemen yang terlihat
    Gunakan properti padding CSS untuk ruang di dalam perbatasan
    Gunakan properti margin CSS untuk ruang di luar perbatasan

KODELOVER

Tampilan Gaya HTML - CSS

Related Post