web Archives - mangcoding

Photo by Ferenc Almasi on Unsplash

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Internal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>.

Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

<html>
    <head>
        <meta charset="UTF-8">
        <title>tes HTML</title>
        <style>
            header {
                background: url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg') 
                           no-repeat center center;
                padding: 50px;
            }
            h2 {
                color: #007EC7;
                text-align: center;
            }
            .subtitle {
                background: rgba(255, 255, 255, 0.7);
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>Welcome to my Site</h2>
            <p class="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut,
 nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero 
rerum, assumenda itaque totam consequatur dicta dolore.</p>
    </body>
</html>

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web.

CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

External CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>.

Penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
pada tagbuatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.

<head>
  <meta charset="UTF-8">
  <title>External HTML</title>
  <link rel="stylesheet" href="style.css"/>
</head>

Seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector? Berapa banyak tipe selector? Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^ Semangat

Itulah artikel Pengenalan CSS bagian 2 (Internal dan External CSS) yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Photo by Jackson Sophat on Unsplash

Berikut ini, adalah raw materi “Dasar Pemrograman Web untuk Pemula” yang akan saya tulis didalam blog ini. semoga bermanfaat untuk rekan-rekan developer yang baru belajar.

Note : Penulisan artikel ini tidak terstruktur, saya buat dan sesuaikan dengan materi pengajaran yang akan saya berikan di kelas. jadi saya mohon maaf karena masih ada beberapa materi yang belum tersedia, Terima kasih. (materi yang sudah tersedia, ditandai dengan hyperlink bergaris bawah)

Pengenalan HTML

Persiapan Belajar