What is css

Date post:14-Dec-2014
Category:
View:108 times
Download:1 times
Share this document with a friend
Description:
 
Transcript:
  • 1. What Is CSS ???Created By :Phia Meidyana T.

2. Preface Pada kesempatan kali ini, saya akan membahas tentang script CSS. Apakah teman-teman sudah tahu apa itu CSS? Apabila teman-teman sudah mengetahui tentang CSS, tidak ada salahnya kita sedikit merefresh ingatan tentang sejarah dan pengertian CSS. Dan jika teman-teman ada yang belum tahu apa itu CSS, mari kita sama-sama mempelajari apa itu CSS..... 3. What is CSS ?? CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda. 4. The History CSS 1Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tagtag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web. CSS 1 mendukung pengaturan tampilan dalam hal : 1. Font (Jenis ketebalan). 2. Warna, teks, background dan elemen lainnya. 3. Text attributes, misalnya spasi antar baris, kata dan huruf. 4. Posisi teks, gambar, table dan elemen lainnya. 5. Margin, border dan pading. 5. CSS 2 Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 6. CSS 3 Versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, borderradius, drop-shadow, border-image, CSS-Math dan CSS Object Model. Fitur terbaru CSS 3 : 1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight. 2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "WordWrap". 3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan. 7. Sifat-Sifat CSS CSS internal adalah CSS yang ditulis secara langsung didalam halaman web yang disesain.Jika anda membuat dua halaman web yang berstyle sama ,maka dihalaman yang kedua kita juga memasukkan code css yang sama CSS external adalah CSS yang ditulis didalam berkas style.css dan diletakkan ditempat khusus atau bahkan diluar dari situs tersebut. Berkas CSS itu bersxtensi css,bisa di beri nama yang memudahkan untuk diingat,misalnya cssku-page1.css. 8. Pengenalan Dasar Penulisan CSS Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya : Selector Properti Deklarasi Nilai/Values 9. Contoh penulisan code CSS : body {background-color: white;} body adalah sebagai Selector background-color adalah Properti white adalah Nilai/values Deklarasi adalah bagian yang berada didalam "{ }" yaitu properti dan nilaiSelector adalah bagian atau elemen yang ingin kita atur stylenya. Properti adalah komponen yang kita butuhkan Nilai/value adalah nilai dari deklarasi yang kita inginkan 10. Layout Sederhana Dengan Tag

Div merupakan singkatan dari Division yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya, agar mempermudah dalam pememberian style pada setiap bagiannya. Contoh penulisannya
.
Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri, sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari: wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. 11. Berikut contoh layout sebuah web/blog : 12. Contoh Penulisan Script Dengan Tag
13. Berikut hasilnya : 14. Ini adalah salah satu contoh karya web saya menggunakan layout tag
Bisa dilihat di phimey.uphero.com 15. Semoga Bermanfaat ^_^Keep ganbatte (^o^)/
Embed Size (px)
Recommended