Setiap bahasa pemrograman komputer mempunyai aturan penulisan (sintaksis) yang berbeda. Bila Anda membuat program dengan Java, kode program harus ditulis dengan sintaksis Java. Anda tidak dapat menulis program Java menggunakan sintaksis dari bahasa pemrograman lain seperti Delphi atau menulis semaunya tanpa sintaksis. Bila demikian, kode program tidak dikenali dan tidak dapat dieksekusi oleh compailer Java. Show
Demikian halnya ketika Anda menulis kode CSS untuk memberi style (gaya) pada tag HTML tertentu atau untuk keseluruhan laman web, CSS juga mempunyai aturan penulisan atau sintaksis sendiri. Bila sintaksis CSS salah, browser tidak dapat menterjemahkan atau akan diterjemahkan secara keliru. Karena itu, penting untuk menggunakan sintaksis CSS yang benar agar kode CSS dapat diterjemahkan oleh web browser. Baca artikel:
Kode CSS sendiri terdiri dari tiga elemen yaitu selector, property dan value. Selector adalah elemen HTML yang mana saja, property adalah tipe atribut yang ingin diterapkan pada tag HTML dan value adalah nilai yang diberikan ke property. Adapun sintaksis CSS adalah sebagai berikut:
Sebagai contoh, Anda dapat memberi style (gaya) untuk paragraf atau tag <p> dengan warna merah dan dicetak miring. p {color:red; font-style:italic;} Dari sintaksis CSS di atas, antara property-name dan value dipisah oleh tanda titik dua (colon) dan setelah value diakhiri oleh titik koma (semicolon. Property-name dan value diletakkan di dalam kurung kurawal ({}). Sintaksis CSS mempunyai dua blok yaitu blok selector dan blok deklarasi. Blok deklarasi adalah kurung kurawal beserta dengan property dan value di dalamnya sebagaimana gambar di bawah ini. Selector CSS tidak hanya berupa elemen HTML namun bisa berupa pola (pattern) yang digunakan untuk menyeleksi elemen yang ingin diberi style atau gaya. Pola-pola dari selector CSS sebenarnya cukup banyak. Berikut ini beberapa contoh selector CSS: 1. Element Selector.Element selector adalah tipe selector yang umum digunakan dan mungkin banyak ditemui ketika mengedit file CSS untuk mengubah tampilan laman web. Sebagai contoh, Anda dapat memberi style pada paragraf yaitu elemen p atau tag <p> dengan warna merah dan rata tengah. p {color:red; text-align:center;} 2. Universal Selector.Universal selector (*) digunakan untuk menyeleksi semua elemen HTML. Sebagai contoh, Anda memberi warna latar (background) kuning pada semua elemen HTML. * {background-color:yellow;}
3. Descendant Selector.Descendant selector termasuk yang umum digunakan dan banyak ditemukan di file CSS. Selector descendant digunakan ketika Anda ingin memberi style (gaya) pada elemen tertentu yang ada di dalam elemen lainnya. Sebagai contoh, style berupa warna biru hanya berlaku untuk elemen em atau tag <em> jika elemen atau tag <em> berada di dalam elemen p atau tag <p>. 4. Grouping Selector.Grouping selector umum ditemukan di file CSS. Grouping selector digunakan untuk memberi style (gaya) pada lebih dari satu elemen HTML. Anda cukup memisahkan elemen-elemen HTML yang akan diberi style sama dengan menggunakan tanda koma. h2, h2, h3 {color:blue; font-weight:normal; text-transform:lowercase;} 5. class Selector.class selector digunakan untuk menyeleksi elemen menggunakan atribut class spesifik. Untuk menyeleksi elemen HTML dengan class spesifik, gunakan tanda titik (.) diikuti nama class. Sebagai contoh, semua elemen HTML dengan class="bluecenter" diberi warna biru dan rata tengah. .bluecenter {color:blue; text-align:center;} 6. id Selector.id selector digunakan untuk menyeleksi elemen HTML menggunakan atribut id spesifik. Dalam satu laman web, id harus unik dan digunakan untuk menyeleksi satu elemen unik. Untuk menyeleksi elemen dengan id, gunakan tanda pagar (#) diikuti elemen. Sebagai cobtoh, elemen HTML dengan id="red" diberi warna merah.
David Kurniawan Follow A Technical Content Writer at Niagahoster, specializing in Virtual Private Servers (VPS), WordPress, and Internet Marketing. David is eager to help people to improve their business on the internet. January 15, 2020 2 min read Cascading Style Sheets (CSS) adalah bahasa pemrograman untuk mendesain tampilan website yang memiliki tiga metode penulisan kode berbeda yaitu Inline CSS, Internal CSS, dan External CSS Setiap metode penulisan kode CSS memiliki kelebihan, kekurangan, serta manfaatnya yang berbeda-beda. Nah! Pada artikel kali ini, kami akan membahas perbedaan dari tiga metode penulisan kode CSS. Termasuk kelebihan, kekurangan, manfaat, dan contoh dari penempatan kode CSS. Simak perbedaanya berikut ini. Internal CSSInternal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, Internal CSS ini bisa dipakai untuk menciptakan tampilan yang unik, pada setiap halaman website. Manfaat Internal CSS
Kekurangan Internal CSS
Contoh Internal CSSBerikut ini adalah contoh penempatan Internal CSS pada file HTML.
Baca juga: Cara Membuat Menu Dropdown CSS Mudah External CSSEksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman. Cara ini lebih sederhana dan simpel daripada menambahkan kode CSS di setiap elemen HTML yang ingin Anda atur tampilannya. Manfaat External CSS
Kekurangan External CSS
Contoh External CSSBerikut ini adalah contoh penempatan External CSS pada file HTML. Sebagai contoh saya membuat file CSS dengan nama style.css berikut isi kode style.css.
Untuk menggunakan file style.css dalam HTML, Anda perlu menambahkannya ke dalam file HTML. Dengan menggunakan tag <link> berikut contohnya.
Berikut ini penempatan kode dalam satu file HTML.
Baca juga: Cara Menambahkan Custom Javascript dan CSS di WordPress Inline CSSInline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis. Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline style CSS. Sebab, Inline CSS digunakan hanya untuk mengubah satu elemen saja. Manfaat Inline CSS
Kekurangan Inline CSS
Contoh Inline CSSBerikut ini adalah contoh penempatan kode dari Inline CSS:
Baca Juga: Apa itu SCSS? KesimpulanSampai di sini, semoga Anda paham mengenai pengertian perbedaan Internal, External dan Inline CSS. Jika ada pertanyaan atau tambahan lain silakan tinggalkan komentar melalui kolom di bawah ini. Jangan lupa subscribe dan follow sosial media kami untuk mendapatkan informasi seputar VPS, hosting, Internet marketing, dan teknologi. Baca Juga:
Berapa cara penulisan CSS?Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal.. Inline – menuliskan perintah CSS langsung pada elemen HTML.. Internal – menuliskan perintah CSS di bagian <head> HTML.. Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal). Syarat penulisan kode CSS harus berada di tag apa?Ada tiga cara menulis CSS di HTML: Internal CSS –> ditulis di dalam tag <style> ; Inline CSS –> ditulis di atribut elemen HTML; External CSS –> ditulis di file CSS terpisah dengan HTML.
Apa yang dimaksud dengan CSS dan berikan contohnya?CSS adalah teknologi yang berfungsi untuk memperindah tampilan website. CSS adalah singkatan dari Cascading Style Sheets yang sudah digunakan selama bertahun-tahun. Pada sebuah website , selalu terdapat dokumen, gambar, dan teks.
Bagaimana cara kerja CSS?Cara kerja CSS
CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs.
|