Post on 08-Jul-2015
description
Ely Setyo Astuti,ST., MT.
Tujuan :Memahami tentang konsep CSSMemahami aturan penulisan pada CSSMemahami selector sebagai pengontrol designMemahami pembuatan backgroundMemformat text pada webMemahami pengaturan bentuk font
Konsep CSSadalah 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 SheetInternal Style SheetInline Style Sheet
External Style SheetDengan 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 SheetPada 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 SheetAdalah 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 CSSSyntaxis CSS dibagi dalam 3 bagian :selector {property : value}dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubahCara 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 CSSSimpan dengan nama file *.CSS
Praktikum1: HTMLSimpan dengan nama file *.html
Hasil
Praktikum2: Pengaturan warna dengan model Internal CSS
Hasil
Praktikum3: Pengaturan warna dg CSS Model Inline Style Sheet
Hasil
Praktikum4: Pengaturan Selector merubah Body
Hasil
Praktikum5: Pengaturan Selector Bebas merubah Body
Hasil
Praktikum6: Pengaturan Selector Class Bebas merubah Body
Hasil
Praktikum7: Pengaturan Format halaman Web dengan Margin
Hasil
Praktikum8: Pengaturan Format halaman Web dengan Pemetaan Padding
Hasil
Praktikum9: Pengaturan Warna dengan CSS
Hasil
Praktikum10: Pengaturan Background campuran dengan CSS
Hasil
Praktikum11: Pengaturan Background image berulang
Hasil
Praktikum12: Pengaturan teks pada web dengan CSS
Hasil
Praktikum13: Pengaturan teks pada web dengan CSS
Hasil
Selamat mengerjakan..