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 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:
p {text-align:center;color:red}
Untuk membuat definisi style mudah dibaca, Anda dapat menuliskan satu property pada tiap baris, seperti ini:
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:
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 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:
</h1> <p class="center"> Paragraf ini juga dibuat rata tengah. </p>
JANGAN memulai nama kelas dengan bilangan! Ini tidak bekerja dalam Mozilla/Firefox.
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":
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 }
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>
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>
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}
<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:
Background CSS
Property background CSS mendefinisikan efek background dari elemen.
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
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>
<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg') } </style> </head> <body> </body> </html>
<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat } </style> </head> <body> </body> </html>
<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
<html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } </style> </head> <body> </body> </html>
<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>
<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>
<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>
<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>
<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
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>
<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>
<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>
<html> <head> <style type="text/css"> p { word-spacing: 30px } </style> </head> <body> <p> Ini adalah kalmat. Ini adalah kalimat. </p> </body> </html>
<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.