Jenis-Jenis CSS (Inline, Internal, Eksternal)

11/12/2017    Risman Hakim    3938     Website

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.

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More