Jenis-Jenis CSS (Inline, Internal, Eksternal)

Cascading Style Sheet (CSS) merupakan sebuah bahasa script yang berfungsi untuk mempercantik tampilan website agar tampilan website lebih menarik untuk dilihat. Dengan CSS kita dapat mengatur dan menentukan jarak, mengubah jenis font, ukuran font, warna dan lain sebagainya. Pada CSS ada beberapa jenis cara penulisan diantaranya CSS :

1. Inline Style Sheet
2. Internal Style Sheet
3. Eksternal Style Sheet

Untuk lebih jelasnya simak uraian Jenis-Jenis CSS (Inline, Internal, Eksternal) berikut ini.

1. Inline Style Sheet

Inline Style Sheet merupakan metode atau cara penulisan CSS langsung pada tag HTML yang ingin diberikan style CSS. Metode ini biasanya digunakan ketika kita tidak ingin mengatur semua elemen didalam dokumen web. Metode ini sangat tidak disarankan karena akan membuat tag pada HTML akan penuh dengan attribute HTML dan membuat ukuran file pada HTML akan bertambah besar. Berikut contoh penggunaan Inline Style Sheet.

<body style="font-family: arial">
    <h1 style="background-color: red; color: white; padding: 5px">Cascading Style Sheet (CSS).</h1>
</body>

2. Internal Style Sheet

Internal Style Sheet merupakan metode penulisan CSS langsung didalam file HTML tepatnya berada diantara tag head dengan diapit tag style terlebih dahulu sebelum memuali kode CSS. Berikut contoh penggunaan Internal Style Sheet.

<html>
<head>
    <meta charset="UTF-8">
    <title>Jenis-Jenis CSS (Inline, Internal, Eksternal)</title>
    <style type="text/css">
        body {font-family: arial;}
        h1 {
            background-color: red;
            color: white;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Cascading Style Sheet (CSS).</h1>
</body>
</html>

3. Eksternal Style Sheet

Eksternal Style Sheet merupakan metode penulisan CSS secara terpisah dengan memberikan ekstensi .css untuk nama filenya. Metode ini sangat dinajurkan untuk menuliskan kode CSS karena kita akan dengan mudah mengubah kode yang terkumpul dalam satu file. Untuk Eksternal style file akan disematkan atau diload dengan kode HTML seperti berikut.

<head>
    <meta charset="UTF-8">
    <title>Jenis-Jenis CSS (Inline, Internal, Eksternal)</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

Baik, itulah tadi Jenis-Jenis CSS (Inline, Internal, Eksternal) yang bisa kalian gunakan dalam penulisan kode-kode CSS, semoga bisa bermanfaat dan selamat mencoba.

11 Desember 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat