Memahami Konsep Dasar CSS

Tujuan :
Memahami tentang konsep CSS
Memahami aturan penulisan pada CSS
Memahami selector sebagai pengontrol design
Memahami pembuatan background
Memformat text pada web
Memahami pengaturan bentuk font

Konsep CSS
adalah suatu teknik penulisan kode untuk
memperindah dan mempermudah dalam pengkodean
HTML dengan tujuan untuk memperindah tampilan
situs.
CSS dimulai dengan :
 <STYLE TYPE="text/css">
 NamaKODeBaru { Parameter : nilai }
 </STYLE>

Penggunaan CSS :
External Style Sheet
Internal Style Sheet
Inline Style Sheet

External Style Sheet
Dengan menggunakan teknik ini kita dapat memanggil
style CSS pada file CSS yang kita inginkan dengan
menggunakan perintah “Link rel” yang berfungsi untuk
menghubungkan kedalam sebuah style CSS eksternal
dengan nama yang telah kita tentukan.
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
<link, merupakan tag pembuka diakhiri dengan tanda “>”

Internal Style Sheet
Pada teknik ini style diletakkan pada tengah tag
antara tag <head> dan </head>. Aturan-aturan dalam
style ini diatur sedemikian rupa untuk digunakan
pada suatu tempat maupun untuk keseluruhan situs.
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>

Inline Style Sheet
Adalah CSS yang dibuat dalam sebuah tag HTML
yang hanya berlaku untuk dokumen yang diapitnya
saja. Biasanya teknik ini digunakan pada
pemformatan khusus pada sebuah elemen HTML dan
tidak digunakan untuk memformat seluruh elemen
dalam dokumen web.

ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link ,
dll).
property : atribut yang akan diubah
Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;
Cara penulisan yang salah :
FONT-FAMILY : “sans-serif”;
FONT-SIZE : ‘small’;

Cara mendeklarasikan kelompok : (tanda koma serta
&)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
Menggunakan tanda : /* ….. */
Menggunakan tanda : <!-- - - >

Praktikum1: Pengaturan warna dengan model
External CSS
Simpan dengan nama file *.CSS

Praktikum1: HTML
Simpan dengan nama file *.html

Praktikum2: Pengaturan warna dengan
model Internal CSS

Praktikum3: Pengaturan warna dg CSS
Model Inline Style Sheet

Praktikum4: Pengaturan Selector
merubah Body

Bebas merubah Body

Class Bebas merubah Body

Praktikum7: Pengaturan Format
halaman Web dengan Margin

Praktikum8: Pengaturan Format halaman
Web dengan Pemetaan Padding

Praktikum9: Pengaturan Warna dengan CSS

Praktikum10: Pengaturan
Background campuran dengan CSS

Praktikum11: Pengaturan
Background image berulang

Praktikum12: Pengaturan teks pada
web dengan CSS

Praktikum13: Pengaturan teks
pada web dengan CSS

Memahami Konsep Dasar CSS

Recommended

Recommended

More Related Content

Similar to Memahami Konsep Dasar CSS

Similar to Memahami Konsep Dasar CSS (20)

Memahami Konsep Dasar CSS