Ads by Yasya El Hakim
Tutorial CSS Tingkat Dasar: Menggunakan CSS - Bagian 1

Sebelum mempelajari Tutorial CSS Tingkat Dasar, pastikan kalian sudah memahami HTML. Jika kalian belum memahami HTML, saya yakin kalian akan bingung dengan tutorial serta contoh yang akan saya berikan. Jika sudah paham, mari kita lanjutkan.

Referensi Lanjutan:

Terdapat tiga cara untuk menggunakan CSS pada dokumen HTML: Inline CSS, Internal CSS, dan External CSS.



Inline CSS

Inline CSS dapat kalian masukkan kedalam tag pada HTML dengan menggunakan atribut style. Berikut adalah contohnya:

<p style="color: red">Teks</p>


Contoh diatas akan mengubah warna teks dari paragraf menjadi berwarna merah.

Tetapi, cara terbaik untuk menggunakan CSS pada HTML adalah dengan menggunakannya secara terpisah. Artinya, saya sangat menyarankan agar kalian meminimalisir penggunaan Inline CSS.

Internal CSS

Internal CSS dapat kalian gunakan dengan memasukkan CSS kedalam dokumen HTML tepat diantara tag head dan isi dari CSS berada di dalam tag style. Berikut adalah contohnya:

<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...


Contoh diatas akan membuat semua teks paragraf menjadi berwarna merah dan semua teks link menjadi berwarna biru.

Selain lebih baik daripada Inline CSS, Internal CSS juga sangat baik dan bagus digunakan karena dapat membuat dokumen HTML menjadi rapih dan mudah untuk dibaca.

External CSS

Biasanya, External CSS dapat kalian gunakan untuk beberapa Website serta halaman tertentu. File External CSS tidaklah berada bersamaan dengan dokumen HTML, melainkan berupa file yang terpisah. Berikut adalah contohnya:

p {
    color: red;
}

a {
    color: blue;
}


Jika kalian menyimpan kode diatas dengan nama "style.css" pada direktori atau folder yang sama dengan file HTML yang kalian miliki. Maka kalian dapat memanggil file tersebut pada dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS</title>
    <link rel="stylesheet" href="style.css">
...


Latihan

Latihan merupakan cara tercepat untuk menguasai suatu hal termasuk tutorial dasar CSS ini. Maka dari itu, kalian harus sering mencoba serta mempraktikkan setiap hal yang sudah kalian pelajari. Praktik pertama, buatlah sebuah file baru dengan menggunakan Text Editor kesukaan kalian (Notepad, Notepad++, VSCode, Sublime, dll) dan simpanlah file tersebut dengan nama "style.css" (berkestensi ".css") pada direktori HTML yang sudah kalian buat.

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Web Ku</title>
    <link rel="stylesheet" href="style.css">
</head>
...


Tambahkan <link rel="stylesheet" href="style.css"> kedalam dokumen HTML yang kalian buat, kemudian simpanlah. Sekarang dokumen HTML yang kalian miliki sudah terhubung dengan file CSS yang masih kosong. Pada bagian selanjutnya, kita akan memasukkan kode kedalam file CSS tersebut serta melihat perubahan yang telah kita buat.

Selanjutnya: Tutorial CSS Tingkat Dasar: Selector, Property, dan Nilai - Bagian 2
Daftar isi: Tutorial CSS Tingkat Dasar

0Komentar

Sebelumnya Selanjutnya