what is css

15
What Is CSS ??? Created By : Phia Meidyana T.

Upload: eris-dwi-septiawan-rizal

Post on 14-Dec-2014

138 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: What   is   css

What Is CSS ???

Created By :

Phia Meidyana T.

Page 2: What   is   css

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

Page 3: What   is   css

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.

Page 4: What   is   css

The HistoryCSS 1Pada 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 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.

Page 5: What   is   css

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.

Page 6: What   is   css

CSS 3Versi 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, border-radius, 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 "Word-Wrap".3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Page 7: What   is   css

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.

Page 8: What   is   css

Pengenalan Dasar Penulisan CSS

Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya :

• Selector• Properti • Deklarasi• Nilai/Values

Page 9: What   is   css

Contoh penulisan code CSS :

body {background-color: white;}

body adalah sebagai Selectorbackground-color adalah Propertiwhite adalah Nilai/values

Deklarasi adalah bagian yang berada didalam "{ }" yaitu properti dan nilai

Selector adalah bagian atau elemen yang ingin kita atur stylenya.Properti adalah komponen yang kita butuhkanNilai/value adalah nilai dari deklarasi yang kita inginkan

Page 10: What   is   css

Layout Sederhana Dengan Tag <div>

• 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 <div>….</div>

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

Page 11: What   is   css

Berikut contoh layout sebuah web/blog :

Page 12: What   is   css

Contoh Penulisan Script Dengan Tag <div>

Page 13: What   is   css

Berikut hasilnya :

Page 14: What   is   css

Ini adalah salah satu contoh karya web saya menggunakan layout tag <div>

Bisa dilihat di phimey.uphero.com

Page 15: What   is   css

Semoga Bermanfaat ^_^

Keep ganbatte \(^o^)/