• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

13‘11
February

noimg.jpg

Sebelumnya saya telah menulis artikel tentang pengenalan CSS (Cascading Style Sheet) dan bagaimana cara penerapan CSS pada dokumen HTML. Namun artikel yang berjudul Pengertian CSS dan Cara Penerapan CSS pada HTML itu bukan benar-benar untuk para pemula (newbie) yang benar-benar awam dengan dokumen HTML dan CSS. Oleh karena itu disini saya akan melakukan pembahasan lagi khusus untuk para newbie yang baru memulai niatnya untuk bersama-sama belajar mengembangkan website.

CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag <font>, tag atribut warna dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal. Dokumen HTML pada awal dibuat memang tidak di maksudkan untuk memformat dokumen sedemikian rupa, HTML di maksudkan untuk mendefinisikan suatu isi dari dokumen. CSS mulai dikembangkan pada HTML versi 4, semua format tag-tag tadi mulai di hilangkan, di ganti, dan di simpan pada file yang diberi nama CSS secara terpisah dan sekarang semua jenis browser sudah mendukung CSS.

CSS memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya.

Contoh coding CSS adalah sebagai berikut :

h1 { color :blue; font-size:18px; }

  • h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
  • Color merupakan properti CSS
  • blue adalah nilai dari properti CSS
  • Setiap deklarasi atau statement CSS di buat didalam tanda kurawa {   }
  • Setiap properti diakhiri dengan tanda titik koma ;

Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */

/* comment : membuat heading */

h1 { color :blue; font-size:18px; }

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.


selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :

ini paragraph

definisi id diatas pada CSS akan ditulis sebagai berikut :

#parameter {
	text-align:center;
	color:red;
	font-size:12px;
	font-weight:bold;
}

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut:

ini paragraph

ini paragraph

ini link

Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah

	.center {text-align:center;} 

Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi misalnya

ini paragraph

Semua definisi css di bawah akan diterapkan pada tag HTML diatas

.center {text-align:center;} 
.blue {color:blue;}
.largefont{ font-size:18px; }

Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya

p.center {text-align:center;} 
h1.blue {color:blue;}
a#largefont{ font-size:18px; }

Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara External style sheet, Internal style sheet dan Inline style. Lebih lanjut lagi dengan cara penerapan CSS silahkan baca artikel saya yang saya ceritakan di awal : Pengertian CSS dan Cara Penerapan CSS pada HTML. di artikel ini juga ada tutorialnya jadi jangan di lewatkan ya :)

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial Membuat Desain Website Responsif Bagian 1 - Navigasi Menu
  2. Pengertian CSS dan Cara Penerapan CSS pada HTML
  3. CSS 3 untuk border dan background
  4. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  5. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2

Komentar

  • aswadkalam (27 Jun 2014 09:27:26)

    ilmunya sangat bvermanfaat gan
    tp sy masih agak pusing2 sedikit mau belajarnya.

  • aswadkalam (27 Jun 2014 09:26:50)

    ilmunya sangat bvermanfaat gan
    tp sy masih agak pusing2 sedikit mau belajarnya.

  • pemuteran (27 Dec 2013 01:52:19)

    terimakasi pencerahanya maklum saya masih newbe, perlu bnyak belajar dan terus belajar biar lekas bisa buat web....

  • junel (21 Nov 2013 10:07:44)

    Terimakasih infonya gan, semoga bermanfaat untuk saya pelajari.

  • Jenita (30 Oct 2013 11:40:29)

    mas ne saya udah buat desainnya di potoshop. tp tb DW aku gg bisa,

» Muat Komentar Sebelumnya (21 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff