T2. CSS

SWONO SIBAGARIANG
CSS ( CASCADING STYLE SHEET ) swono@polibatam.ac.id

Definisi CSS
◦ CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web
designer untuk mengatur style elemen yang ada didalam halaman web serta
untuk mempercantik halaman website, CSS dapat mengerjakan apa yang tidak
bisa dikerjakan oleh HTML, mulai dari memformat text hingga pembuatan
layout. Disamping untuk mempercantik halaman web tujuan dari penggunaan
CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen
tertentu.
◦ CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis
dengan menggunakan penanda(markup language)
Sedikit Sejarah CSS
◦ Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World
Wide Web Consortiom), sebuah konsorsium standarisasi web, menyusun draft
proposal untuk membuat CSS ini akhirnya dapat berjalan. Selanjutnya pada
pertengahan tahun 1998, W3C mengembangkan CSS2 yang dapat
diperbaharui untuk kepentingan media lain tidak hanya untuk PC web
browser. Akhirnya pada tahun 2000 telah dikembangkan CSS3 oleh W3C yang
sampai saat ini masih terus diperbaharui lagi.
◦ Namun tidak semua browser dapat mendukung CSS 3 biasanya untuk IE 6 ke
bawah belum mendukung fitur dari CSS3, dan Firefox V3 kebawah belum
sepenuhnya walaupun sudah beberapa telah mendukung fitur dari CSS3
Berbagai Macam Versi CSS
Saat ini, CSS telah mencapai pada versi yang ketiga, di mana pada setiap versi
selalu ada peningkatan. Adapun perbedaan antara CSS-1, CSS-2, hingga CSS-3?
1. CSS-1, dikembangkan dan berpusat pada formatting dokumen HTML.
2. CSS-2, dikembangkan untuk bisa memenuhi kebutuhan terhadap format
dokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini mendukung juga
dalam penentuan posisi konten, downloadable, font, table-layout, dan media
type untuk printer.
3. CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi ini
terdapat beberapa tambahan dan mengarah pada efek animasi. Namun, saat
ini belum semua didukung oleh web browser.
Penulisan CSS
Struktur CSS
<style type="text/css">
Script CSS;
</style>
Aturan Penulisan
selector {property_1 : value_1; …; property_ke-n : value_ke-n}
H1{color:red; }
atau
H1{color:blue; size:40;}
Penulisan CSS
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector {property_1 : value_1; …; property_ke-n : value_ke-n}
1. Selector
Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara
tanda < dan tanda > misalnya <h1>, <p>, <b> dll.
2. Property
Selector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari
selector.
3. Value
Value adalah nilai yang kita berikan kepada property
Contoh :
Jika di HTML kita memformat paragraf dengan <p align=”right”> maka dengan CSS menjadi p
{text-align: right;}
Contoh Script HTML+CSS
Penempatan CSS
Ada 3 Cara Penempatan CSS yaitu :
1. Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML
2. External CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan
terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama
dengan file html tersebut. browser akan menbaca file tersebut dan akan
menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.
3. Inline CSS
Yaitu menuliskan secara langsung script CSS kedalam tag HTML

PENULISAN CSS
Ada 4 cara memasang kode CSS ke 1. IN LINE STYLE
dalam kode HTML;
Cara ini adalah menuliskan langsung
1. In line style script CSS ke dalam tag HTML yang
diinginkan. Cara ini sebaiknya hanya
2. Internal style sheet digunakan jika mau memformat suatu
3. Me-link ke eksternal CSS element satu kali saja.
4. Import CSS file
Inline CSS
PENULISAN CSS
2. INTERNAL STYLE SHEET
Selain itu, juga bisa menempelkan kode
CSS diantara tag <head> dan
</head> diawali dengan penulisan
<style> dan diakhiri </style>
Internal CSS
PENULISAN CSS
3. EXTERNAL STYLE SHEET
Kode CSS ditulis dalam satu file terpisah
yang disimpan dengan ekstensi .css.
Kemudian file tersebut dipanggil pada
semua halaman web yang memerlukan.
Caranya file .css diletakkan antara tag
<head> dan </head>.
Eksternal CSS
CSS SELECTOR (PATTERN)
Suatu bentuk atau pola yang digunakan sebagai identitas pendifinisian suatu style
Selector/Pattern Contoh Penulisan Keterangan Versi

