Anda di halaman 1dari 22

CSS Pendahuluan

Apakah CSS?

CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen Styles umumnya disimpan dalam Style Sheets Styles ditambahkan pada HTML 4.0 untuk menyelesaikan persoalan External Style Sheets dapat menghemat waktu Anda External Style Sheets disimpan dalam file CSS Definisi Multiple style adalah melakukan cascade (bertingkat) ke style lain

Style Memecahkan Persoalan Umum


Tag HTML pada awalnya dirancang untuk mendefinisikan konten dokumen. Tag-tag ini dimaksudkan untuk mengatakan "Ini adalah header", "Ini adalah paragraf ", "Ini adalah tabel", dengan menggunakan tag-tag seperti <h1>, <p>, <table>, dan lainnya. Layout (tata letak) dokumen dianggap itu urusannya browser, tanpa menggunakan tag-tag pemformatan. Browser kemudian menambahkan tag dan atribut baru (seperti <font> dan atribut color) kepada spesifikasi HTML awal. Hal ini menjadi lebih sulit untuk menciptakan situs Web dimana konten dokumen HTML secara jelas dipisahkan dari layout presentasi dokumennya. Untuk mengatasi persoalan ini, World Wide Web Consortium (W3C) merespon dengan membuat standar HTML maka diciptakan STYLE sebagai tambahan pada HTML 4.0. Sekarang kebanyakan browser mendukung Cascading Style Sheet.

Style Sheet Dapat Menghemat Waktu Kerja


Styles sheets mendefinisikan BAGAIMANA elemen HTML ditampilkan, untuk menggantikan tag font dan atribut color dalam HTML 3.2. Style umumnya disimpan dalam file .css terpisah. Style sheet external mengijinkan Anda untuk mengubah kemunculan dan layout dari seluruh halaman dalam Web, hanya dengan mengedit satu dokumen CSS. CSS adalah terobosan dalam perancangan Web karena ia mengijinkan pengembang mengontrol style dan layout satu kali dari sejumlah halaman Web. Anda dapat mendefinisikan style untuk setiap elemen HTML dan menggunakannya untuk banyak halaman Web selama Anda inginkan. Untuk membuat perubahan global, secara sederhana ubah style, dan semua elemen dalam Web akan di update secara otomatis.

Multiple Style akan meng-Cascade kedalam Style Lain


Style sheet mengijinkan informasi style dikerjakan dengan beberapa cara. Style dapat diletakkan didalam sebuah elemen HTML, didalam elemen <head> pada halaman HTML, atau dalam file CSS eksternal. Bahkan sejumlah style sheet eksternal dapat diacu didalam dokumen HTML tunggal.

Style apa yang akan dipakai pada saat lebih dari satu style ditulis untuk elemen HTML? Secara umum kita dapat katakan bahwa semua style akan "meng-cascade" kedalam style sheet "virtual" baru dengan mengikuti hukum dengan prioritas mulai yang paling rendah: 1. 2. 3. 4. Browser default External style sheet Internal style sheet (didalam tag <head>) Inline style (didalam elemen HTML)

Jadi, inline style (didalam elemen HTML) mempunyai prioritas tertinggi, yang berarti bahwa ini akan menimpa style yang dideklarasikan didalam tag <head>, dalam external style sheet, atau dalam browser (nilai default). Catatan: Jika link style sheet eksternal diletakkan dibawah style sheet internal dalam tag <head>, style sheet eksternal akan menimpa style sheet internal.

Sintaks CSS
Sintaks CSS disusun atas tiga bagian: selector, property and value:

selector {property: value}


Selector umumnya elemen/tag HTML yang Anda definisikan, property adalah atribut yang akan Anda ubah, dan setiap property dapat mempunyai value (nilai). Property dan value dipisahkan oleh tanda titik dua (:), dan diapit oleh kurung kurawal:

body {color: black}


Catatan: Jika value terdiri atas sejumlah kata, apitlah dengan petik ganda:

