Cascading style sheets (css) merupakan kode yang digunakan untuk

CSS merupakan bagian dari web desain yang tak terpisahkan. Dengan CSS kita bisa merubah perwajahan (front-end) atau tampilan sebuah halaman web. Jika sebuah halaman web tidak menggunakan CSS, maka tampilannya akan membosankan dan tidak menarik. Disini, akan akan dijelaskan mengenai CSS lebih detail.

Table of Contents Show

Apa itu CSS?
2. Sejarah Perkembangan CSS
3. Cara Menggunakan CSS
4. Fungsi CSS
5. Kelebihan & Kekurangan CSS
Video yang berhubungan

Apa itu CSS?

CSS adalah kepanjangan dari "Cascading Style Sheets". Yaitu, bahasa yang digunakan untuk memberi sentuhan gaya atau corak tampilan (style) pada sebuah element atau struktur halaman web yang dibuat oleh HTML.

CSS dikembangkan oleh komunitas internasional yang disebut World Wide Web Consortium (W3C), yang merupakan komunitas seluruh dunia yang bergabung untuk berkontribusi memberi masukan, menulis dan mengembangan spesifikasi dari CSS untuk mendefinisikan standar bahasa CSS yang akan digunakan oleh semua orang, juga agar vendor yang mengembangkan aplikasi web browser dapat mengimplementasikannya. Spesifikasi CSS pertama kali diperkenalkan pada tahun 1996.

Untuk mempelajari CSS, tentunya kita harus mengetahui HTML dasar yang membentuk struktur halaman sebuah website yang dibuat oleh tag-tag atau elemen-elemen HTML. Dengan demikian, kita dapat mengaplikasikan style untuk masing-masing tag atau elemen tersebut.

CSS mendeskripsikan presentasi atau tampilan sebuah halaman web. Sehingga, kode CSS digunakan untuk mempercantik dan memperbaiki tampilan antar muka sebuah website. Seperti, mewarnai tulisan, memberi background (latar) baik dengan warna ataupun gambar, menentukan font, memberi animasi, mengatur tampilan sesuai ukuran layar web browser yang digunakan, dan hal-hal lainnya yang berkaitan dengan desain sebuah website.

CSS3 adalah versi pengembangan dari CSS 2.1 dengan penambahan beberapa fitur baru yang canggih dan berguna untuk pengembangan website modern. Anda dapat mempelajari dan melihat pembaharuan atau perkembangannya di website resminya www.w3.org/Style/CSS/current-work, yang mana berdasarkan spesifikasinya, CSS3 terbagi menjadi beberapa modul untuk dipelajari. Setiap modul merupakan spesifikasi tersendiri yang dibahas dan dikembangkan oleh beberapa penulis yang terpisah dari spesifikasi lainnya. Contohnya, modul CSS selectors, text, dan background.

Menulis kode CSS dapat menggunakan aplikasi code editor, seperti notepad++, Sublime Text, dan lain sebagainya.

Berikut adalah contoh kode CSS yang dapat ditulis didalam element <style>..</style> ataupun didalam file .css yang terpisah (eksternal).

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #fff; } p {background: grey} a {color: blue}

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

CSS adalah singakatan dari Cascading Style Sheet. CSS berfungsi untuk memberikan style atau corak tampilan pada suatu elemen atau struktur page website yang dibuat HTML.

Contohnya seperti memberi warna pada huruf, menebal / memeringkan huruf, dan masih banyak lagi. Tampilan website yang hanya menggunakan HTML akan terlihat membosankan, maka dari itu diciptakannya CSS.

CSS adalah sebuah teknologi internet yang kembangkan oleh World Wide Web Consortium (W3C) pada tahun 1996. Selain HTML, CSS juga kompatibel Bahasa markup lain seperti XHTML, XML, SVG, dan XUL.

Baca Juga Artikel HTML Lengkap! : Mengenal Definisi HyperText Markup Language (HTML)

Sebelum mulai menggunakan CSS, saya saran kan agar kamu mempelajari terlebih dahulu HTML! Karena untuk menerapkan CSS, kamu perlu tau terlebih dahulu elemen-elemen dan tags yang ada pada HTML, sehingga dapat menyisipkan style CSS pada setiap elemen dan tag tersebut.

Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).

Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:

External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag <head> HTML),
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML)

Tempat Kursus Komputer Terbaik | Digital Marketing, Programming, SEO, Dll.

2. Sejarah Perkembangan CSS

CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 Mensupport :

Jenis Font
Warna Text, Background, dan Elemen lainnya
Text attribute seperti spasi antar huruf, surat, dan baris text
Alignment text atau gambar seperti rata kiri, kanan, dan tengah
Margin, Border, Padding, dan Positioning untuk kebanyakan elemen
Mengidentifikasi & menklarifikasi secara generik dan unik sebuah group attribute

