Mengenal Lebih Dalam Tentang CSS - ilmuti.org · bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang

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

http://www.go2pdf.com


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.




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?›




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




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 :




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




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




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.




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


http://id.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.cnplus.biz

http://www.facebook.com/nadi.imazinasi


http://www.linkedin.com/pub/nadi-imazinasi/89/829/3b0

Mengenal Lebih Dalam Tentang CSS - ilmuti.org · bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang

Documents