p {font-family: "sans serif"}


Catatan: Jika Anda akan menentukan lebih dari satu property, Anda harus memisahkan setiap property dengan tanda titik koma. Berikut contoh bagaimana mendefinisikan paragraf rata tengah, dengan warna teks merah:

p {text-align:center;color:red}
Untuk membuat definisi style mudah dibaca, Anda dapat menuliskan satu property pada tiap baris, seperti ini:

p { text-align: center; color: black; font-family: arial }

Pengelompokan
Anda dapat mengelompokkan sejumlah selector. Pisahkan setiap selector dengan koma. Dalam contoh di bawah kita telah mengelompokkan semua elemen header. Semua elemen header akan ditampilkan dalam warna teks hijau:

h1,h2,h3,h4,h5,h6 { color: green }

Selector kelas
Dengan selector kelas Anda dapat mendefinisikan style berbeda untuk tipe elemen HTML berbeda. Misalnya Anda ingin mempunyai dua tipe paragraf dalam dokumen: satu paragraf rata kanan, dan satu lagi paragraf rata tengah. Anda dapat mengerjakannya dengan style:

p.right {text-align: right} p.center {text-align: center}


Anda harus menggunakan atribut kelas dalam dokumen HTML Anda:

<p class="right"> Ini adalah paragraf dengan rata kanan. </p> <p class="center"> Ini adalah paragraf dengan rata kanan. </p>
Catatan: Untuk menggunakan lebih dari satu kelas per elemen yang diberikan, sintaks menjadi:

<p class="center bold"> Ini adalah paragraf. </p>


Paragraf di atas akan diberi style dengan kelas "center" DAN kelas "bold". Anda juga dapat mengabaikan nama tag dalam selector untuk mendefinisikan style yang akan dipakai oleh semua elemen HTML yang mempunyai kelas tertentu. Dalam contoh berikut, semua elemen HTML dengan class ="center" akan dibuat rata tengah:

.center {text-align: center}


Dalam kode di bawah baik elemen h1 maupun elemen p mempunyai class="center". Ini berarti kedua elemen akan mengikuti aturan dalam selector ".center":

<h1 class="center"> Heading ini dibuat rata tengah

</h1> <p class="center"> Paragraf ini juga dibuat rata tengah. </p>
JANGAN memulai nama kelas dengan bilangan! Ini tidak bekerja dalam Mozilla/Firefox.

Menambahkan Style kepada Elemen dengan Atribut Khusus


Anda juga dapat menggunakan style kepada elemen HTML dengan atribut khusus. Aturan style dibawah akan mencocokkan semua elemen input yang mempunyai atribut type dengan nilai "text":

input[type="text"] {background-color: blue}

Selector id
Anda juga dapat mendefinisikan style untuk elemen HTML dengan selector id. Selector id didefinisikan dengan #. Aturan style dibawah akan mencocokkan elemen yang mempunyai atribut id dengan nilai "green":

#green {color: green}


Aturan style dibawah akan mencocokkan elemen p yang mempunyai id dengan nilai "para1":

p#para1 { text-align: center; color: red }


JANGAN memulai nama ID dengan bilangan! Ini tidak akan bekerja pada Mozilla/Firefox.

Komentar CSS
Komentar dipakai untuk menjelaskan kode, dan bisa membantu saat Anda mengedit kode sumber pada waktu lain. Komentar akan diabaikan oleh browser. Komentar CSS dimulai dengan "/*", dan diakhiri dengan "*/", seperti ini:

/* Ini adalah komentar */ p { text-align: center; /* Ini adalah komentar yang lain*/ color: black; font-family: arial }

Bagaimana menyisipkan Style Sheet


Pada saat browser membaca style sheet, ia akan memformat dokumen sesuai dengan stylenya. Ada tiga cara menyisipkan style sheet:

Style Sheet Eksternal


