Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dasar - Dasar CSS (Cascading Style Sheet)

1,450 views

Published on

Membahasa Css Dari Dasar

Published in: Education
  • Be the first to comment

  • Be the first to like this

Dasar - Dasar CSS (Cascading Style Sheet)

  1. 1. 1 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN Basic CSS ______________________________ Pendahuluan_______________________________________ Style sheet atau yang sering di sebut dengan CSS ( Cascading Style Sheet ) saja adalah Salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya style pada aplikasi pengolah kata MS WORD yang bisa mengatur beberapa style, Misalnya, subbab, headding, bodytext, footer, dan style lainnya agar bisa di pakai bersama-sama dalam beberapa file. Dengan adanya CSS memungkinkan kita untuk untuk menampilkan halaman yang sama dengan format yang berbeda. Isi____________________________________________________ Syntax / Kalimat CSS terdiri dari beberapa set peraturan yang memiliki : 1 selector, 1 property, 1 value. Contoh format penulisan : Selector { property: value } Selector  menunjukan bagian mana yang hendak diatur / di format. Property  untuk menunjukan, bagian (property) dari selector yang hendak di atu. Value  Nilai Dari pengaturannya. Contoh Syntax_____________________________________________ H1 { color: red } Dari contoh di atas dapat kita simpulkan atau lihat bahwa : Selector : h1 Property : color Value : red
  2. 2. 2 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN A. Pengelompokan Selector Anda dapat menulis satu kode CSS untuk bebagai macam selector dengan cara menggunakan koma. Misalnnya anda mau mengatur agar h1, h2, & h3 semua menggunakan warna merah, maka kode CSS nya menjadi : h1,h2,h3 {color : red;} B. Penggunaan banyak Properties Untuk mengatur lebih dari satu properties gunakan titik koma ( ; ). h1,h2,h3 {color : red; font-family:arial; font-size:150%; } C. Cara penulisan yang baik Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan propety dan valuesnya indent. Hal ini bertujuan agar telihat rapi. h1,h2,h3 { color : red; font-family:arial; font-size:150%; } D. CSS Comment Kenapa kita perlu belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda. /* Tulis komentar anda di sini */ P { text-align: justify; }
  3. 3. 3 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN E. IMPLEMENTASI CSS Ada 4 cara memasang kode CSS ke dalam HTML yaitu : - Inline CSS Embed / memasang kode CSS ke dalam bagian <head> Link ke external CSS Import CSS Pembahasan 1. Inline CSS Kode CSS di tulis langsung ke dalam tag HTMLyang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaknya hanya di gunakan jika anda mau memformat suatu elemen satu kali saja. Contoh: <h1 style="color: red;"> H1 dengan CSS </h1> Pada contoh si atas, elemen <h1> di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata style= lalu di ikuti dengan syntax Property: value; . 2. Embedded CSS Kita bisa menempelkan kode CSS di antara tag <head> & </head> . penulisan CSSdengan cara ini awalnya diawali Dengan tag <style> ---- </style>. Contoh : <head> <style type=”text/css”> h1 {color : red;} </style> </head>
  4. 4. 4 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN 3. External CSS Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini. Contoh: - Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut. p {font-family: arial; font-size: small;} h1 {color: red; } - Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head> <head> <link rel=”stylesheet” href=”style.css”> </head> 4. Import CSS Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import. Contoh : @import “style.css”; Atau @import url(“style.css”); 5. Penggunaan lebih dari satu kode CSS Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut: h1 {color: red; text-align: left; font-size: 8pt}
  5. 5. 5 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb: h1 {text-align: right; font-size: 20pt} Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, textalign=left sementara dari internal style sheet, text-align=right. Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet. Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut : color: red; text-align: right; font-size: 20pt CLASS & ID SELECTOR Sesudah mengenal syntax CSS, yaitu tentang SELECTOR. Pada contoh - contoh pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector. Misalnya anda membuat kode CSS untuk tang <h1>. Sekarang bagaimana jika ingin memformat tag <h1> dengan warna / property berbeda ?? misalkan anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengan berwarna hitam. Untuk kasus ini, anda bisa menggunakan Class Selector dan ID Selector. A. CLASS SELECTOR Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan : .nama-class {properties: value;} Untuk menampilkan class selector ke dalam tag html : Taghtml .nama-class {properties: value;}
  6. 6. 6 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN Perhatikan tanda titik di setiap awal nama class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri tag </div> Contoh : Penulisan kode CSS: .tengah {text-align:center;} p.tengah {color: red;} h1.kiri {color:blue;} h1.tengah {color:black;} Pemakaian kode CSS di File HTML <div class=tengah> <p>Teks tengah akan berwarna merah.</p> <h1 > Tag H1 tengah akan berwarna hitam</h1> </div> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1> Hasilnya : Teks tengah akan berwarna merah. Tag H1 tengah akan berwarna hitam Tag H1 kiri akan berwarna biru B. ID SELECTOR ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar. Cara penulisan ID Selector: #nama-ID {property:value;}
  7. 7. 7 TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>. CSS FONT CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya. 1. CSS Font Family Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis/tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family. Cara penulisan: property  font-family value  nama-nama font, disarankan menggunakan hanya nama-nama font default Contoh penulisan: h1 { font-family: verdana; } h2 { font-family: “times new roman”; } Hasilnya : H1 Font VERDANA H1 Font TIMES NEW ROMAN

×