CSS
.class .content Berlaku untuk semua element 1
yang menggunakan property
class=“content”
[atribut^nilai] [src^=“https”] Berlaku untuk semua element 3
yang mendefinisikan atribut
[src]dengan nilai yang diawali
dengan kata https
:enabled Input:enabled Berlaku untuk semua input yang 3
statusnya enable
UKURAN DAN SATUAN
CSS memiliki standar ukuran dan satuan, aturan dan satuan digunakan untuk
mengatur letak, posisi dari suatu nilai
Nilai Ukuran:
Satuan Keterangan
% Ukuran persentase
In Ukuran inchi
Cm Ukuran centimeter
Dst… …
CSS COLORS
Nilai Keterangan
ColorNam Sebuah nama warna ex: CSS color CSS color CSS color
Alice blue Hex:#F0F8FF berdasarkan berdasarkan berdasarkan
warna heksadesimal heksadesimal
Rgb(x,x,x) Sebuah warna dengan
nilai 0-255 untuk warna
merah hijau biru
Rgb(x%,x%,x%) Sebuah warna dengan

nilai 0-100% untuk
warna merah, hijau, biru
#rrggbb Sebuah warna dengan

sumber warna
hexadecimal
CSS BACKGROUDS
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Class dan Id Pada CSS
1. Class di CSS
CSS dapat diterapkan dengan nama class dan nama id, class dan id digunakan
untuk mengelompokan beberapa elemen supaya memiliki style sama. Secara
umum sintaks style secara umum adalah sebagai berikut :
.nama_kelas { property: value; }
Berbeda dengan penerapa yang langsung mengacu pada tag HTML metode CSS
dengan class ini selalu menggunakan tanda '.' (titik) sebagai penanda bahwa itu
adalah sebuah CSS yang akan diterapkan di class nantinya.
CLASS SELECTOR
Class selector digunakan untuk
menentukan sekelompok elemen.
Berbeda dengan ID selector, Class
selector digunakan untuk banyak
elemen.
Cara penulisan Class selector;
.nama-class {property: value;}
Untuk menempelkan class ke HTML;

taghtml.nama-class {property:value;}
Class di CSS
Contoh lengkapnya adalah :
<style type=”text/css”>
.polesteks {color: green; size: 34;}
</style>
<body>
<b class=“polesteks”>Saya adalah CSS</b>
<p class=“polesteks”>Saya Juga adalah CSS</b>
</body>
Class di CSS
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag
elemen html yang sama. Misalnya dua type paragraf, peragraf pertama
menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.
Contoh Penggunaan atribut class di dalam HTML :
.left {text-align: left}
.center {text-align: center}
</style>
<p class=”left”>Paragraf ini rata kiri</p>
<p class=”left”>paragraf ini rata tengah</p>
Contoh Class CSS
- <html>
- <head>
<title>CSS Pertamaku</title>
-<style type="text/css">
.left {text-align: left}
.center {text-align: center}
</style>
<p class="left">Paragraf ini rata kiri dipanggil melalui Class Left</p>
<p class="center">Paragraf ini rata tengah dipanggil melalui Class Center</p>
</body>
</html>
Paragraf ini ram kiri dipanggil melalui Class Left
Paragraf ini rata reugah dipanggil melalui Class Center

