Belajar HTML Part 12 - Jenis-Jenis Style (CSS) pada HTML

Menggunakan Style CSS dalam HTML

CSS singkatan Cascading Style Sheets. CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar monitor atau media lainnya. CSS menghemat banyak pekerjaan. Hal ini 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> dalam elemen <head>
Eksternal - dengan menggunakan file CSS eksternal (file CSS tersendiri)

Cara yang paling umum untuk menambahkan CSS adalah untuk membuat style di file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk ditampilkan, dan lebih mudah bagi Anda untuk mencoba sendiri.

Tips: Anda dapat mempelajari lebih banyak tentang CSS di Tutorial CSS.

CSS Inline

Sebuah CSS inline digunakan untuk menerapkan desain yang unik untuk elemen HTML. CSS inline menggunakan atribut style dalam elemen HTML.

Contoh ini menetapkan warna teks elemen <h1> dengan warna biru:

<h1 style="color:powderblue;">Ini adalah Heading berwarna biru</h1>

Hasilnya:

CSS internal

CSS internal ditempatkan dalam elemen <head> halaman HTML, dalam elemen <style>:

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>

Hasilnya:

CSS eksternal

CSS eksternal digunakan untuk menerapkan desain untuk banyak halaman HTML sekaligus. Dengan CSS eksternal, Anda dapat mengubah banyak tampilan halaman web dengan mengubah satu file saja!

Dalam penggunaan CSS eksternal, hanya menambahkan link ke dalam elemen <head> dari halaman HTML:

Contoh

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

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

</body>
</html>

CSS eksternal dapat ditulis dalam editor teks apapun. File tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana penulisan "styles.css":

body {
    background-color: powderblue;
}

h1 {
    color: blue;
}

p {
    color: red;
}

Hasilnya:

Referensi CSS eksternal

CSS eksternal dapat ditentukan dengan URL lengkap atau dengan path relatif ke halaman web saat ini.

Contoh ini menggunakan URL lengkap untuk link ke sebuah CSS:

Contoh

<link rel="stylesheet" href="https://king-octahasan.blogspot.co.id/html/styles.css">

Contoh ini link merujuk ke CSS yang terletak di folder html di situs web:

Contoh

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

Contoh ini link merujuk ke CSS yang terletak di folder yang sama dengan halaman web:

Contoh

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

Kesimpulan

• Gunakan atribut HTML style untuk styling inline

• Gunakan elemen HTML <style> untuk membuat CSS internal

• Gunakan elemen HTML <link> untuk merujuk ke file CSS eksternal

• Gunakan elemen HTML <head> untuk menempatkan <style> dan <link>

• Gunakan properti CSS color untuk warna teks

Demikian pembahasan tentang pemberian styling CSS pada HTML.

Semoga bemanfaat!

Sumber: https://www.w3schools.com

Belajar HTML Part 12 - Jenis-Jenis Style (CSS) pada HTML

4/ 5

Oleh Octavianus Hasan

Octavianus Hasan Februari 21, 2018 Komentar

king-octahasan

Rabu, 21 Februari 2018