Style sheet eksternal paling cocok digunakan untuk banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan keseluruhan situs Web dengan hanya mengubah satu file. Setiap halaman harus melakukan link ke style sheet menggunakan tag <link>. Tag <link> ditulis di bagian head:

<head> <link rel="stylesheet" type="text/css" href="cssku.css" /> </head>


Browser akan membaca definisi style dari file cssku.css, dan memformat dokumen sesuai dengannya. Style sheet eksternal dapat ditulis dengan editor teks. File tidak mancakup tag-tag html. Style sheet disimpan dengan ekstensi .css. Contoh file style sheet file seperti ini:

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}


JANGAN memberi spasi antara nilai property dan satuan! Jangan tulis "margin-left: 20 px", tapi tulis "margin-left: 20px".

Contoh
Contoh 1

<html> <head> <link rel="stylesheet" type="text/css" href="contoh1.css" /> </head> <body> <h1>Ini adalah header dengan 36 pt</h1> <h2>Ini adalah header dengan warna biru</h2> <p> Ini adalah paragraf dengan left margin sama dengan 50 piksel </p> </body> </html>

File style sheet (contoh1.css):

body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

Contoh 2 File HTML ini akan melakukan link ke style sheet dengan tag <link>

<html> <head> <link rel="stylesheet" type="text/css" href="contoh2.css" /> </head> <body> <h1>Ini adalah header 1</h1> <hr /> <p>Anda dapat melihat bahwa style sheet memformat teks</p> <p><a href="http://www.akakom.ac.id" target="_blank">Link ke Akakom</a></p> </body> </html>

File style sheet (contoh2.css):

body {background-color: tan} h1 {color:maroon; font-size:20pt} hr {color:navy} p {font-size:11pt; margin-left: 15px} a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue}

Style Sheet Internal


Style sheet internal digunakan pada saat sebuah dokumen mempunyai style unik. Anda definisikan style internal dalam bagian head 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>
Sekarang browser akan membaca definisi style, dan memformat dekumen sesuai dengannya. Catatan: Browser umumnya mengabaikan tag yang tidak diketahui. Ini berarti browser tua yang tidak mendukung style, akan mengabaikan tag <style>, tetapi konten tag <style> akan ditampilkan pada halaman. Untuk melindungi browser tua dari penampilan konten adalah dengan menyembunyikannya dalam elemen komentar:

<head> <style type="text/css"> <!-hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>
Style Inline
Style inline mencampur konten dengan presentasi. Gunakan metode ini pada saat style dipakai untuk sekali kemunculan elemen. Untuk menggunakann style inline Anda gunakan atribut style dalam tag tersebut. Atribut style dapat mencakup sejumlah properti CSS. Berikut contoh bagaimana mengganti warna dan left margin dari paragraf:

<p style="color: sienna; margin-left: 20px"> Ini adalah paragraf </p>

Multiple Style Sheet


Jika sejumlah property telah diset untuk selector yang sama dalam style sheet berbeda, nilainya akan diturunkan dari style sheet yang lebih spesifik. Sebagai contoh, style sheet eksternal mempunyai property untuk selector h3:

h3 { color: red; text-align: left; font-size: 8pt }


Style sheet internal mempunyai property untuk selector h3:

h3 { text-align: right; font-size: 20pt }


Jika halaman dengan style sheet internal juga melakukan link ke style sheet eksternal property untuk h3 akan menjadi:

color: red; text-align: right; font-size: 20pt


Property color diturunkan dari style sheet eksternal sedangkan and text-alignment dan fontsize diambil dari style sheet internal.

Background CSS
Property background CSS mendefinisikan efek background dari elemen.

Property Background CSS


Property background mengijinkan Anda mengontrol warna background dari elemen, menset image sebagai background, mengulang image background secara vertikal atau horisontal, dan posisi image pada halaman. Browser yang mendukung: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Bilangan dalam kolom "W3C" menunjukkan rekomendasi CSS yang mana property itu didefinisikan (CSS1 atau CSS2). Property background Deskripsi Property singkatan untuk setting seluruh property background dalam satu deklarasi Value background-color background-image background-repeat backgroundattachment background-position scroll fixed IE 4 F 1 N 6 W3C 1

