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 , 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 */

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 <style type="text/css"> gbawah { text-decoration: underline; } SMA Dempo Malang bergaris bawah

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: <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;}




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: <style type="text/css"> .kotak {border-style:solid;border-color:red;width:300px;}

3




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: Embeded style sheet (Internal Style Sheet) Penulisan CSS dengan mendefinisikan dulu didalam sebuah tag <style type="text/css"> 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. Contoh: <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

Tulisan ini berukuran 18 dengan warna merah!

Artikel /paragraf ada disini berukuran 12

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

Mengatur latar belakang (background) Background warna: background-color : value; Contoh: 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; }

5

Mengatur tulisan (teks): Menentukan warna sebuah tulisan dengan cara Internal Style: <style type="text/css"> h1 {color: red;} h2 {color: green;} h3 {text-transform: uppercase;}

SMA

Dempo

Jl. Talang 1 Malang

Menentukan warna background tulisan dengan cara Inline Style:

SMA

Dempo

<span style="background-color:pink;"> Jl. Talang 1 Malang

6

Membuat tulisan didalam sebuah kotak (teks dengan border): <style type="text/css"> .kotak { border-color: green; border-style: solid; border-width: 4px; background-color: pink; color: black; }

<span class="kotak"> SMA Dempo Malang

Menentukan jenis, warna dan ukuran huruf:

<span style="font-family:sans-serif;"> SMA Dempo Malang
<span style="font-family:Times New Roman;"> SMA Dempo Malang
<span style="font-family:Verdana; color:red; font-size:50px;"> Dempo

7

Membuat table Untuk membuat table yang sederhana ada 3 elemen utama yaitu , dan

. Tag adalah untuk membuat tabel kemudian di ikuti dengan tag (table rows) adalah untuk membuat baris pada tabel kemudian tag (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: <style type="text/css"> table { border-collapse: collapse;width:250px;} td { border-width: 1px; border-style: solid; padding:4px; text-align: center; } SMA Dempo Malang SMA Dempo Malang 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 × Report "CSS (Cascade Style Sheet)" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close