CSS
CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.
1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.
Sintaks penulisannya :
Selektor Mengawali deklarasi Properti
h1 {
background-color:#9933FF;
}
Nama Properti
Mengakhiri bagian Properti
Sebuah Style
Nilai untuk backround-color
2. Css Bersifat Case Sensitive
Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh :
.nim {
. . .
}
Maka nim akan dibedakan dengan Nim ataupun NIM.
Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
nama seperti warna Merah lebih baik dari pada wmr.
warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah. Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.
3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.
Sintaks Penulisannya:
/*
Isi komentar
*/
4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline Style Sheet, dan Linked Style Sheet.
4.1 Embedded Style Sheet
Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>. Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.
Sintaks penulisannya :
<style type="text/css">
<!—Atribut CSS -->
</style>
latihan1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 1</title>
<style type="text/css">
/* Ini Selektor h1 di jadikan sebuah komentar h1{
background-color:purple;
}
*/
body{
background-color:blue;
color:white;
}
h1{
text-align:center;
}
p{
text-align:right; font-size:18px; font-weight:bold; color:yellow;
} hr{ color:red;
}
</style>
</head>
<body>
<h1>=|| TOKO PAKAIAN MURAH MERIAH ||=</h1>
<p>Jl.Gratis No.008, Condong Catur, Sleman<br/> Yogyakarta
</p>
<hr />
</body>
</html>
4.2 Inline Style Sheet
Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja. Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.
Sintaks penulisannya :
<tag HTML style=”Properti:value/nilai”> ... </tag HTML>
latihan2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 2</title>
</head>
<body>
<h1 style="background-color:red; color:white; text- align:center">Belajar Pemrograman Web CSS</h1>
<p style="border:1px solid">
CSS adalah aturan untuk mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
</p>
<p>CSS merupakan singkatan dari Cascading Style Sheet.</p>
</body>
</html>
4.3 Linked Style Sheet
Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya adalah memanggil file css tersebut untuk digunakan dalam kode html. Untuk me-link/memanggil kode css di dalam kode html, bisa menggunakan kode berikut.
Sintaks penulisannya :
<link rel=”stylesheet” href=”namafile.css” type=”text/css”>
latihan3.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>TANAMAN HIAS BUNGA</h1>
<h2>ANGGREK</h2>
<p>Suku anggrek-anggrekan atau Orchidaceae merupakan satu suku tumbuhan berbunga dengan anggota jenis terbanyak. Jenis-jenisnya tersebar luas dari daerah tropika basah hingga wilayah sirkumpolar, meskipun sebagian besar anggotanya ditemukan di daerah tropika.</p>
</body>
</html>
style.css
body{ background:url(latar.jpg); font-family:Georgia;
}
h1{
background-color:purple; text-align:center; color:white;
} h2{ color:red;
font-size:25px;
}
p{
margin-left:50px;
color: blue;
font-size:24px;
}
5. Jenis-Jenis Selektor
Selektor atau pemisah dalam CSS, dibagi menjadi beberapa bagian, antara lain:
5.1 Tag / elemen HTML
Menggunakan tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :
h1 {
color:black;
}
5.2 Kelas
Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada tag HTML ditambahkan class = (nama kelas).
Contoh :
.isi{
font-family:arial; font-size:30px; color:blue;
}
5.3 ID
Selektor ID digunakan untuk mendefinisikan tag secara individual atau spesifik. Penggunaan selector ID akan diawali dengan tanda pagar ( # ).
Contoh :
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
Style diatas akan digunakan oleh tag yang mengandung identitas khusus header, misalnya:
<div id = “atas”>
latihan4.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 4</title>
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>
<div id="atas"> Toko Onlineku
</div>
<h1>Deskripsi:</h1>
<div class="isi">
Toko online ini menjual barang-barang elektronik baru dan bekas dengan harga yang terjangkau.</div>
</body>
</html>
gaya.css
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
h1 {
color:black;
}
.isi{
font-family:arial; font-size:30px; color:blue;
}
6. Grouping Element
Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk block level content. Perbedaan dari kedua tag tersebut adalah sebagai berikut:
Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css).
Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).
latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<style type="text/css">
div{
font-family:verdana;
color:#0000FF;
background-color:#FFFF00;
font-size:36px; text-align:center; width:800px;
}
</style>
</head>
<body>
<div>
<p>Ini Contoh Penggunaan DIV</p>
</div>
<span style="font:Arial; color:#FF0000; font-size:24px">Ini
Contoh dalam Span dengan warna merah</span>
</body>
</html>
CSS 3
CSS 3 merupakan versi terbaru dari pengembangan css sebelumnya. Peningkatan yang paling mencolok pada versi ini yaitu peningkatan fitur yang mengarah pada efek animasi, seperti text effects, border, accordion, crop, dll. Namun yang perlu di ingat tidak semua browser mendukung Css3. Kita harus memilih browser yang sudah mendukung versi css3 seperti Mozilla Firefox 3.6, Opera, Safari 5, dan Google Chrome. Internet Explore (IE) versi 9 belum mendukung penuh Css3.
1. Border Effects
Css3 menyediakan fitur menarik dari segi border misalnya kita dapat mengganti border dengan image, menerapkan sisi gradient, dan bahkan kita bisa membuat sudut melengkung pada bagian sisinya tanpa menggunakan gambar.
latihan1.html
<!DOCTYPE html>
<head>
<title>Latihan 1</title>
<link rel="stylesheet" href="border.css" type="text/css" />
</head>
<body>
<p id="melengkung">
Kotak ini memiliki sudut round
</p>
<p id="gradien">
Kotak ini menggunakan efek gradien
</p>
<p id="bayangan">
Kotak ini memiliki sudut round dan ada bayangan(shadow)
</p>
<p id="gambar">
Kotak ini menggunakan gambar untuk bordernya.
</p>
</body>
</html>
border.css
#melengkung
{
border:2px solid red; padding:10px 40px; background:yellow; width:600px;
border-radius:30px;
}
#gradien /*tampil di firefox */
{
width:600px;
border:10px solid #000;
padding:5px 5px 5px 15px;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
}
#bayangan
{ width:600px; height:150px; background-color:pink;
box-shadow: 10px 10px 5px #888888;
padding:10px 40px;
}
#gambar /*suport di chrome */
{
width:600px;
-webkit-border-image:url(border.png) 40 40 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 40 40 stretch; /* Opera */
border-image:url(border.png) 40 40 stretch;
padding:10px 40px;
}
Output di browser :
latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 2</title>
<style type="text/css">
div
{ width:100px; height:75px;
background-color:purple; border:1px solid yellow; color:white;
}
#dua
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>STMIK AMikom Yogyakarta</div>
<div id="dua">Unggul dalam tren IT</div>
</body>
</html>
Pemrograman Web – Strata 1 Teknik Informatika
3
Output di browser :
4
5
2. Accordion
Accordion adalah menu yang telah disusun atau dikelompokkan. Efek dari accordion ini ketika kita klick kelompok menu tersebut, akan terlihat menu lainnya dengan animasi geser. latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="accordion.css" type="text/css">
</head>
<body>
<dl>
<dt><a href="#Section1">STMIK AMIKOM Yogyakarta</a></dt>
<dd id="Section1">
<p>STMIK AMIKOM YOGYAKARTA adalah sebuah perguruan tinggi hasil pengembangan dari Akademi Manajemen Informatika dan Komputer "AMIKOM YOGYAKARTA".
</p>
</dd>
<dt><a href="#Section2">Visi & Misi</a></dt>
<dd id="Section2">
<p><b>Visi Perguruan Tinggi</b>:Menjadi Perguruan Tinggi Komputer Terbaik di Asia Tenggara.<br/><br/><b>Misi Perguruan Tinggi</b>:Menghasilkan lulusan yang berkualitas global, produktif, berjiwa entrepreneur, profesional</p>
</dd>
<dt><a href="#Section3">Sejarah Berdiri</a></dt>
<dd id="Section3">
<p><b>STMIK AMIKOM YOGYAKARTA</b>merupakan salah satu perguruan tinggi swasta yang berkedudukan di Provinsi DIY Kabupaten Sleman di bawah naungan Yayasan AMIKOM Yogyakarta.</p>
</dd>
<dt><a href="#Section4">Kontak</a></dt>
<dd id="Section4">
<p>Kampus Terpadu : Jl. Ring Road Utara, Condong
Catur, Sleman, Yogyakarta<br>
Telp: (0274) 884201 - 207 <br>
Fax: (0274) 884208 Kodepos: 55283<br> E-Mail: amikom@amikom.ac.id</p>
</dd>
</dl>
</body>
</html>
accordion.css
*{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body{
background-color: #380a62;
font-size: 0.75em;
}
p{
font-size: 1em; margin: 0 0 1em 0; text-align: justify;
}
dl{
padding: 10px;
min-width: 960px;
}
dl dt{
-webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; border:1px solid #B6B4B4; margin:0;
width:400px;
}
dl dt a{ color:#ffffff; font-weight:bold;
text-decoration:none;
padding:10px;
display:block;
}
dl dd{ color:#cccccc; margin:0; width:400px; overflow:hidden;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}
dl dd p { padding:10px; margin:0;
}
dl dd:not(:target) {
height:0;
7
}
dl dd:target {
height:9.5em;
}
dl a.ie:hover dd, dl a.ie:focus dd {
height:auto;
color:#cccccc;
}
Output di browser :
3. Text Effects latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 4</title>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px red;
color:yellow;
font-size:50px;
}
</style>
</head>
<body>
<h1>Teks ini menggunakan efek bayangan</h1>
</body>
</html>
Output di browser :
4. Sexy Image Hover latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<link rel="stylesheet" href="sexy.css" type="type/css">
</head>
<body>
<div class='img' id='img-1'>
<div class='mask'></div>
<img src='kucing1.jpg' width='200' height='150' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='kucing2.jpg' width='200' height='150' />
</div>
<div class='img' id='img-3'>
<div class='mask'></div>
<img src='kucing3.jpg' width='200' height='150' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='kucing4.jpg' width='200' height='150' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<img src='kucing5.jpg' width='200' height='150' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='kucing6.jpg' width='200' height='150' />
</div>
</body>
</html>
sexy.css
.img{
float:left;
-webkit-transition-duration: 0.5s;
}
.img img{ padding:10px; border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute; height: 100%; opacity:0.6; cursor:pointer;
-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover .mask{ margin-left:219px; margin-top:135px; height:0%;
10
width:0%;
}
#img-5:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateZ(750deg);
}
Output di browser :
11
REFERENSI
Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom. http://www.w3schools.com
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan
Cascading Style Sheets dalam halaman Web. Yogyakarta: Andi Offset. Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.
Tidak ada komentar:
Posting Komentar