backgroundattachment

Menset apakah image background diset tetap atau scroll pada sisa halaman Menset background color dari elemen

background-color

color-rgb color-hex color-name transparent url(URL) none top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos repeat repeat-x repeat-y no-repeat

background-image background-position

Menset image sebagai background Menset titik awal dari background image

4 4

1 1

4 6

1 1

background-repeat

Menset bagaimana background image akan diulang

Contoh
1. Menset warna background

<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>Ini adalah header 1</h1> <h2>Ini adalah header 2</h2> <p>Ini adalah paragraf</p> </body> </html>

2. Menset image sebagai background

<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg') } </style> </head> <body> </body> </html>

3. Bagaimana mengulang image sebagai background

<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat } </style> </head> <body> </body> </html>

4. Bagaimana mengulang background image hanya secara vertikal

<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-y } </style> </head> <body> </body> </html>

5. Bagaimana mengulang background image hanya secara horisontal <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-x

} </style> </head> <body> </body> </html>

6. Bagaimana menampilkan background image hanya sekali

<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } </style> </head> <body> </body> </html>

7. Bagaimana meletakkan background image

<html> <head> <style type="text/css"> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>Catatan:</b> Agar bekerja pada Mozilla, property backgroundattachment harus diset ke "fixed".</p> </body> </html>

8. Bagaimana memset posisi background image menggunakan %

<html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } </style> </head> <body> <p><b>Note:</b> For this to work in Mozilla, the backgroundattachment property must be set to "fixed".</p> </body> </html>

9. Bagaimana menset posisi background image menggunakan piksel

<html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> <body> <p><b>Note:</b> For this to work in Mozilla, the backgroundattachment property must be set to "fixed".</p> </body> </html>

10. Bagaimana menset background image secara tetap, sehingga image tidak scroll

<html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image <p>Image </body> </html> tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p> scroll</p>

11. Semua property background dalam satu deklarasi

<html> <head> <style type="text/css"> body { background: #00ff00 url('smiley.gif') no-repeat fixed center; } </style>

</head> <body> <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah <p>Ini adalah </body> </html> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p> kalimat</p>

Text CSS
Property Text CSS
Property-property teks CSS mendefinisikan kemunculan teks. Property-property teks CSS mengijinkan Anda untuk mengontrol kemunculan teks. Dengan property ini Anda bisa mengubah warna teks, menambah atau mengurangi spasi antar huruf dalam teks, meratakan teks, mendekorasi teks, menambah indentasi baris pertama dalam teks, dan lainnya. Browser yang mendukung: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Bilangan dalam kolom "W3C" menunjukkan rekomendasi CSS yang mana property itu didefinisikan (CSS1 atau CSS2). Property color direction line-height Deskripsi Menset warna teks Menset arah teks Menset jarak antar baris Value color ltr rtl normal number length % normal length left right center justify IE 3 6 4 F 1 1 1 N 4 6 4 W3C 1 2 1

letter-spacing

Menambah atau mengurangi spasi antar huruf Meratakan teks dalam elemen

text-align

text-decoration

Menambah dekorasi ke teks none underline overline line-through blink Menambah indentasi baris pertama dari teks dalam elemen length % none color length Mengontrol huruf dalam elemen none capitalize uppercase lowercase normal embed bidi-override Menset bagaimana menangani spasi putih yang ada dalam elemen Menambah atau mengurangi spasi antar kata normal pre nowrap normal length

text-indent

text-shadow

text-transform

unicode-bidi

white-space

word-spacing

Contoh
1. Menset warna teks

<html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>Ini adalah header 1</h1> <h2>Ini adalah header 2</h2> <p>Ini adalah paragraf</p> </body> </html>
2. Menset background-color pada teks

<html> <head> <style type="text/css"> span.highlight { background-color:yellow } </style> </head> <body> <p> <span class="highlight">Ini Ini adalah teks. Ini adalah Ini adalah teks. Ini adalah <span class="highlight">Ini </p> </body> </html>
3. Menentukan spasi antar huruf

adalah teks.</span> Ini adalah teks. teks. Ini adalah teks. Ini adalah teks. teks. Ini adalah teks. Ini adalah teks. adalah teks.</span>

<html> <head> <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> </head>

<body> <h1>Ini adalah header 1</h1> <h4>Ini adalah header 4</h4> </body> </html>

4. Menentukan spasi antar baris

<html> <head> <style type="text/css"> p.kecil {line-height: 90%} p.besar {line-height: 200%} </style> </head> <body> <p> Ini adalah paragraf dengan tinggi baris Tinggi baris default kebanyakan browser Ini adalah paragraf dengan tinggi baris Ini adalah paragraf dengan tinggi baris </p> <p class="kecil"> Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p> <p class="besar"> Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p> </body> </html> dengan dengan dengan dengan dengan tinggi tinggi tinggi tinggi tinggi baris baris baris baris baris

standar. sekitar 110% sampai 120%. standar. standar.

lebih lebih lebih lebih lebih

kecil. kecil. kecil. kecil. kecil.

dengan dengan dengan dengan dengan

tinggi tinggi tinggi tinggi tinggi

baris baris baris baris baris

lebih lebih lebih lebih lebih

besar. besar. besar. besar. besar.

5. Perataan Teks

<html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right}