CLASS
Gunakan class untuk membuat berbagai
macam variasi bagi satu tag HTML.
Ex. H1 menggunakan tiga warna
ID SELECTOR
ID Selector digunakan untuk menyeleksi Penulisan Komentar pada CSS;
elemen berdasarkan ID tertentu. Dalam
penggunaannya, ID selector diawali /* dan */
dengan tanda pagar (#) atau hash.
Cara penulisan ID selector;
#nama-ID {property: value;}
Untuk menempelkan ID selector ke HTML;

taghtml#nama-ID {property: value;}
Id Pada CSS
2. Id pada CSS
ID bentuk penulisannya selalu menggunakan tanda # (kres) sebagai penanda
bahwa CSS akan diterapkan pada elemen id.
Contoh :
#polesteks {color: green; size: 34;}
</style>
<body>
<b id=”polesteks”>Saya adalah CSS</b>
<p id=”polesteks”>Saya adalah CSS</b>
</body>
Id Pada CSS
ID selector digunakan dengan tujuan mendefinisikan per-elemen
dasar.
Setiap halaman id selector hanya boleh digunakan dengan satu id
unik, itulah yang menjadi perbedaannya dengan class selector.
Dengan class selector kita dapat mendefinisikan perbedaan style
untuk tag elemen html yang sama.
Tetapi dengan id selector kita hanya diperbolehkan memanggil satu
id untuk satu elemen yang sama.
Id Pada CSS
#tebal { font-weight : bold; color : red; }
#miring { font-style : italic; color: blue; }
<p id=”tebal”>Paragraf ini ditulis dengan huruf tebal dan warna
merah</p>
<p id=”miring”>Paragraf ini ditulis dengan huruf miring dan warna
biru</p>
KONSEP DASAR CSS LAYOUT
PENDAHULUAN
Layout website bisa diartikan sebagai tata letak elmeen-elemen dari sebuah halaman
website. Sebuah layout website yang paling sederhana terdiri dari elemen-elemen berikut :
1. Header, merupakan elemen yang berisi judul dan sub judul (deskripsi) website. Biasanya
header di bagian atas.
2. Menu atau navigasi, elemen yang berisi tombol-tombol navigasi yang berguna mengarahkan user ke
halaman tertentu.
3. Konten, merupakan elemen utama website, yang berisi informasi utama yang dibahas
dalam halaman website tersebut.
4. Sidebar, merupakan elemen yang berisi informasi-informasi pendukung dari konten
website.
5. Footer, elemen yang biasanya berisi informasi tentang pembuatan atau hak cipta
website tersebut. Biasanya elemen ini diletakkan paling bawah.
BENTUK LAYOUT
SEBELUM HTML5
MENGGUNAKAN HTML5
FORMAT HALAMAN DENGAN CSS
MENAMBAH HEADER
MENAMBAHKAN NAVIGASI
MENAMBAHKAN SIDEBAR DAN CONTENT
MENAMBAHKAN FOOTER
MENU
ITEM PADA MENU NAVIGASI
a:link {…}
ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari
content atau image yang telah diberi link.
a:hover {…}
adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut.
a:active {…}
dimana keberadaan text ketika mouse di klik
Menu Navigasi setelah ada CSS dan Ketika file dibuka
Menu Navigasi setelah ada CSS dan Ketika mouse berada diatas
Menu Navigasi setelah ada CSS dan Ketika di klik

MENU DROPDOWN
SCRIPT
TERIMAKASIH

T2. CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

T2. CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

SWONO SIBAGARIANG

CSS ( CASCADING STYLE SHEET ) swono@polibatam.ac.id

Yaitu menuliskan secara langsung script CSS kedalam tag HTML

Selector/Pattern Contoh Penulisan Keterangan Versi

Rgb(x%,x%,x%) Sebuah warna dengan

#rrggbb Sebuah warna dengan

Untuk menempelkan class ke HTML;

Paragraf ini ram kiri dipanggil melalui Class Left

Paragraf ini rata reugah dipanggil melalui Class Center

Untuk menempelkan ID selector ke HTML;

Menu Navigasi setelah ada CSS dan Ketika di klik

Anda mungkin juga menyukai