CSS 2

Spesifikasi CSS 2 dipublish dan dikembangkan oleh W3C pada Mei 1998. Merupakan Upgrade dari CSS 1, CSS 2 memiliki fitur baru seperti Positioning suatu Elemen atau Z-Index secara absolut, relatif, dan tepat. CSS 2 menekankan pada fitur Accessibility and Capacibilty kususnya pada media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 3

CSS 3 adalah versi terbaru dari CSS yang memiliki banyak kelebihan untuk mendesain website agar terlihat unik dan menarik. CSS 3 mampu menyisipkan animasi, seperti animasi gambar dan animasi 3D. Desain yang ada pada CSS 3 bersifat responsive, jadi sangat kompatibel dengan desktop maupun smartphone. Selain itu, fitur terbaru yang dimiliki CSS 3 adalah Animation, Multiple-Background, Drop-shadow, CSS Object-model, CSS Math, dan masih banyak lagi.

Baca Juga : Ini Dia Golang, Salah Satu Bahasa Pemograman Yang Digunakan Tokopedia

3. Cara Menggunakan CSS

Ada 3 cara menggunakan CSS yaitu :

External CSS
Internal CSS
Inline CSS

External CSS

Dengan External Style Sheet kamu bisa mengganti desain keseluruhan website kamu hanya dengan 1 file

Pada File HTML kamu harus disisipkan Link yang menuju ke file CSS yang diinginkan. Contoh :

Internal CSS

Internal Style CSS disipkan diantara elemen<style>, didalam section <head> dari page HTML kamu.

Inline CSS

Inline CSS berarti menyisipkan CSS hanya pada elemen tertentu. Untuk menggunakan Inline CSS, tambahkan atribut style pada baris script code elemen yang diinginkan.

Dari ketiga cara diatas sebenarnya hampir sama, hanya saja pada external CSS kamu perlu membuat file css terpisah, dan memanggil file tersebut pada bagian <head> HTML kamu.

4. Fungsi CSS

CSS berfungsi sebagai media untuk merepresentasikan suatu tampilan (huruf, gambar, dan yang lainnya) pada halaman website. Kode yang ada pada CSS bertujuan untuk memperindah tampilan dan memperbaiki user-interface website.

Berikut ini adalah contohnya!

Gambar diatas merupakan contoh HTML tanpa Script Code CSS, namun bagaimana jika disisipkan code tersebut.

Bagaimana ? Terlihat jelas perbedaannya. Jika kamu membuat HTML tanpa CSS, maka tampilannya akan terlihat membosankan. Namun dengan menyisipkan script code CSS, maka akan memberikan sedikit warna pada website kamu.

Cara untuk menyisipkan CSS pada HTML adalah pertama-tama kamu harus membuat file css terlebih dahulu (.css) dan menyisipkan script code “<Link rel=”Stylesheet” type=”text/css” href=”mystyle.css>” pada bagian <head> HTML. Pada contoh diatas, saya menamai file CSS saya mystyle.css

Dibawah ini adalah isi dari file mystyle.css

Background-color – mengindikasikan warna background. Pada contoh saya menggunakan warna lightblue
H1 Color: navy & margin-left: 20px – mengartikan bahwa pada judul HTML saya menggunakan warna navy dengan margin rata kiri dan ukuran font 20px.

Untuk membuat script CSS kamu bisa menggunakan text editor seperti Notepad++ atau sublime text. Jangan lupa untuk mengsave filenya agar bisa dipanggil pada Script kode HTML kamu.

5. Kelebihan & Kekurangan CSS

Sama halnya dengan bahasa pemrograman lain, Css juga memiliki kelebihan dan kekurangannya tersendiri. Berikut ini adalah kelebihan dan kekurangan dari CSS

Kelebihan

CSS sangat mudah dipelajari bahkan untuk pemula sekalipun
CSS memisahkan antara Desain dan konten yang ada pada blog / website
Pengaturan desain bisa anda tentukan sendiri dengan bebas
Multi function – 1 file CSS bisa anda gunakan beberapa kali, jadi anda tidak perlu repot-repot membuat banyak file CSS.
Menghemat waktu kamu ketika membuat maupun mengedit halaman web
Size memory yang kecil. Karena file css terpisah, membuat ukuran file HTML anda relatif lebih kecil

Kekurangan

Karena tidak semua browser sama dalam mengartikan CSS, terkadang prosesnya memakan waktu
Adanya kemungkinan tampilan yang berbeda antara satu browser, dengan browser yang lainnya