CSS (Cascade Style Sheet)

Ukuran: px

Mulai penontonan dengan halaman:

Download "CSS (Cascade Style Sheet)"

Suparman Jayadi
9 tahun lalu
Tontonan:

1 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

2 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 : /* komentar */ Menggunakan tanda :  Contoh penulisan script CSS body {background-color: white;} { } adalah Deklarasi body adalah Selector background-color adalah Property white 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

3 Selector Bebas Berfungsi menjadi tag html. Contoh gbawah { text-decoration: underline; } Selector ID <gbawah>sma Dempo Malang bergaris bawah</gbawah> </HTML> Pemberian nama untuk ID itu unik. Dalam satu halaman web, tidak boleh ada kode yang memiliki ID yang sama. ID dilambangkan dengan simbol pagar (#). <title>sma Dempo</title> #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;} <div id="kotak_1">warna merah</div><br> <div id="kotak_2">warna hijau</div><br> <div id="kotak_3">warna biru</div><br> 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 (.) <title>sma Dempo</title>.kotak {border-style:solid;border-color:red;width:300px;} 3

4 <div class="kotak">warna merah</div><br> 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 <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 yang ditulis sebelum tag Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. <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;} 4

5 <div class="header-wrapper">komponen header</div> <h1>tulisan ini berukuran 18 dengan warna merah!</h1> <p>artikel /paragraf ada disini berukuran 12</p> 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=" rel="stylesheet" media="all"></link> Mengatur latar belakang (background) Background warna: background-color : value; <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 <style="text/css"> body { background-image: url("drums.jpg"); background-repeat: repeat-x; } 5

6 Mengatur tulisan (teks): Menentukan warna sebuah tulisan dengan cara Internal Style: <title>sma Dempo</title> h1 {color: red;} h2 {color: green;} h3 {text-transform: uppercase;} <h1> SMA </h1> <h2> Dempo </h2> <h3> Jl. Talang 1 Malang </h3> Menentukan warna background tulisan dengan cara Inline Style: <title>sma Dempo</title> <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> 6

7 Membuat tulisan didalam sebuah kotak (teks dengan border):.kotak { border-color: green; border-style: solid; border-width: 4px; background-color: pink; color: black; } <h3> <span class="kotak"> SMA Dempo Malang </span> </h3> Menentukan jenis, warna dan ukuran huruf: <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> 7

8 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. table { border-collapse: collapse;width:250px;} td { border-width: 1px; border-style: solid; padding:4px; text-align: center; } <table> <tr><td>sma</td><td>dempo</td><td>malang</td></tr> <tr><td>sma</td><td>dempo</td><td>malang</td></tr> </table> Disadur, dikembangkan dan ditambahkan dari:

9 9

dokumen-dokumen yang mirip

CSS Cascading Style Sheet

CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan