PENGERTIAN CSS
CSS (
Cascading Style Sheet) adalah salah satu bahasa desain web (
style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(
markup laguage.
Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML,
tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk
SVG dan XUL bahkan ANDROID.
PERINTAH-PERINTAH:
Cara Kerja
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari
font,
warna, dan format-format lain untuk memformat atribut sebuah halaman
web yang kita buat. Tiap style memiliki dua buah elemen dasar yaitu
“selector” dan “declaration”.
Sebuah selector biasanya adalah tag HTML, sementara declaration adalah satu atau beberapa perintah /
nilai
dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector.
Declaration ini biasanya di tandai dengan tanda kurung kurawal “{ }” ,
dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang
lain dengan menggunakan titik-koma “;” seperti terlihat pada contoh
berikut :
< style type="text/css">
.teks {font-family:verdana; color:blue;}
< /style>
Disini terlihat bahwa .teks adalah selector, dan {font-family:verdana; color:
blue;} adalah declaration.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah
tempat yang sama dalam isi dokumen HTML atau dibuat diluar dokumen HTML
yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML.
Anda hanya menunjuk pada selector-selector dimana akan mengaktifkan
sebuah style yang anda inginkan.
Hal yang paling umum dalam
memasukkan
kode Style CSS dengan menggunakan tag < style type=”text/css”>.
Tag < style type=”text/css”> ini selalu tampil dalam bagian <
head> dan sebelum < /head> dari dokumen anda seperti terlihat
pada contoh berikut :
< html>
< head>
< style type="text/css">
... aturan-aturan css ...
< /style>
< /head>
< body>
... Dokumen html yang akan diberikan aturan CSS ...
< /body>
< /html>
Untuk menentukan font dan warna-warna tiap kali anda memulai sebuah
cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal
menunjuk ke style dalam cell table anda. Bandingkan contoh dari sebuah
table berikut yang dibuat menggunakan HTML sederhana :
< html>
< head>belajar css
< /head>
< body>
< table>
< tr>< td bgcolor="red" align="center">
< font face="verdana" color="blue">belajar css1
< /font>< /td>< /tr>
< /table>
< /body>
< /html>
Bandingkan jika dokumen tersebut dibuat dengan menggunakan CSS
(dengan menganggap bahwa sebuah selector yang dipanggil “teks” telah
ditetapkan yang akan mengatur format teks dokumen html tersebut).
< html>
< head>< title>belajar css< /title>
< style type="text/css">
.teks { background-color:red; color:blue; font-family:verdana;}
< /style>
< /head>
< body>
< table>
< tr>< td class="teks">belajar css1< /td>< /tr>
< /table>
< /body>
< /html>
Penempatan CSS
Menempatkan style CSS dalam dokumen web yang kita buat dalam bahasa html
dapat dilakukan dengan beberapa cara dan tingkatan yang berbeda sesuai
dengan keinginan kita. Cara penempatan dalam HTML adalah dengan
menggunakan beberapa cara, diantaranya adalah menggunakan Inline Style,
Internal Style, External style, dan juga teknik Importing dengan
Internal Style.
Inline Style
Adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk
dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada
pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk
memformat seluruh elemen dalam dokumen web. Contohnya adalah sebagai
berikut :
< html>
< head>
< title>belajar css< /title>
< /head>
< body>
< font style="arial; font-family:Arial; font-size: 20px; background-color:yellow">Penerapan Inline Style < /font>
< /body>
< /html>
Dalam script di atas dapat diketahui bahwa style tersebut memiliki
nama style arial yang memiliki nilai atau value untuk style tersebut.
Adapun nilai style adalah jenis font arial dengan ukuran 20 pixel dan
memiliki warna latar kuning.
Internal Style
Pada teknik ini, style CSS diletakkan pada tengah tag antara tagdan.
Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan
pada suatu tempat maupun untuk keseluruhan situs. Contoh dari teknik ini
terlihat pada contoh berikut :
< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- .teks {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px; color: white; background-color: blue;} -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Internal Style
< /body>
< /html>
Maksud dari < !– aturan css –> diatas adalah berguna agar browser yang tidak mendukung CSS tidak
menampilkan
perintah-perintah CSS, jadi perintah CSS didalam < !– –> akan
dianggap sebagai komentar HTML biasa dan tidak akan ditampilkan dalam
browser walaupun browser tersebut mendukung CSS.
Import Style
Dengan teknik ini sebuah Style tidak disimpan pada halaman tersebut,
namun untuk menghubungkannya dengan halaman web yang kita buat digunakan
perintah import yang terdapat pada style CSS. Seperti terlihat pada
contoh berikut :
< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- @import url (http://www.nama_situs.com/style.css); -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Import Style< /div>
< /body>
< /html>
Pada teknik diatas, dokumen HTML akan mengambil atau import style CSS
untuk dipergunakan dalam dokumen tersebut. Dimana pada contoh diatas
dokumen akan mengimport
file style dengan nama style yang berekstensi CSS pada alamat url http://www.nama_situs.com dengan menggunakan perintah :
@import url (http://www.nama_situs.com/style.css);
External Style
Dengan menggunakan teknik ini kita dapat memanggil style CSS pada file
CSS yang kita inginkan dengan menggunakan perintah “Link rel” yang
berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan
nama yang telah kita tentukan seperti terlihat pada contoh :
< link rel="stylesheet" type="text/css" href="style.css
Dalam contoh diatas kita menghubungkan sebuah dokumen html dengan
sebuah style eksternal dengan nama style.css yang telah kita buat
sedemikian rupa sehingga style tersebut dihubungkan untuk memformat
tampilan dalam dokumen html tersebut.
Dalam mengimport file CSS, kita dapat langsung mengimport beberapa file
CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen kita
seperti terlihat pada contoh berikut :
< link rel="stylesheet" type="text/css" href="style1.css">
< link rel="stylesheet" type="text/css" href="style2.css">
< link rel="stylesheet" type="text/css" href="style3.css">
Atau kita dapat menggunakan perintah :
< style>
< !-- @import url(style1.css); @import url(style2.css); @import url(style3.css); -->
< /style>
Perbedaan dalam teknik terakhir adalah perintah import tersebut akan
mengambil style CSS dengan cara import style dari alamat url yang kita
tentukan. Cara ini lebih efisien dikarenakan dokumen yang kita beri
perintah import tersebut hanya akan mengimport file css yang pada
akhirnya, style CSS tersebut hanya perlu di
download
sekali saja dalam dokumen style sheet eksternal yang terpisah dengan
dokumen HTML asli. Ketika surfing ke dalam situs anda maka CSS akan
disembunyikan dalam
komputer
user sehingga akan memperkecil ukuran file sebuah situs yang kita buat.
Jadi jika anda menggunakan cara terakhir ini, maka sebelumnya anda
harus membuat sebuah dokumen style CSS eksternal tersebut dengan
ekstensi .css dimana dokumen style tersebut berisi aturan yang akan
mengatur tampilan dokumen web yang dibuat
STRUKTUR CSS
Dalam pembuatan dokumen web menggunakan style CSS di kenal adanya aturan
atau struktur penulisan baku agar style CSS yang kita buat tersebut
dapat ditampilkan dengan baik dalam dokumen web yang dibuat. Contoh :
< html>
< head>
< title>HTML Selector< /title>
< style type=”text/CSS”>
< !– p {font-family: verdana;} –>
< /style>
< /head>
< body>
< p> penggunaan HTML Selector dalam CSS < /p>
< /body>
< /html>
Pada contoh diatas dipergunakan tag HTML < p> sebagai selector dan setiap huruf yang berada diantara tag < p>
dan < /p> akan memiliki jenis font verdana sesuai dengan value atau nilai yang diberikan dalam property style tersebut.
Selector
Jika dalam HTML kita mengenal adanya tag-tag yang menyusun sebuah
dokumen HTML, maka dalam CSS kita juga mengenalnya dengan sebutan
selector. Selector adalah nama-nama yang diberikan untuk style-style
yang berbeda baik itu style internal maupun eksternal. Dalam style
tujuan, anda harus menentukan bagaimana tiap selector seharusnya bekerja
yang dinamakan properties di dalam tanda { } (curly bracket) yang dapat
memiliki nilai berupa font, warna dll, kemudian dalam body di halaman
web anda, anda arahkan ke selector-selector ini untuk mengaktifkan style
tersebut.
Karena CSS memiliki aturan tersendiri dalam penulisan sintaknya dalam
CSS, dan penulisan sintak tersebut terbagi ke dalam tiga bagian yaitu :
Selector, Property, dan Value. Sebagai penjelas coba perhatikan contoh
berikut :
Selector {property: value;}
Selector dalam CSS adalah elemen yang akan didefinisikan dalam style
CSS, sedangkan elemen ini dapat berupa tag HTML maupun Class. Sedangkan
Property dalam CSS adalah atribut yang berfungsi untuk mendefinisikan
Selector, sedangkan Value adalah nilai atau harga dari sebuah Property.
Sebagai contoh :
< html>
< head>
< style type="text/css">
B.besar {
color:red; font-size:15px; font-family:arial;
}
< /style>
< /head>
< body>
< b>ini adalah huruf besar dengan html
< b class="besar">ini adalah huruf besar dengan CSS
< /body>
< /html>
Class Selector
Digunakan untuk menentukan style yang dapat digunakan tanpa menentukan
lagi tag HTML sederhana. Penulisan class adalah dengan menggunakan tanda
titik atau dot. Selain aturan penulisan diatas, CSS juga mengenal Class
Selector dimana dalam elemen yang sama kita dapat menerapkan lebih dari
satu style. Adapun contohnya adalah sebagai berikut
< html>
< head>
< title>Class Selector< /title>
< style type="text/CSS">
< !-- f.times {font-family: times;} f.verdana {font-family: verdana;} .courier {font-family: "courier";} -->
/style>
< /head>
< body>
< f class="times"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf times new roman
Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf verdana< /f>< br />
< f class="courier"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf courier< /f>
< /body>
< /html>
Pada contoh diatas, tag f memiliki 2 class yang berbeda untuk
memformat paragraf yaitu .times dan .verdana dikarenakan tag class
.times dan .verdana adalah class yang dimiliki oleh tag f maka ia hanya
dapat dikenakan pada elemen f saja. Lain halnya dengan class .courier,
ia dapat dipergunakan oleh semua elemen tanpa harus menggunakan tag f di
awal dan akhir elemen yang akan di format.
Nama untuk tiap class dapat berbeda-beda, Anda dibebaskan menentukan
nama class sendiri, namun ada baiknya memilih nama dari tiap class yang
mengacu kepada fungsi dari class tersebut. Hal ini ditujukan agar anda
tidak bingung mempergunakan class pada saat menggabungkannya ke dalam
tag HTML. Contoh :
< p class="blog"> Ini teks untuk paragraph pada blog < /p>
< p class="menukiri"> Ini teks untuk paragraph pada menu kiri < /p>
Id Selector
ID selector digunakan untuk menentukan style yang berhubungan dengan
objek-objek dengan sebuah ID yang unik. Berbeda dengan Class Selector
yang dapat kita pergunakan pada berbagai tag, ID Selector ini memiliki
sifat-sifat yang berbeda. ID selector hanya dapat dipergunakan pada satu
elemen saja pada setiap halaman web yang kita buat. ID Selector
menggunakan tag # (kres) sebelum menggunakan nama Selector. Adapun
contohnya adalah sebagai berikut :
#helvetica {font-family: Helvetica;}
Dalam penerapannya pada tag HTML, Anda dapat menggunakan aribut <
span> ataupun < div>, seperti terlihat pada contoh berikut :
< span id="helvetica">Ini adalah huruf helvetica< /span>
< div id=”helvetica”>Ini adalah huruf helvetica< /div>
Adapun penulisan dalam dokumen dapat dituliskan seperti pada contoh berikut :
< html>
< head>
< title>ID Selector< /title>
< style type="text/CSS">
< !-- #times {font-family: times;} #verdana {font-family: verdana;} #courier {font-family: "courier";} -->
< /style>
< /head>
< body>
< div id="times"> Ini adalah Contoh penggunaan id sebagai
selector, setiap huruf memiliki huruf times new roman< /div><
br>
< div id="verdana"> Ini adalah Contoh penggunaan id sebagai
selector, setiap huruf memiliki huruf verdana< /div>< br>
< div id="courier"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier< /div>
< /body>
< /html>
Selain yang dijelaskan diatas, dalam CSS kita juga mengenal adanya
Pewarisan (inheritance), Pseudo Classes, Pseudo-Element, dan
Selectors-Kontekstual (Contextual Selector).
Pewarisan / Inheritance
Yang dimaksud pewarisan atau inheritance disini adalah satu kondisi
dimana bagian-bagian HTML dalam dokumen kita yang kekurangan dalam
spesifikasi aturan CSS dapat mengikuti atau dibuat menurut aturan CSS
yang menutupinya. Setiap aturan yang tidak ada dalam format huruf yang
dibuat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap
akan mempengaruhi huruf yang ada didalam kurungan CSS.
< html>
< head>< title>inheritance< /title>
< style type="text/css">
B {background-color : green; color : white;}
< /style>
< /head>
< body>
< B>belajar membuat web dengan < fontsize="+1">< em>CSS< /em>< /font> sangatlah mudah. < br>
hanya dengan program notepad pun jadi.< /B>
< /body>
< /html>
Jika dilihat dari contoh diatas dapat dilihat bahwa tag < B>
dalam aturan CSS akan mendefinisikan warna font dan warna latar dari
font sedangkan tag < B> dalam HTML bisa diartikan sebagai bold
atau format untuk menebalkan huruf. Sedangkan tag < font> yang
berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi
tetap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan
CSS yang melingkupinya. Cara ini dapat anda gunakan untuk dikombinasikan
lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dalam
dokumen anda.
Pseudo Classess
Pseudo classes dalam CSS dibuat tebal dalam selector-selector untuk
menentukan sebuah statemen atau relasi selector, dan penulisannya hanya
dipisahkan dengan sebuah tanda titik dua : diantara selector dan pseudo
class. Adapun contoh format penulisannya adalah :
selector:pseudo class { property: value; }
Banyak format CSS yang tidak didukung oleh kebanyakan browser, namun
terdapat empat pseudo classes yang dapat digunakan secara aman ketika
diaplikasikan kedalam
hyperlink atau link, yaitu :
- link : untuk tampilan sebuah link yang belum dikunjungi.
- visited : untuk tampilan sebuah link ke halaman yang telah dikunjungi.
- active : untuk tampilan sebuah link yang sedang aktif (ketika di klik).
- hover : untuk tampilan sebuah link yang hover (ketika cursor melintas diatasnya).
Contoh penggunaan :
a.budi:link {color:blue;}
a.budi:visited {color:purple;}
a.budi:active {color:red;}
a.budi:hover {text-decoration:none; color:blue; background-color:yellow;}
Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link.
Pseudo Element
Pseudo element dalam CSS ditempatkan dalam sebuah selector sama seperti
pada pseudo classes, penulisannya akan seperti contoh berikut :
selector:pseudoelement {property: nilai;}
Contoh setting huruf dan baris pertama :
Pseudo element pada huruf pertama di aplikasikan elemen dari huruf
pertama dan baris pertama pada atas baris sebuah elemen. Anda dapat
membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan
menggunakan perintah berikut :
p:first-letter {font-size:5px; float:left;}
p:first-line {font-weight:bold;}
Before dan Ater
Pseudo element before dan after digunakan dengan property content untuk
menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari
property content ini dapat berupa open-quote, close-quote,
no-open-quote, no-close-quote, berbagai string yang disertakan dalam
tanda kutip atau berbagai image
gambar menggunakan url(nama image) seperti contoh berikut :
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
li:before {content: "POW: "}
p:before {content: url(images/gambar.jpg)}
Selector Kontekstual
Selektor Kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan
kondisional dimana deklarasi dalam Style-Sheet CSS yang ada akan
berpengaruh jika menemui kondisi atau keadaan tertentu. Contoh dari
selector kontekstual adalah :
< html>
< head>
< title>selector kontekstual < /title>
< style type="text/css">
b em {font-family: verdana; background: blue; color: white; }
< /style>
< /head>
< body>
< b>
belajar membuat web dengan < em>CSS< /em>sangatlah mudah < br>
< /b>
< em>hanya dengan program notepad pun jadi< /em>
< /body>
< /html>
Dalam contoh diatas dapat dilihat bahwa dokumen web tersebut akan
menerapkan style CSS tersebut pada dokumen yang berada dalam tag <
em> (font verdana, warna latar biru dan font berwarna putih) dimana
tag < em> tersebut berada di dalam tag < b> dan
(bold/tebal), sedangkan tag < em> yang berada di luar tag <
b> dan tag < /b> tidak akan terpengaruh dengan setting style
tersebut atau hanya memiliki nilai < em> biasa atau huruf miring.
Shorthand CSS
Spesifikasi dalam CSS, dimana anda harus mengetikkkan aturan-aturan CSS
ke dalam style kadang membuat kita merasa jemu jika harus menuliskan
seluruh aturan-aturan yang panjang tersebut. Teknik seperti ini biasa
disebut dengan Longhand Notation dimana seluruh aturan harus diketikkan
tanpa adanya penyingkatan kata seperti ketika kita menulis sms ke teman
kita.
Namun jika anda menggunakan teknik shorthand CSS dimana dengan
menggunakan teknik ini memungkinkan anda untuk membuat berbagai style
menggunakan sintaks yang lebih singkat yang dikenal dengan shorthand CSS
atau Shorthand Notation. Shorthand CSS memungkinkan anda untuk
menentukan nilai dari beberapa property sekaligus dengan menggunakan
sebuah property tag, contoh adalah pada penggunaan property font yang
memungkinkan anda untuk menentukan property font-style, font-variant,
font-weight, font-size, line-height, dan font-family dalam sebuah baris
sintak. Contoh :
< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
< /style>
< /head>
< body>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>
Jika ditulis dalam shorthand CSS, tag diatas akan terlihat sama seperti :
H1 {font: bold 16pt/18pt Arial}
Sebagai perbandingan adalah pada tag H1 dibawah ini yang menggunakan
sintak longhand CSS (Catatan bahwa property font-variant, font-stretch,
font-size-adjust, dan font-style telah dibuat kedalam nilai default).
Dengan menggunakan shorthand CSS ini memungkinkan anda untuk
menempatkan hanya beberapa nilai saja dari property yang kita inginkan
dalam sebuah style. Penempatan property tersebut dalam dokumen web
diwakili oleh nilai yang dipisahkan dengan spasi.
Sebagai contoh dalam menyingkat penulisan pembuatan layout seperti
margin, padding dan border-width dengan Shorthand CSS kita dapat
menjadikan satu ke dalam margin-top-width, margin-right-width,
margin-bottom-width dan lain sebagainya dalam susunan property seperti
top, right, bottom dan left. Seperti dalam contoh berikut :
p {border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; }
Dapat dibuat menjadi lebih singkat dengan mengunakan shorthand notation sehingga akan menjadi :
p {border-width: 1px 5px 10px 20px; color: red; }
Kemudian untuk property border-width, border-color dan border-style dapat juga dijadikan satu menjadi :
p {border: 1px red solid;}
Cara ini dapat juga di aplikasikan untuk border-top, border-right dan
sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em
10em;), dimana nilai pertama akan menjadi nilai untuk posisi atas dan
posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri
dan kanan. Property yang berhubungan dengan font juga dapat dijadikan
satu dengan mengunakan property font seperti dalam contoh berikut ini
dimana nilai ‘/
1.5′ adalah mengacu pada nilai untuk line-height :
p {font: italic bold 1em/1.5 courier;}
Jika diterapkan dalam dokumen HTML maka akan menjadi :
< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
body {border: 1px red solid;}
p {font: italic bold 1em/1.5 courier;}
H1 {font: bold 16pt/18pt Arial}
< /style>
< /head>
< body>
< p>huruf ini akan tebal dan miring dengan line height 1,5< /p>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>
Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
- Eksternal style sheet
- Internal style sheet
- Inline style
- See more at: http://www.eplusgo.com/css/css-how-to/#sthash.1RQ7uaZH.dpuf
