Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Mengenal Lebih Dalam Tentang [email protected]
AbstrakBanyak website – website menampilkan layout atau design yang menarik sehingga mata
kita merasa takjub dengan keidahan website tersebut, bagaimana cara membuat hal
seperti itu ? disini kita akan “Mengenal Lebih Dalam Tentang CSS” yang dimana CSS
merupakan hal dasar dalam membentuk sebuah website.
Kata Kunci:Pemrogramman, CSS, Web Design
PendahuluanCascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images,
dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas
(file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warnahyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya
CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pembahasan
Syntax CSS
CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi (
Declaration ).
Selector adalah HTML element yang ingin dibuat style nya.
Declaration merupakan isi dari property dan nilai dari CSS.
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan
titik koma ( ; )
Contoh CSS
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi
dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}
CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita
mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS ID dan Class
Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id
pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan
style bawah ini akan diterapkan pada elemen dengan id = “para1?›
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja
pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda
dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen .
Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan
class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat
rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh
kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah
:
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet
Explorer.
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Cara CSS
Tiga Cara untuk Insert CSS :
1.Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat
mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke
style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus
disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20
px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki
gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan
menggunakan tag style seperti ini :
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan
keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan.
Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin
kiri paragraf :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet
Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang
berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
contoh style sheet eksternal untuk pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3
akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti
oleh internal style sheet.
Beberapa Styles Akan Cascade ke Satu :
gaya dapat ditentukan :
didalam sebuah elemen HTML
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
didalam bagian kepala halaman HTML
didalam sebuahj file CSS eksternal
Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi
lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki
prioritas tertinggi:
Browser default
Eksternal style sheet
Internal style sheet (di bagian kepala)
Inline style (di dalam elemen HTML)
Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang
berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau
dalam style sheet eksternal , atau dalam browser (nilai default).
nb: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head>
HTML, style sheet eksternal akan menimpa style sheet internal!
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan dan
mengembangkan CSS, sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web.
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Referensi
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://tutorial.belajarweb.net/css/tutorial-css-dasar.html
BiografiLulus SMK pada tahun 2011 dari jurusan Rekayasa Perangkat Lunak
(RPL) di SMK YUPPENTEK-2 Curug, Tangerang dan sekarang sedang
menjalani kuliah S1 di STMIK Raharja. Menyukai bidang programming
seperti web based application dalam bahasa pemrograman seperti bahasa
Hypertext Multi Language (HTML), Cascading Style Sheet (CSS), Hypertext
Preprosesor (PHP) dan Javascript. Database application yang sering digunakan adalah
MySQL. Selain itu, tertarik juga pada design web templates menggunakan aplikasi
Adobe Photoshop. Saat ini bekerja sebagai IT Media di PT.Formcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (www.cnplus.biz).
Facebook.com : https://www.facebook.com/nadi.imazinasi
Twitter.com : https://twitter.com/nadi_imazinasi
Plus.google.com : https://plus.google.com/104521597026029479453/posts
Linkedin.com : http://www.linkedin.com/pub/nadi-imazinasi/89/829/3b0
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Top Related