Pengertian CSS & Konsep Dasar CSS ~ guntur restu perdana

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa 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 merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Pengertian CSS

· CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web.

· Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

· Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.

· CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.

· Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.

· Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Keuntungan Menggunakan CSS

· CSS memberikan keseragaman pada halaman web.

· Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet.

· CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.

· Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.

· CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.

Menulis CSS

Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi sebelum menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan bagaimana suatu style harus ditulis. Berikut adalah contoh mudah penulisan css pada suatu halaman web:

Contoh CSS 1

<html>

<head>

h1{font-family:tahoma}

h2{color: blue}

p{font-size:11pt ; font-style: italic}

</style>

</head>

<body>

<h2>NuSinau</h2>

<p>NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.

</p></body>

</html>

Sintak CSS (Syntax CSS)

selector (properti: nilai)

body (color: blue)

p {font-family: tahoma}

h1 {font-weight: bold}

dan lain-lain

Selector

Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.

Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).

Contoh

h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)

dapat pula ditulis seperti:

h1 (font-size: 20px;

text-align: left;

color: blue;

font-family: Arial;)

Pengelompokan Selector (Grouping of Selectors)

Seperti dapat dilihat, satu selector dapat memiliki beberapa properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.

h1 , body , p , ul

{

color : blue;

}

Pada contoh diatas, elemen header, body, paragraph, unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan berwarna biru.

Pengelompokan dalam CSS

· Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai properti yang sama (misalnya font, ukuran, warna, dll).

· Dengan satu perintah dapat memberikan properti style pada elemen yang berbeda dengan nilai yang sama.

· Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika merubah properti di elemen.

Padding, Margin dan Border

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :

Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

Cara Penggunaan

Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas

Satuan Dalam CSS

1. Statik

* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

penulisan dasar CSS seperti di bawah ini :

Selector {property:value}

Selector merupakan tag HTML atau elemen (class/id) yang Di pilih
Property adalah atribut yang ingin kalian atur nilai nya
Value adalah nilai dari property, bisa berupa angka atau teks.

Untuk lebih jelasnya bisa lihat contoh di bawah ini

p {color:blue}

Dimana p merupakan selector yang digunakan untuk memunculkan property color dan value blue. Agar lebih mengerti kalian bisa kihat pernulisan HTML nya sebagai berikut :

<html>
<title>belajar CSS<title>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Hallo World</p>
</body>
</html>

Bisa dilihat setelah di buka pada browser tulisan teks akan berwarna biru ini di karenakan pada selector P telah di beri kan property color dengan value blue.
Perlu di ingat dalam penulisan CSS harus mengikitu peraturan berikut :

1. Kode CSS harus ditulis diantara tag <head> dan </head>
2. Kode CSS harus di awali dengan tag <style>
3. Di awali dengan tanda kurung buka "{" dan di akhiri dengan tanda kurung tutup "}"
4. bila ingin mnuliskan property lebih dari 1 gunakan tanda titik koma ";"

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet (file CSS berbeda dari file HTML),

2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)

3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

</body>
</html>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

Coba kode CSS berikut:

a.link1:link {

font-weight: bold;

font-size: 12px;

color: #C87C28;

font-family: Times New Roman;

text-decoration: none;

}

a.link1:visited {

font-weight: bold;

font-size: 12px;

color: #CC6600;

font-family: Times New Roman;

text-decoration: none;

}

a.link1:hover {

font-weight: bold;

font-size: 12px;

color: #C87C28;

font-family: Times New Roman;

text-decoration: underline

}

a.link1:active {

font-weight: bold;

font-size: 12px;

color: #C87C28;

font-family: Times New Roman;

text-decoration: none;

}

a.link2:link {

font-weight: bold;

font-size: 12px;

color: #663300;

font-family: Arial, Helvetica, sans-serif;

text-decoration: underline;

}

a.link2:visited {

font-weight: bold;

font-size: 12px;

color: #800000;

font-family: Arial, Helvetica, sans-serif;

text-decoration: none;

}

a.link2:hover {

font-weight: bold;

font-size: 12px;

color: #ff6600;

font-family: Arial, Helvetica, sans-serif;

text-decoration: underline overline;

}

a.link2:active {

font-weight: bold;

font-size: 12px;

color: #ff6600;

font-family: Arial, Helvetica, sans-serif;

text-decoration: underline;

}

guntur restu perdana

21 Apr 2012

Pengertian CSS & Konsep Dasar CSS

25 komentar:

Blog Archive

Total Visitor

Facebook

Like Box

Followers

guntur restu perdana

21 Apr 2012

Pengertian CSS & Konsep Dasar CSS

25 komentar:

Social Profiles

Blog Archive

Total Visitor

Facebook

Like Box

Followers