You are on page 1of 6

PENGENALAN CSS

CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML. CSS menjelaskan
bagaimana elemen HTML harus ditampilkan. CSS singkatan C ascading S tyle S heets. CSS
menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media
lain. CSS menghemat banyak pekerjaan . Hal ini dapat mengontrol tata letak halaman web
beberapa sekaligus.
Contoh penggunaan CSS untuk membuat layout sebuah website :

Layout 1 Layout 2

Layout 3

</p> </body> . text-align: center. } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS. dengan warna teks merah: p{ color: red. } Penerapan secara lengkap : <!DOCTYPE html> <html> <head> <style> p{ color: red.Syntax CSS dan Selector Sebuah CSS dalam pendeklarasianya terdiri dari sebuah selector dan blok deklarasi  Selector merupakan elemen dari HTML yang akan diberikan style.  Sebuah deklarasi CSS selalu berakhir dengan titik koma.  Blok deklarasi berisi satu atau lebih deklarasi dan dipisahkan oleh titik koma.  Setiap deklarasi dalam CSS terdiri dari nama properti dan Value (nilai) yang dipisahkan oleh titik dua. text-align: center. Pada contoh berikut semua elemen <p> (Paragraf) akan dibuat rata tengah. dan blok deklarasi dikelilingi oleh kurung kurawal.

menulis hash (#) karakter. diikuti dengan nama kelas. dengan warna teks merah): p{ text-align: center. Id dari elemen harus unik dalam suatu halaman. menulis titik (.) Karakter. dan banyak lagi. Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "para1": #para1 { text-align: center. . semua elemen <p> akan pusat-blok. Relemn Se Pemilih Elemen memilih elemen berdasarkan nama elemen. sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik! Untuk memilih elemen dengan id tertentu. diikuti oleh id dari elemen. } Id Selector Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. } Kelas Selector Pemilih kelas memilih elemen dengan atribut kelas khusus.Macam-macam Selector CSS CSS digunakan untuk "menemukan" atau memilih elemen HTML seperti nama elemen. color: red. kelas. Untuk memilih elemen dengan kelas tertentu. color: red. id. atribut. Anda dapat memilih semua <p> elemen pada halaman seperti ini (dalam hal ini.

color: red. hanya <p> elemen dengan class = "center" akan menjadi center-aligned: p. Komentar diabaikan oleh browser.center { text-align: center.center { text-align: center. } Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas. dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari. Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. } /* This is a multi-line comment */iga Cara Sisipkan CSS Ada tiga cara memasukkan style sheet:  style sheet eksternal  internal style sheet  gaya inline . color: red. /* This is a single-line comment */ text-align: center. semua elemen HTML dengan class = "center" akan menjadi merah dan pusat-blok: . Pada contoh di bawah. } CSS Komentar Komentar digunakan untuk menjelaskan kode. Komentar juga dapat span beberapa baris: p{ color: red.Pada contoh di bawah.

css"> </head> Style sheet eksternal dapat ditulis dalam editor teks apapun. } Style Sheet internal Style sheet internal dapat digunakan jika satu halaman memiliki gaya yang unik. } h1 { color: navy.css" terlihat: body { background-color: lightblue.Eksternal Style Sheet Dengan style sheet eksternal. Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file! Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link> elemen. dalam <head> dari halaman HTML: <!DOCTYPE html> <html> <head> <style> body { background-color: linen. } h1 { .css. File harus tidak mengandung tag html. margin-left: 20px. <Link> elemen berjalan di dalam <head>: <head> <link rel="stylesheet" type="text/css" href="mystyle. gaya internal didefinisikan dalam <style> elemen. Gaya File sheet harus disimpan dengan ekstensi . Berikut adalah bagaimana "mystyle.

Contoh di bawah ini menunjukkan bagaimana mengubah warna dan margin kiri dari <h1> elemen: <!DOCTYPE html> <html> <body> <h1 style="color:blue. Atribut style dapat berisi properti CSS. color: maroon.margin-left:30px.</p> </body> </html> Gaya inline Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal. menambahkan atribut style ke elemen yang relevan. } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> .">This is a heading</h1> <p>This is a paragraph. margin-left: 40px. Untuk menggunakan gaya inline.