Belajar Cara Penunilsan CSS


Assalammu'alaikum wr. wb.

Pengertian :
CSS (Cascading Style Sheet) merupakan bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari html seperti elemen dan tag. Dengan menggunakan css kita dapat mengatur ukuran, warna, dan bentuk dari element html. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat dilakukan menggunakan css untuk mempercantik atau menedesign halaman website. Belajar CSS Dasar Cara Penulisan CSS.

CSS menggunakan selector(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan diberi sentuhan css. Jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut. Ada tiga teknik metode penulisan CSS, yaitu :
  • Inline CSS Style
  • Internal CSS Style
  • External CSS Style

Maksud dan tujuan :
CSS dapat dikatakan dokumen yang berisi style untuk mengatur tampilan suatu halaman website agar lebih menarik dan interaktif dengan tujuan menrik minat pengunjung. Para desainer web menggunakan css untuk merapikan tampilan  website agar lebih menarik dan interaktif, dengan mengubah elemen tag html seperti huruf, teks, background dan gambar.

Alat dan bahan :
  • PC/laptop
  • Text Editor
Fungsi dan kegunaan :
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.

Untuk mendesign font dapat dilakukan dengan mendefinisikan font, untuk mengatur warna bisa menggunakan color, margins digunakan untuk mengatur jarak pada luar element tertentu. Mengatur warna atau gambar latar belakang bisa menggunakan background. Mengatur ukuran font gunakan font size, jenis font menggunakan font-family dan masih banyak lagi.

 Teknik penulisan :

> Inline CSS Style
Teknik penulisan pertama yaitu dengan inline style adalah teknik penulisan syntax css yang tidak memerlukan selector (id dan class) sehingga syntax css diletakkan atau langsung disisipkan pada element html syntax css diletakkan di dalam atribut style="."




> Internal CSS Style
Teknik penulisan syntax css dengan internal style adalah teknik penulisan syntax css yang diletakkan satu file dengan file html atau php. Syntax css diletakkan di dalam tag <style> dan diakhiri dengan </style>. Dan biasanya diletakkan pada bagian tag <head> pada html.

  

 

Perhatikan contoh penulisan css internal style diatas. Style diatas. Syntax css diletakkan satu file dengan file html. Syntax css diletakkan dalam tag <style> dan di bagian tag <head>. Syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. Pada contoh diatas kita memberi jarak sebesar 10px atau 1-pixel. CSS memanggil selector class dengan tanda titik "." dan memanggil selector id dengan tanda pagar "#".

>External CSS Style
Teknik penulisan syntax css dengan external style adalah teknik penulisan yang memisahakan file css dan html. Penggunaan css yang baik adalah menggunakan teknik penulisan ini agar kode program kita tidak berantakan krena syntax css disimpan pada file css. File css dan html dihubungkan menggunakan 
<link rel="stylesheet" type="text/css" href="file css anda">
Buat file html, dan masukkan script :


Buat css, dan masukkan script :

Dan ini adalah hasilnya :


Referensi :

Sekian dan terima kasih

Wassalammu'alaikum wr. wb.
SHARE

IKA NOVITA FATMAWATI

Hai, selamat datang di blog saya. Di blog ini saya berbagi tentang materi apa pun, misalnya : tentang instalasi cms open source. Semoga dalam isi blog ku ini bisa membantu kalian semua yang telah mengunjungi blog saya ini. Terima Kasih sudah mengunjungi blog saya.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

www.lowongankerjababysitter.com www.lowongankerjapembanturumahtangga.com www.lowonganperawatlansia.com www.lowonganperawatlansia.com www.yayasanperawatlansia.com www.penyalurpembanturumahtanggaku.com www.bajubatikmodernku.com www.bestdaytradingstrategyy.com www.paketpernikahanmurahjakarta.com www.paketweddingorganizerjakarta.com www.undanganpernikahanunikmurah.com