MODUL II CASCADING STYLE SHEET (CSS) Apa itu CSS? Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. [1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. [2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua. CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model. (source : id.wikipedia.org)
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
MODUL IICASCADING STYLE SHEET (CSS)
Apa itu CSS?
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. [1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model. (source : id.wikipedia.org)
1. Sintaks Penulisan Kode CSSAturan penulisan kode CSS sebagai berikut :
The selector points to the HTML element you want to style.The declaration block contains one or more declarations separated by semicolons.Each declaration includes a property name and a value, separated by a colon.
2. CSS CommentComment pada CSS digunakan untuk memberikan deskripsi pada program, sehingga lebih memudahkan dalam memahami struktur program. Comment hanya sebagai penunjuk, tidak akan dieksekusi sebagai baris program.
3. CSS Selector
CSS Selector digunakan untuk memilih element mana pada HTML yang ingin diterapkan CSS. Element pada HTML diantaranya adalah id, class dan group.
3.1 Selector dengan id
3.2 Selector dengan Class
3.3
Selector dengan Group
4. Menyisipkan Kode CSS (3 cara)Ada 3 cara untuk menyisipkan kode CSS pada HTML yaitu :
External style sheet Internal style sheet Inline style
4.1 External Style SheetBuat dua file. File pertama dengan nama file eksternal.html dan file kedua dengan nama file style.css
Kode HTML file eksternal.html
<html><head><title>Coba CSS Eksternal</title><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body><h1> Coba CSS dari eksternal </h1></body></html>
Kode pada file style.css
body { background-color: lightblue;}h1 { color: navy; margin-left: 20px;}
4.2 Internal Style Sheet
4.3 Inline Style Sheet
Konsep lain adalah Multiple Style Sheet dan Multiple Styles into one dibahas lengkap di w3schools
5. CSS Background
6. CSS Text
7. CSS Font7.1 Font Family
7.2 Font Style
7.3 Font Size
8. CSS List<!DOCTYPE html><html>
<head><style>ul.a { list-style-type: circle;}
ul.b { list-style-type: square;}
ol.c { list-style-type: upper-roman;}
ol.d { list-style-type: lower-alpha;}</style></head><body>
<p>Example of unordered lists:</p><ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul>
<ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul>
<p>Example of ordered lists:</p><ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol>
<ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol>
</body></html>
10. CSS Table
10.1 Table Border
10.2 Collapse Border
10.3 Table width height
<!DOCTYPE html><html><head><style>table, td, th { border: 1px solid black;}
10.3 Table Color
<!DOCTYPE html><html><head><style>table, td, th { border: 1px solid black;}
<!DOCTYPE html><html><head><style>table, td, th { border: 1px solid green;}
11.CSS Box Model
<!DOCTYPE html><html><head><style>table, td, th { border: 1px solid green;}
12. CSS Border
13.CSS Padding
14. CSS Positioning
15. CSS Positiong Absolute
16.Overlapping Position
17. CSS Float
18. CSS Horizontal Align
19. CSS Images
<!DOCTYPE html><html><head><style>div.img { margin: 5px;
<!DOCTYPE html><html><head><style>div.img { margin: 5px;
<html><head><style>div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black;}
div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000;}</style></head><body>
<div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.</p> </div></div>
</body></html>
20. CSS Text Shadow
<html><head><style>div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black;}
div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000;}</style></head><body>
<div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.</p> </div></div>
</body></html>
Related Documents
