YoshieStudio.com

Bagi yang belum pernah mendengan css dalam dunia HTML maka anda akan sangat kehilangan penghematan dalam besarnya file dokumen HTML anda. CSS itu sendiri bekerja menjadi pelengkap pada HTML. Jadi jika anda adalah pendatang baru dalam mempelajari HTML, maka cobalah untuk belajar CSS. Dengan menggunakan CSS ini para web developer dapat memisahkan HTML dari aturan-aturan untuk membentuk tampilan sebuah website sehingga CSS ini dirasa sangat powerfull. Namun memang banyak juga orang yang belajar HTML, tikda begitu menganggap CSS ini sangat penting peranannya padahal kekuatan dan fleksibilitas dari sebuah css sangat tangguh.

So, what exaclty you talking about it, girl…. (meski udah gak girl lagi)

CSS (Cascading Style Sheet) bertugas untuk menetapkan aturan tampilan/style yang akan digunakan pada sebuah website sehingga CSS berperan sebagai pelengkap file HTMl. Jadi meski tikda ada CSS website tetap bisa dibuat, but without CSS, not cool man….

<!– ini adalah kutipan dari blog http://vickyfs.wordpress.com/2007/09/28/tentang-css/ , sorry gak sempat buat sendiri berhubung ini tugas, selanjutnya buat mahasiswa silahkan cari tentang CSS di search engine dengan keyword “about CSS” –>

CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.

CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS. Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.

CSS dapat digunakan untuk menggantikan <font>, <b>, <u> dan <u>, dikarenakan hal berikut:
sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat.
Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.
CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.

Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya

<!– batas copy pastenya –>

FOR MY MAHASISWA INI TUGAS ANDA

Aturan Penggunaan CSS

Secara umum disusun oleh 3 bagian yaitu selector(elemen yang akan didefenisikan), property (atribut yang akan diubah) dan nilai sebagaimana berikut.

Selector {property:value}

Antara property dan nilai disahkan dengan titik-dua(colon) seperti contoh dibawah ini

Body {color:black}

Jika nilai berupa beberapa kata, gunakan tanda kutip ganda

Body{font-family=”san-serif”}

Jika lebih dari satu property pisahkan dengan titik-koma (semi colon)

P{text-align: center; color:red}

Jika ingin lebih mudah dibaca sebagaimana berikut.

P
{text-align:center;
Color:black;
Font-family:arial
}

Jika selector dikelompokkan

H1, H2, H3, H4, H5, H6
{
Color:green;
}

Jika menggunakan atribut class (dalam definisi CSS)

P.Kanan {text-align:right}
P.Kiri {text-align:center}

Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi diatas

<P class=”kanan”> paragraf ini akan rata kanan
<P class=”kiri”> paragraf ini akan rata kiri

Jika menggunakan ID atribut
.kanan {text-align:right}
Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi ID atribut diatas

<p class=”kanan”>paragraf ini akan rata kanan
</p>
<h3 class=”kanan”>tulisan header ini juga akan rata kanan

Pada umumnya style sheet terbagi beberapa yaitu:
1. Style Sheet External
Contoh Style sheet menggunakan file external dimana file style sheet tidak disimpan dengan ekstensi html tetapi berkestensi css, sehingga tag html tidak diperlukan.

Cth. Bukan lah program notepad kemudian ketikkan seperti dibawah ini (tidak perlu menggunakan tag html)

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

kemudian simpan dengan nama teks.css (jangan lupa ekstensinya).
Buka lagi notepad kemudian ketikkan berikut ini

<html>
<head>
<title>belajar css</title>
<link rel=”stylesheet” type=”text/css” href=”teks.css”>
</head>
<body >

ini adalah teks yang tidak diberi stylesheet
<p >
ini adalah teks yang diberi style judul
</p>

</body>
</html>

Kemudian simpan dengan nama latihancss.html (jangan lupa ekstensi dan letak file harus sejajar dengan teks.css yang disimpan tadi.
Lalu buka browser internet eksplorer dan browse dokumen latihancss.html untuk melihat hasilnya

2. Style Sheet Internal

Style sheet ini digunakan karena ada beberapa web page tertentu bersifat unik sehingga membutuhkan definisi terpisah dibandingkan dengan web page lainnya

<html>
<head>
<title>belajar css</title>
</head>
<style type”text/css”>
p {color:blue; font-weight:bold ;
font-size:18pt}
.yuniven {color:yellow}

body{background-color:green;
background-image:url(”images/3.jpg”);
background-repeat:no-repeat}
</style>

<body >
selamat belajar css
<p class=”yuniven”>
kita akan belajar css
</p>
<span class=yuniven>
ini tidak terjadi apa-apa
</span>

</body>
</html>

3. Style Sheet inline

Yaitu style sheet ini digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan ini sangat tidak dianjurkan meski dapat dilakukan. Hal ini bisa menyebabkan file dokumen akan menjadi lebih besar karena style didefenisikan satu persatu

<html>
<head>
<title>belajar css</title>

</head>
<body >

ini adalah teks yang tidak diberi stylesheet
<p style=”color:green; font-weight:bold;
margin-left:50px” >
ini adalah teks yang diberi style judul
</p>

</body>
</html>

4. Multi style Sheet
Jika digunakan lebih dari satu defenisi dari style sheet maka nilai yang tidak didefenisikan akan diiherit (diturunkan) dari style sheet yang lebih general, misalnya dibawah ini mempunyai stle sheet teks.css

Buka notepad, kemudia ketikkan sintak berikut tanpa menyertakan sintak html
.judul
{
font-family:arial;
font-size:18px;
font-weight:bold;
color:blue
}
.teksisi
{
font-family:verdana;
font-size:10px;
}
p{ margin-left:20px}

simpan dengan nama teks2.css
kemudian buka notepad lagi dan ketikkan sintak berikut ini

<html>
<head>

<title&g