Dasar - Dasar CSS (Cascading Style Sheet)

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

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

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
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
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
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
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

Dasar - Dasar CSS (Cascading Style Sheet)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Dasar - Dasar CSS (Cascading Style Sheet)