Tutorial CSS #1 - Dasar-Dasar CSS
Tutorial CSS #1 - Dasar-Dasar CSS

Tutorial CSS #1 - Dasar-Dasar CSS

Halo, Programmer’s sekalian! Kali ini saya akan sharing tentang dasar-dasar CSS yang berguna untuk membuat tampilan halaman website semakin menarik dan interaktif. Sebelum kita membahasnya, alangkah baiknya perhatikan daftar isi artikel ini, kita akan mempelajari:


Halo, Programmer’s sekalian! Kali ini saya akan sharing tentang dasar-dasar CSS yang berguna untuk membuat tampilan halaman website semakin menarik dan interaktif. Sebelum kita membahasnya, alangkah baiknya perhatikan daftar isi artikel ini, kita akan mempelajari:

Daftar Isi:
  • Pengertian CSS
  • Bagaimana CSS Bekerja?
  • 3 Jenis Cara Penulisan CSS
  • ID dan Class Selector

Pengertian CSS

CSS merupakan singkatan dari Cassading Style Sheet. CSS sangat popular di kalangan programmer karena kemampuannya untuk menghasilkan website yang menarik dan interaktif.

CSS berfungsi untuk mengatur bagaimana penampilan setiap element HTML pada halaman web. Jadi, sebenarnya CSS hanya mengubah tampilan sebuah elemen HTML yang dideklarasikan. Jika sebuah elemen tidak dideklarasikan pada CSS, maka secara otomatis elemen HTML yang tidak dideklarasikan tidak akan diubah tampilannya oleh CSS.

Bagi yang masih bingung apa itu elemen HTML, bisa membaca postingan kami di website ini atau langsung klik: Pengertian HTML J

Penting!

Sebuah File CSS bisa digunakan untuk beberapa halaman Web. Jadi, meski kita membuat 1 file CSS, bisa digunakan untuk beberapa halaman web. Dahsyat!

Bagaimana CSS Bekerja?

CSS bekerja dengan cara menghubungkan setiap element HTML. Setiap elemen HTML yang dihubungkan dengan CSS akan bekerja sesuai dengan ketentuan script CSS tersebut. Sebagai contoh:


Penjelasan:
  • Tag p{} erupakan salah satu elemen HTML yang berasal dari <p> …. </p>
  • Dalam CSS, p{} mempunyai kedudukan sebagai selector, yaitu bagian elemen HTML yang akan diubah tampilannya.
  • Sedangkan script untuk mengubah tampilannya disebut sebagai declaration.
  • Setiap declaration harus diapit dengan { .....}

    Dalam contoh di atas kita menggunakan 1 declaration saja. Kita bisa menambahkan beberapa bagian lagi. Misalnya:


    Penjelasan:
    • H1, h2 dan h3 kedudukannya sebagai selector dari elemen HTML.
    • Font-family dan color kedudukannya sebagai property CSS
    • Sedangkan Arial dan yellow kedudukannya sebagai value dari property yang dideklarasikan.


    3 Cara Penggunaan CSS

    Untuk menggunakan CSS, kita bisa menggunakan 3 cara, yaitu:

    1# Inline CSS

    Inline CSS menggunakan atribut style pada elemen HTML. Maksudnya, kita langsung mendesign elemen HTML langsung pada file HTML.

    Contoh:


    Cara inline CSS ini biasanya menggunakan atribut style di dalam elemen HTML.

    Kelemahan Inline CSS terletak pada banyaknya CSS pada setiap elemen HTML. Sehingga kita akan mengulang-ulang property dan declaration yang sama pada elemen HTML tertentu. Selain itu, inline CSS tidak bisa digunakan pada banyak file HTML. Ia hanya focus pada elemen yang dideklarasikan saja.

    2# Internal CSS

    Internal CSS digunakan dalam satu halaman HTML. Letaknya pun ada di antara elemen <head> … </head>

    Contoh:


    Penjelasan:
    • Baris ke 4 – 9 adalah ciri dari internal CSS, yaitu menempatkan CSS pada file HTML secara langsung.
    • Baris ke 12 adalah elemen HTML yang akan diberikan CSS

    Kelemahan internal CSS ini adalah mirip seperti inline CSS, yaitu hanya bisa digunakan pada satu file CSS saja. Selain itu, bari koding akan jadi lebih banyak karena harus menempatkan setiap CSS pada file HTML.

    3# External CSS

    Cara ini yang paling banyak digunakan oleh programmer. Cara ini memisahkan antara file HTML dengan file CSS.

    Namun, untuk memanggil CSS kita harus menambahkan script di dalam tag <head> … </head>

    Contoh:


    Penjelasan:
    • Atribut style=”stylesheet” menandakan bahwa ini adalah file CSS yang bertipe stylesheet.
    • Atribut type=”text/css” menandakan bahwa ini bertype CSS
    • Atribut href=”style.css” merupakan nama file CSS yang nantinya akan kita panggil ke halaman HTML.

    Untuk melanjutkan, sekarang mari kita buat file dengan nama style.css dan isinya:


    Keunggulan dari external CSS ini adalah bisa digunakan oleh beberapa halaman website asal merujuk pada style.css

    Bersambung ke Part #2, klik:


    Go To Part #2 - Id dan Class Selector

    Advertisement

    Baca juga:

    Your Reactions:

    Admin
    Wildan Fuady adalah seorang author 20 buku, teacher dan web developer.