Dasar-dasar CSS

Dasar-dasar CSS
CSS merupakan singkatan dari Cascading Style Sheet. CSS merupakan salah satu bahasa pemrograman web  yang pada umumnya dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.



CSS dapat mengendalikan bentuk font, margin, padding, warna background, border beserta ukurannya, warna hyperlink, warna active link, visited link, spasi antar paragraf, spasi antar teks, dan parameter lainnya. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.



Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C  pada tahun 1996.



Sekarang mari kita mulai dengan cara penulisan CSS. Perhatikan kode dibawah ini:



h1

{

font-family:arial; /*jenis huruf yang dipakai Arial.*/

font-size:12px;/*ukuran hurufnya*/

color:blue /*warna hurufnya biru, dapat juga di tulis dengan #0000FF */

}




Bagian pertama sebelum tanda '{}' dinamakan selector dalam hal ini adala h1, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua  unsur, yaitu property (font-family,font-size,dan color) dan value (ariel,12px dan blue). Jika terdapat beberapa declaration, maka untuk memisahkan antara yang satu dengan yang lainnya digunakan ';'.



Dalam prakteknya, CSS dapat dituliskan dengan beberapa cara antara lain dengan Cara Inline Style Sheet, Embedded Style Sheet dan Linked Style Sheet.



Contoh penulisan CSS menggunakan Cara Inline Style Sheet:







Inline Style Sheet







Contoh tag P tanpadiformat menggunakan CSS



 



Tag P ini diformat dengan besar font 14px dan warna merah












Style dituliskan langsung pada tag-tag HTML yang bersangkutan dengan dengan menambahkan atribut style="..." dalam tag HTML tersebut. cara ini sebaiknya dihindari karena akan merepotkan kita nantinya apabila style akan dipakai berulang-ulang.



Cara yang kedua adalah dengan Embedded Style Sheet. Perhatikan contoh dibawah ini:







Embedded Style Sheet







Belajar CSS



Belajar CSS










CSS yang ditulis dengan cara ini dapat di pakai berulang kali cukup dengan memanggil selectornya (contoh: h1).



cara yang ketiga adalah dengan Linked Style Sheet, cara ini tak jauh beda penulisannya dengan cara yang kedua. Hanya saja style ditulis pada berkas yang berbeda dengan berkas HTML.



