Dasar - Dasar CSS (Cascading Style Sheet)

TEKNIK KOMPUTER DAN JARINGAN SMK NEGERI 1 PAGELARAN

1

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

align=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)

Education