Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CSS oleh Karel Pangau
Document related concepts
no text concepts found
Transcript
CSS
(Cascade Style Sheet)
CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis
dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara
bebas sebagai :
CSS adalah:
bahasa/script yang digunakan untuk
mengatur tampilan/desain suatu halaman HTML
Sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain
menggunakan tag HTML <table>, dibuat dulu desainnya, dalam format .psd atau jpg, lalu di slice atau
di potong potong menjadi bagian-bagian terpisah. setelah itu dibuat tabel dengan ukuran yang sesuai,
kemudian desain tadi di-tempel pada tabel sebagai image yang melekat pada tabel, atau sebagai
background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom-kolom
penyusun tabel dan diberi tambahan atribut image source. Dengan CSS cara menampilkan web menjadi
lebih mudah.
Cascading 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, sub-bab, 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.
CSS dapat mengendalikan ukuran gambar, warna bagian body pada teks, warna tabel, ukuran border,
warna border, warna hyperlink, 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.
Pengenalan Dasar penulisan CSS
Dalam penulisan script CSS dikenal istilah yang wajib diketahui, yaitu:
Selector
Properti
Nilai/Values
1
Aturan penulisan pada CSS (Deklarasi):
selector { property : value; }
dimana :
selector
property
value
: tag HTML yang akan didefinisikan (misal body, table, td, dll)
: atribut yang akan diubah
: nilai dari atribut
Contoh :
body { font-family : sans-serif; font-size : 14px; }
Contoh penulisan secara kelompok : (menggunakan tanda koma dan atau &)
h1, h2 { color : green; };
table, tr & td { color : red; };
Cara menuliskan komentar :
Menggunakan tanda :
Menggunakan tanda :
/* komentar */
<!-- komentar -->
Contoh penulisan script CSS
body {background-color: white;}
{ …… }
body
background-color
white
adalah Deklarasi
adalah Selector
adalah Property
adalah Nilai/values
Selector adalah bagian atau elemen yang akan diatur style-nya.
Property adalah komponen yang dibutuhkan
Nilai/value adalah nilai dari property diinginkan
CSS Selector
CSS selector bisa dibilang "tanda" untuk menandai masing-masing perintah CSS. Selector dibagi
menjadi 3, yaitu:
ID yang dilambangkan dengan simbol pagar (#),
CLASS yg dilambangkan dengan titik ( . ) dan yang ketiga adalah
Selector bebas (tag html).
2
Selector Bebas
Berfungsi menjadi tag html.
Contoh
<html>
<head>
<style type="text/css">
gbawah { text-decoration: underline; }
</style>
</head>
<body>
<gbawah>SMA Dempo Malang bergaris bawah</gbawah>
</body>
</HTML>
Selector ID
Pemberian nama untuk ID itu unik. Dalam satu halaman web, tidak boleh ada kode yang memiliki ID
yang sama . ID dilambangkan dengan simbol pagar (#).
Contoh:
<html>
<head>
<title>SMA Dempo</title>
<style type="text/css">
#kotak_1 {border-style:solid;border-color:red;width:300px;}
#kotak_2 {border-style:solid;border-color:green;width:300px;}
#kotak_3 {border-style:solid;border-color:blue;width:300px;}
</style>
</head>
<body>
<div id="kotak_1">warna merah</div><br>
<div id="kotak_2">warna hijau</div><br>
<div id="kotak_3">warna biru</div><br>
</body>
</html>
Selector CLASS
Kebalikan dari ID, Class itu bisa digunakan sesuka hati. Jadi dalam satu web, bisa terdapat tag-tag yang
memiliki class yang sama. CLASS dilambangkan dengan titik (.)
Contoh:
<html>
<head>
<title>SMA Dempo</title>
<style type="text/css">
.kotak {border-style:solid;border-color:red;width:300px;}
</style>
</head>
3
<body>
<div class="kotak">warna merah</div><br>
</body>
</html>
Dilihat dari fungsinya, dua atribut CSS ( ID dan CLASS ) tersebut hampir sama yaitu untuk
mengelompokan suatu elemen HTML sehingga dapat menyederhanakan penggunaan kode HTML
terutama kode-kode HTML yang sering diulang-ulang.
Pemberian nama atribut ID dan CLASS terserah pada pembuatnya, tetapi sebaiknya disesuaikan dengan
nama kelompok yang terkait untuk mempermudah pengeditan. Perbedaan antara atribut ID dan CLASS
pada CSS adalah pada tingkat penggunaannya, ID sebaiknya digunakan sebagai identitas yang unik,
seperti Logo, Header, Footer, Left Sidebar, dan Right Sidebar sedangkan CLASS digunakan untuk
menandai atribut yang lebih sepesifik seperti ketebalan border (garis pinggir), kode warna, paragraph,
jenis font, dan ukuran font.
Perbedaan antara pengunaan selector ID dan Class adalah:
•
•
Pada selector ID tidak bisa dibuat lebih dari 1(satu) nama ID yang sama pada Tag HTML
Pada selector Class bisa memakai lebih dari satu atau berapapun yang dibutuhkan.
Kesimpulannya, selector ID digunakan untuk pengaturan yang spesifik pada Tag HTML.
Metode yang dipakai CSS
Inline Style Sheet
Penulisan atribut css langsung kedalam code HTML yang dimaksud
Contoh:
<div align="center" style="background: white;">
Ini adalah bagian yang diatur stylenya
</div>
Embeded style sheet (Internal Style Sheet)
Penulisan CSS dengan mendefinisikan dulu didalam sebuah tag <style type="text/css"> yang
ditulis sebelum tag </head>
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang
selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh:
<html>
<head>
<title>Title halaman</title>
<style type="text/CSS">
body {background:#0000FF; color:#FFFF00;}
h1 {font-size:18px; color:#FF0000}
p {font-size:12px; font-family:arial; text-indent:0.5in}
.header-wrapper {margin:0 auto;border 1px solid #cccccc;}
</style>
4
</head>
<body>
<div class="header-wrapper">komponen header</div>
<h1>Tulisan ini berukuran 18 dengan warna merah!</h1>
<p>Artikel /paragraf ada disini berukuran 12</p>
</body>
</html>
Menurut sifatnya CSS dibedakan menjadi 2, yaitu internal dan external.
CSS internal adalah CSS yang ditulis secara langsung pada program HTML yang didesain.
CSS external adalah CSS yang ditulis pada file tersendiri (misal: style.css) dan diletakkan ditempat
khusus atau bahkan diluar dari situs tersebut.
Cara penulisan program untuk pemanggilan css external adalah
<link type="text/css" href="http://st-albertus.sch.id/coba.css"
rel="stylesheet" media="all"></link>
Mengatur latar belakang (background)
Background warna:
background-color : value;
Contoh:
<body style=”background-color : yellow;”>
Background gambar:
background-image : URL;
background-repeat : repeat | repeat-x | repeat-y | no-repeat ;
background-position : top left | top center | top right |
center left | center center | center right |
bottom left | bottom center | bottom right |
x-% y-% | x-pos y-pos
Contoh:
<style="text/css">
body { background-image: url("drums.jpg");
background-repeat: repeat-x;
}
</style>
5
Mengatur tulisan (teks):
Menentukan warna sebuah tulisan dengan cara Internal Style:
<html>
<head>
<title>SMA Dempo</title>
<style type="text/css">
h1 {color: red;}
h2 {color: green;}
h3 {text-transform: uppercase;}
</style>
</head>
<body>
<h1> SMA </h1>
<h2> Dempo </h2>
<h3> Jl. Talang 1 Malang </h3>
</body>
</html>
Menentukan warna background tulisan dengan cara Inline Style:
<html>
<head> <title>SMA Dempo</title> </head>
<body>
<h1 style="color: red;"> SMA </h1>
<h2>
<div style="background-color: pink;">
Dempo
</div>
</h2>
<h3>
<span style="background-color:pink;">
Jl. Talang 1 Malang
</span>
</h3>
</body>
</html>
6
Membuat tulisan didalam sebuah kotak (teks dengan border):
<html>
<head>
<style type="text/css">
.kotak { border-color: green;
border-style: solid; border-width: 4px;
background-color: pink; color: black; }
</style>
</head>
<body>
<h3>
<span class="kotak">
SMA Dempo Malang
</span>
</h3>
</body>
</html>
Menentukan jenis, warna dan ukuran huruf:
<html>
<body>
<h3>
<span style="font-family:sans-serif;">
SMA Dempo Malang
</span><br>
<span style="font-family:Times New Roman;">
SMA Dempo Malang
</span><br>
<span style="font-family:Verdana;
color:red; font-size:50px;">
Dempo</span><br>
</h3>
</body>
</html>
7
Membuat table
Untuk membuat table yang sederhana ada 3 elemen utama yaitu <table>, <tr> dan <td>. Tag
<table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk
membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel,
kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita
memasukkan data-data yang akan di tampilkan.
Contoh:
<html>
<head>
<style type="text/css">
table { border-collapse: collapse;width:250px;}
td { border-width: 1px;
border-style: solid;
padding:4px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>SMA</td><td>Dempo</td><td>Malang</td></tr>
<tr><td>SMA</td><td>Dempo</td><td>Malang</td></tr>
</table>
</body>
</html>
Disadur, dikembangkan dan ditambahkan dari:
http://skjs2u.blogspot.com/2010/09/apa-itu-css-konsep-dasar-css.html
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://dangstars.blogspot.com/2012/12/apa-itu-css.html
8
9