Contoh (file: style.css



h1 {

font-size:18pt;

color:#FF0000

}

p {

font-size:12pt;

font-family:arial;

text-indent:0.5in

}




Contoh file htmlnya (file: belajar.html)







Embedded Style Sheet









Belajar CSS



Belajar CSS












penggunaan cara ini lebih praktis karena style yang dibuat dapat diterapkan di banyak file (misal: belajar.html, belajar1 html,... dst) dan dipakai berulang-ulang.

Lainnya

Solusi Server Apache XAMPP Tidak Bisa Running

Kamis, 12 Juni 2014 | 18:04:22
Buat yang biasa meng Setelah cari-cri di internet, ada banyak solusi yang menyarankan untuk mengganti port:80

Kumpulan Status Facebook

Jumat, 19 April 2013 | 16:43:17
Kumpulan Status Facebook Lucu, Romantis pasti lagi pada dicariin banyak orang nie. Maklum, belakangan banyak y

IMTalk Sarana Tepat Untuk Optimasi Seo Offpage

Selasa, 19 Maret 2013 | 16:14:36
IMTalk.org Sarana Tepat Untuk Optimasi Seo Offpage

Bagaimana Google Mengenali Invalid Click Pada Adsense Anda

Senin, 3 Desember 2012 | 07:47:37
Program periklanan yang banyak digeluti oleh para pengguna yang mencari rejeki diinternet. Situs yang didaftar

Menghapus Tweet Secara Massal

Selasa, 13 November 2012 | 05:52:57
MUNGKIN kita pernah mengalami masa-masa labil dimana kita sering berkicau di twitter dengan update status gala

Memilih Data MySql dengan Dua Kolom 'ORDER BY'

Rabu, 18 Juli 2012 | 07:12:28
Biasanya, dalam sebuah perintah SELECT pada MySql, peng-index-an dibuat berdasarkan satu kolom data saja. Misa

Twitter, Menambah Follower Secara Instant dan Alami

Rabu, 27 Juni 2012 | 07:20:23
Banyak keuntungan yang kita peroleh bila kita memiliki account twitter, terutama untuk para blogger, dimana tw

Mempercepat Booting pada Windows 7

Selasa, 8 Mei 2012 | 04:55:57
Waktu booting yang singkat tentu akan menyenangkan. Percepat waktu booting Windows 7 sobat dengan menambah jum

Bagaimana Menggunakan Font Cantik dari Google Web Font

Sabtu, 14 April 2012 | 04:02:10
Seperti kita ketahui bahwa salah satu daya tarik pengunjung yang datang ke website adalah tampilan dari websit

Apa itu Mode Biner?

Sabtu, 10 Maret 2012 | 02:14:03
Pada postingan sebelumnya, Saya ada membahas mengenai bagaimana cara upload data dari localhos ...

Populer

Apakah Website Anda Sudah Mendukung Mobile Version?

Senin, 2 Mei 2011 | 18:46:47
Sebelum memulai, ada pertanyaan yang harus dijawab.

view: 699284

Backlinks Exchange Otomatis

Minggu, 17 April 2011 | 15:15:10
Ini merupakan Program otomatis Link Exchange gratis untuk semua pengunjung. Anda harus mengetahui betapa penti

view: 664089

Cara Mengirim Email dengan PHP

Rabu, 11 Mei 2011 | 07:47:21
Biasanya jika Anda menyewa sebuah hosting, anda akan diberi fasilitas untuk ...

view: 19547

Kode Negara di Dunia dalam Format MySql

Sabtu, 17 Desember 2011 | 13:39:58
Kode negara (country Code) dimaksudkan untuk mengetahui nama negara dari singkatannya. Biasanya kode negara di

view: 19451

Apakah yang Dimaksud dengan Keyword?

Selasa, 29 Maret 2011 | 16:14:58
Pada postingan kali ini, saya akan membahas tentang

view: 11834

Partisi Harddisk Tidak Terbaca Setelah Install Windows 7

Kamis, 7 Juli 2011 | 07:11:29
Mungkin Anda pernah mengalami apa yang saya alami. Partisi Harddisk Tidak Terbaca ...

view: 11465

URL Rewriting, Agar URL Terlihat Cantik dan Mudah Diingat

Senin, 2 Agustus 2010 | 03:24:59
Buat Anda yang mungkin sudah lama mendalami duni per-website-an mungkin mod_rewrite bukanlah hal yang asing.

view: 8308

Membuat Halaman Refresh Otomatis

Jumat, 12 November 2010 | 02:34:46
Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi

view: 8283

Akhirnya Ada Klik di Google Adsenseku

Jumat, 1 April 2011 | 01:41:41
Setelah beberapa minggu account adsense saya di

view: 8162

Cara Submit Website ke Search Engine

Minggu, 3 April 2011 | 12:50:34
Apabila saat ini kamu sedang mengembangkan sebuah website, tentunya website tersebut hanya kamu saja yang tahu

view: 8050
find at facebook follow on twitter YM RSS FEED
Sitemap:
home | contact | RSS | portofolio | php | javascript | tutorial | MySql | Ajax | web development | web design | webmaster | graphic design | printing design | website consultant | internet | bisnis internet | earn money | pay pal | alert pay | marketing online | viral marketing | ping service | jasa pembuatan website | jasa seo | auto ping | backlink | ping services
Privacy Policy | Discalimer | DMCA | Contact Us DMCA.com Protection Status

copy right 2008-2017 www.arieweb.net
Free counters!