Pengertian CSS dan Kumpulan Tag-nya

Assalamu’alaikum Wr. Wb.

A. PENDAHULUAN

          Welcome to my blog, kali ini saya akan membagikan sedikit informasi tentang bagaimana cara memahami pemrograman dasar CSS (Cascading Style Sheet).

B. LATAR BELAKANG

          Untuk 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.

C. MAKSUD DAN TUJUAN

          Untuk membedakan konten dari dokumen dan dari tampilan dokumen lain oleh karena itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting.

D. ALAT DAN BAHAN

          - Laptop

          - Charger laptop

          - Aplikasi Sublime text

E. WAKTU YANG DIBUTUHKAN

          Kurang 3 jam

F. PEMBAHASAN

          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.

Cara menambahkan atau menggabungkan contoh "index.html" dengan link "style.css" seperti berikut:

<link rel="stylesheet" type="text/css" href="style.css">

Terus buat lembar baru atau dokumen baru pada sublime text atau aplikasi progaraming lainnya dengan nama folder seperti "style.css" dan hal yang penting adalah harus menggunakan format .css .

JIka tidak maka akan hasinya seperti catatan biasa.

Berikut adalah beberapa syntax pada layer style background :

• background : background elemen yang mewakili beberapa properti backgound lainnya

• background-color : untuk menjadi warna pada latar belakang

• background-image : untuk mengatur gambar pada latar belakang

• background-size : untuk mengatur ukuran pada latar belakang

• background-position : untuk mengatur kontrol posisi pada latar belakang

• background-attachment : untuk mengatur kontrol scroling pada latar belakang

• background-repeat : untuk mengatur kontrol pengulangan pada latar belakang

Berikut  adalah beberapa syntax pada layer style font :

• font-family : untuk menjadi jenis font

• font- size : untuk mengatur ukuran font

• font-style : untuk mengatur jenis style font

• font-weight : untuk mengatur ketebalan font

• font-transform : untuk mengatur besar kecilnya pada font

Berikut adalah beberapa syntax pada layer style text :

• text-decoration : untuk menampilkan beberapa style text

• text-transform : menampilkan text huruf besar

• text-align : untuk mengatur kontrol posisi pada text

• text-overflow : untuk mengtur tampilan paragraf pada text

• text-shadow : untuk menambah bayangan pada text 

Berikut adalah beberapa syntax pada layer style link :

• a link : keadaan pada awal link

• a hover : keadaan pada link saat dikenai kursour mouse

• a active : keadaan pada link saat diklik

• a visited : keadaan pada link setelah dikunjungi

Berikut adalah beberapa syntax pada layer style position :

• static : elemen yang muncul pada aliran dokumen

• absolute : unsur diposisikan pada relatif

• fixed : unsur diposisikan pada relatif terhadap jendela browser

• relative : unsur diposisikan pada relatif terhadap posisi normal/ rata

• inherit : nilai dari properti posisi diwariskan pada elemen indux

Berikut adalah beberapa syntax pada layer border :

• border-radius : garis melengkung pada semua sisi

• border : ukuran border bisa diubah dalam ukuran pixel (solid,dotted)

Berikut adalah beberapa syntax pada layer style jarak :

• margin : untuk mengatur seleksi batas jarak luar

• padding : untuk mengatur seleksi batas jarak dalam

• width : untuk mengatur jarak lebar

• height : untuk mengatur jarak tinggi

G. HASIL YANG DI DAPATKAN

         Mampu memahami konsep dasar dari sebuah bahasa pemrograman CSS dan dapat memperaktek dalam pembuatan sebuah web.

          

H. KESIMPULAN

          Setelah memahami konsep dasar dari bahasa pemrograman CSS kita dapat menerapkan atau memperaktekkan dalam pembuatan sebauh web dan lain-lain.

I. REFERENSI

          https://gilacoding.com/read/properti-properti-yang-digunakan-pada-css

J. PENUTUP

          Demikian yang bisa saya sampaikan, semoga artikel dapat bermanfaat bagi anda dan apabila ada kesalahan kata atau tutur/tata bahasa yang kurang berkenan saya mohon maaf.

Wassalamu’alaikum Wr. Wb.