</style> </head> <body> <h1>Ini adalah header 1</h1> <h2>Ini adalah header 2</h2> <h3>Ini adalah header 3</h3> </body> </html>

6. Dekorasi teks

<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} </style> </head> <body> <h1>Ini adalah header 1</h1> <h2>Ini adalah header 2</h2> <h3>Ini adalah header 3</h3> <h4>Ini adalah header 4</h4> <p><a href="http://www.akakom.ac.id">Link ke Akakom</a></p> </body> </html>

7. Indentasi teks

<html> <head> <style type="text/css"> p {text-indent: 1cm} </style> </head> <body> <p>

Ini adalah Ini adalah Ini adalah Ini adalah Ini adalah </p> </body> </html>

kalimat kalimat kalimat kalimat kalimat

dalam dalam dalam dalam dalam

paragraf. paragraf. paragraf. paragraf. paragraf.

8. Mengontrol huruf dalam teks

<html> <head> <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase">Ini adalah kalimat dalam paragraf.</p> <p class="lowercase">Ini adalah kalimat dalam paragraf.</p> <p class="capitalize">Ini adalah kalimat dalam paragraf.</p> </body> </html>

9. Menset arah teks dari elemen

<html> <head> <style type="text/css"> div.one { direction: rtl } div.two { direction: ltr } </style> </head> <body> <div class="one">Sejumlah teks. Arah kanan-ke-kiri.</div>

<div class="two">Sejumlah teks. Arah kiri-ke-kanan.</div> </body> </html>

10. Menambah spasi putih antar kata

<html> <head> <style type="text/css"> p { word-spacing: 30px } </style> </head> <body> <p> Ini adalah kalmat. Ini adalah kalimat. </p> </body> </html>

11. Membuat non-aktif teks menggulung (wrapping) didalam elemen

<html> <head> <style type="text/css"> p { white-space: nowrap } </style> </head> <body> <p> Ini Ini Ini Ini Ini Ini Ini Ini adalah adalah adalah adalah adalah adalah adalah adalah kalmat. kalmat. kalmat. kalmat. kalmat. kalmat. kalmat. kalmat. Ini Ini Ini Ini Ini Ini Ini Ini adalah adalah adalah adalah adalah adalah adalah adalah kalimat. kalimat. kalimat. kalimat. kalimat. kalimat. kalimat. kalimat.

</p> </body> </html>

Anda mungkin juga menyukai