Apa Itu CSS? Pengertian dan Cara Kerja CSS
Posting Komentar
Apa Itu CSS? Pengertian dan Cara Kerja CSS - CSS kependekan dari Cascading Style Sheet merupakan salah satu bahasa pemograman yang terdiri dari beberapa kode yang dibagi dalam setiap elemen dan mengatur tampilan dari setiap elemen tersebut dalam bentuk bahasa markup yaitu HTML
Daftar isi
Baca Juga
Apa Itu CSS? Pengertian dan Cara Kerja CSS - Setiap blog atau website memiliki tampilan yang berbeda meskipun berasal dari pengembang atau layanan yang sama karena setiap pemilik blog atau website ingin memiliki tampilan yang berbeda dengan blog yang lainnya. Contohnya adalah tampilan blog Digital Poin ini, meskipun memiliki template atau tema custom yang sama dengan blog-blog yang lainnya yang berasal dari satu pengembang namun tampilan blog ini berbeda dengan yang lainnya.
Baca Juga Template SEO Friendly, Fast Loading, Responsive yang Digunakan Digital Poin
Kenapa tampilan blog atau website dengan pengembang atau menggunakan layanan yang sama memiliki tampilan yang berbeda? Karena adanya editing yang telah dilakukan pada kode CSS dan HTML blog atau website tersebut, baik itu secara keseluruhan atau sebagian. Siapa yang melakukan perubahan tersebut? Tentunya adalah admin atau pengelola blog atau website tersebut. Bagaimana cara melakukan perubahan pada setiap kode CSS atau HTML tersebut? Tentunya dengan cara mempelajari kode CSS dan HTML. Dimana tempat belajar kode CSS dan HTML? Bisa mencarinya di internet atau membacanya di Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar
Dalam penerapannya sendiri, elemen dari setiap kode CSS sebenarnya ditampilkan dalam bentuk HTML. Namun secara visual, kode HTML ini ditampilkan dalam berbagai bentuk seperti teks, ukuran font, berbagai bentuk shape, warna, ukuran gambar, berbagai garis, dan sebagainya. Sehingga kedua bahasa pemograman ini, CSS dan HTML memiliki hubungan yang sangat erat dan tidak bisa dipisahkan.
HTML merupakan bahasa markup yang menampilkan berbagai kode (Style) dari CSS dan CSS adalah bentuk dari setiap tampilan dari HTML. Jadi, CSS tanpa adanya HTML tidak akan bekerja dan HTML tanpa kode CSS tidak akan membentuk sebuah tampilan. Dengan adanya kedua kode pemograman ini, maka akan menentukan tampilan pada website atau blog Anda yang tergantung dari setiap kode yang dibuat.
Jadi untuk menerapkan kode CSS kedalam sebuah blog atau website, maka semua elemen atau tag yang ada di kode CSS harus dimasukkan kedalam markup HTML. Baik itu elemen atau tag yang mengatur warna, font, background, alignment, animasi, video, gambar dan sebagainya yang ada di CSS harus ada di HTML. Bahkan elemen air, tanah, udara dan api bisa dibentuk dengan menggunakan CSS hehehee :)
Meskipun setiap elemen atau tag dari setiap kode CSS memiliki style yang berbeda, namun untuk penerapannya bisa dilakukan pada satu markup HTML. Jadi dengan CSS, Anda bisa menerapkan berbagai style yang berbeda pada satu halaman HTML.
Bagaimana Cara Kerja CSS?
Pada dasarnya semua kode yang ada di CSS menggunakan bahasa Inggris yang ditulis secara sederhana dengan menggunakan syntax tertentu. Apa itu syntax? Syntax itu sama dengan aturan yang terstruktur dalam membentuk sebuah kalimat dalam bahasa apapun, termasuk bahasa pemograman ini, jadi hampir sama dengan grammar namun beda perlakuan.
Misalkan seperti ini, didalam HTML itu tidak ada style yang mengatur elemen karena sudah ada di CSS, jadi HTML ini sebagai markup dari setiap elemen (Tag) yang ada di CSS. Markup sama dengan markah atau tanda. HTML hanya digunakan untuk menampilkan atau mendeskripsikan dari setiap konten yang berbasis pada kode CSS atau tidak.
Contohnya:
Dari contoh diatas, p adalah elemen atau tag yang digunakan pada markup HTML. Namun dalam contoh diatas elemen p (tag p) masih belum diintegrasikan dengan kode CSS sehingga contoh diatas adalam makup HTML yang tidak menggunakan CSS.
Bagaimana jika dari contoh diatas, elemen p atau tag p, menggunakan kode CSS?
Seperti yang telah dijelaskan diatas, struktur CSS menggunakan syntax yang sangat sederhana. Dan masing-masin struktur memiliki selector dan declaration. Selector digunakan pada markup HTML dan declaration memuat berbagai deklarasi pada selector yang dipisahkan menggunakan tanda titik koma dengan menggunakan tanda kurung kurawal.
Contohnya seperti berikut:
Dari contoh diatas adalah bentuk dari CSS yang memiliki struktur sebagai berikut:
Dan hasil tampilannya adalah sebagai berikut:
Dari bentuk contoh CSS diatas adalah contoh baku yang biasa digunakan disetiap kode CSS yang ada di semua template blog atau website. Jadi secara keseluruhan, kode CSS, HTML dan beberapa kode prmograman lainnya seperi Script dan PHP berada dalam satu kode template atau tema.
Sedangkan untuk penggunaan dari Selector, tidak harus menggunakan Selector baku namun bisa juga menggunakan elemen lain, yang terpenting dalam markup HTML tetap menggunakan elemen yang sama. Misalnya seperti contoh diatas selectornya adalah p, p ini bisa diganti dengan elemen lain misalnya pe, pi, hm, xf, dan sebagainya dan untuk markup HTMLnya mengikuti elemen tersebut.
Itu adalah salah satu contoh dasar cara kerja CSS termasuk penggunaannya. Untuk secara global, banyak sekali penggunaan kode-kode CSS dengan berbagai Selector atau Elemen dan berbagai Declaration. Dengan adanya contoh diatas, setidaknya Anda sudah memahami dan mengerti bagaimana cara penggunaan kode CSS.
Untuk penggunaan kode CSS sendiri masih bisa terbagi dalam beberapa bentuk atau style yaitu CSS Inline, CSS External dan CSS Internal. Masing-masing CSS ini memiliki fungsi dan penggunaan yang berbeda dan akan kami bahas pada artikel berkut. Terimakasih telah membaca topik tentang CSS dalam artikel Apa Itu CSS? Pengertian dan Cara Kerja CSS. Semoga bermanfaat.
Baca Juga Template SEO Friendly, Fast Loading, Responsive yang Digunakan Digital Poin
Apa Itu CSS? Pengertian dan Cara Kerja CSS
CSS kependekan dari Cascading Style Sheet merupakan salah satu bahasa pemograman yang terdiri dari beberapa kode yang dibagi dalam setiap elemen dan mengatur tampilan dari setiap elemen tersebut dalam bentuk bahasa markup yaitu HTML. CSS digunakan untuk mengatur dan memisahkan setiap elemen yang berbeda dalam sebuah tampilan sebuah konten meskipun masing-masing elemen memiliki kode yang sama namun dalam penerapannya memiliki tampilan yang berbeda.Dalam penerapannya sendiri, elemen dari setiap kode CSS sebenarnya ditampilkan dalam bentuk HTML. Namun secara visual, kode HTML ini ditampilkan dalam berbagai bentuk seperti teks, ukuran font, berbagai bentuk shape, warna, ukuran gambar, berbagai garis, dan sebagainya. Sehingga kedua bahasa pemograman ini, CSS dan HTML memiliki hubungan yang sangat erat dan tidak bisa dipisahkan.
HTML merupakan bahasa markup yang menampilkan berbagai kode (Style) dari CSS dan CSS adalah bentuk dari setiap tampilan dari HTML. Jadi, CSS tanpa adanya HTML tidak akan bekerja dan HTML tanpa kode CSS tidak akan membentuk sebuah tampilan. Dengan adanya kedua kode pemograman ini, maka akan menentukan tampilan pada website atau blog Anda yang tergantung dari setiap kode yang dibuat.
Jadi untuk menerapkan kode CSS kedalam sebuah blog atau website, maka semua elemen atau tag yang ada di kode CSS harus dimasukkan kedalam markup HTML. Baik itu elemen atau tag yang mengatur warna, font, background, alignment, animasi, video, gambar dan sebagainya yang ada di CSS harus ada di HTML. Bahkan elemen air, tanah, udara dan api bisa dibentuk dengan menggunakan CSS hehehee :)
Meskipun setiap elemen atau tag dari setiap kode CSS memiliki style yang berbeda, namun untuk penerapannya bisa dilakukan pada satu markup HTML. Jadi dengan CSS, Anda bisa menerapkan berbagai style yang berbeda pada satu halaman HTML.
Bagaimana Cara Kerja CSS?
Pada dasarnya semua kode yang ada di CSS menggunakan bahasa Inggris yang ditulis secara sederhana dengan menggunakan syntax tertentu. Apa itu syntax? Syntax itu sama dengan aturan yang terstruktur dalam membentuk sebuah kalimat dalam bahasa apapun, termasuk bahasa pemograman ini, jadi hampir sama dengan grammar namun beda perlakuan.
Misalkan seperti ini, didalam HTML itu tidak ada style yang mengatur elemen karena sudah ada di CSS, jadi HTML ini sebagai markup dari setiap elemen (Tag) yang ada di CSS. Markup sama dengan markah atau tanda. HTML hanya digunakan untuk menampilkan atau mendeskripsikan dari setiap konten yang berbasis pada kode CSS atau tidak.
Contohnya:
<p>Ini adalah paragrap pertama</p> <p>Ini adalah paragrap kedua</p>
Dari contoh diatas, p adalah elemen atau tag yang digunakan pada markup HTML. Namun dalam contoh diatas elemen p (tag p) masih belum diintegrasikan dengan kode CSS sehingga contoh diatas adalam makup HTML yang tidak menggunakan CSS.
Bagaimana jika dari contoh diatas, elemen p atau tag p, menggunakan kode CSS?
Seperti yang telah dijelaskan diatas, struktur CSS menggunakan syntax yang sangat sederhana. Dan masing-masin struktur memiliki selector dan declaration. Selector digunakan pada markup HTML dan declaration memuat berbagai deklarasi pada selector yang dipisahkan menggunakan tanda titik koma dengan menggunakan tanda kurung kurawal.
Contohnya seperti berikut:
p {
color: red;
font-weight: bold;
text-align: center;
font-size: 16px;
}Dari contoh diatas adalah bentuk dari CSS yang memiliki struktur sebagai berikut:
- p adalah Selector (atau bisa disebut juga sebagai Elemen/Tag)
- color: blue;text-weight: bold;text-align: center;font-size: 16px; adalah Declaration
- color, text-weight, text-align,dan font-size adalah Property
- bold, center, dan 16px adalah Value.
<p>Ini adalah paragrap pertama</p>
Dan hasil tampilannya adalah sebagai berikut:
Dari bentuk contoh CSS diatas adalah contoh baku yang biasa digunakan disetiap kode CSS yang ada di semua template blog atau website. Jadi secara keseluruhan, kode CSS, HTML dan beberapa kode prmograman lainnya seperi Script dan PHP berada dalam satu kode template atau tema.
Sedangkan untuk penggunaan dari Selector, tidak harus menggunakan Selector baku namun bisa juga menggunakan elemen lain, yang terpenting dalam markup HTML tetap menggunakan elemen yang sama. Misalnya seperti contoh diatas selectornya adalah p, p ini bisa diganti dengan elemen lain misalnya pe, pi, hm, xf, dan sebagainya dan untuk markup HTMLnya mengikuti elemen tersebut.
Itu adalah salah satu contoh dasar cara kerja CSS termasuk penggunaannya. Untuk secara global, banyak sekali penggunaan kode-kode CSS dengan berbagai Selector atau Elemen dan berbagai Declaration. Dengan adanya contoh diatas, setidaknya Anda sudah memahami dan mengerti bagaimana cara penggunaan kode CSS.
Untuk penggunaan kode CSS sendiri masih bisa terbagi dalam beberapa bentuk atau style yaitu CSS Inline, CSS External dan CSS Internal. Masing-masing CSS ini memiliki fungsi dan penggunaan yang berbeda dan akan kami bahas pada artikel berkut. Terimakasih telah membaca topik tentang CSS dalam artikel Apa Itu CSS? Pengertian dan Cara Kerja CSS. Semoga bermanfaat.
