Materi Tambahan CSS-1

download Materi Tambahan CSS-1

If you can't read please download the document

Transcript of Materi Tambahan CSS-1

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

TEXT dalam CSSBuatlah script CSS berikut. Latihan CSS h1{color:#990000;} h2{color:#000099;} h3{color:#006600;} Mempercantik Desain Web dengan CSS Instruksi color diletakkan sebagai style pada tag HTML h1 (heading 1), h2, h3 dan seterusnya. Hal ini dilakukan agar tidak perlu membuat nama style sendiri. Karena jika terlalu banyak nama style akan cukup membingungkan kita untuk memilih style yang diinginkan.

By. Mr.Kholil (www.mr kholil.com )

Halaman -1 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Agar tampilan teks lebih menarik, atributnya dapat kita atur sedemikian rupa. Lihat script berikut ini. Latihan CSS h1{ text-align:center; color:#990000; text-decoration:underline; letter-spacing:0.1cm;} h2{ text-align:left; color:#000099; textdecoration:overline;} h3{ text-align:right; color:#006600; text-decoration:linethrough; } Mempercantik Desain Web dengan CSS

By. Mr.Kholil (www.mrkholil.com )

Halaman -2 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Mengubah Bentuk Karakter

Cobalah script seperti berikut ini dan lihat hasil yang didapatkan. Latihan CSS h1 {text-transform:none;} h2 {text-transform:capitalize;} h3 {text-transform:lowercase;} h4 {text-transform:uppercase;} ShOw TiMe ShOw TiMe ShOw TiMe ShOw TiMe

By. Mr.Kholil (www.mr kholil.com )

Halaman -3 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Teks dengan Background Warna

Yang dapat anda lakukan dengan teks adalah mempercantik teks tersebut dengan warna background pada teks tersebut. Caranya dengan memberikan sintaks background-color. Latihan CSS Tips CSS

By. Mr.Kholil (www.mr kholil.com )

Halaman -4 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Teks Latar Gambar

Selain warna juga dapat digunakan gambar sebagai latar sebuah teks. Caranya hanya dengan mengganti properti warna menjadi background-image pada style CSS. Scriptnya seperti berikut. Teks Latar Gambar Tips CSS

By. Mr.Kholil (www.mr kholil.com )

Halaman -5 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Teks dengan Border

Latihan CSS .indah { border-color:#FF9900; border-style:solid; border-width:thin; background-color:#000000; color:#FFFFFF; } Perindah Teks

By. Mr.Kholil (www.mr kholil.com )

Halaman -6 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Membuat Dropcap

Tampak cantik, sudah tentu dapat dilakukan. Dalam word kita bisa membuat huruf pertama dalam sebuah paragraf menjadi besar atau disebut sebagai Dropcap. Bagamana jika diweb? Cobalah script berikut ini. Latihan CSS p {text-align:justify;} .dropcap { width: 2px; height: 2px; float: left; text-align: center; font-size: 35pt; color:red; font-style:italic } a aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr

rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd

By. Mr.Kholil (www.mrkholil.com )

Halaman -7 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd aaaaaa bbbb bbbbb cccccc cccccc ddddd dddddd ssssssss rrrrrr rrrrrrrr eeeeee eeeeee tttttttt ttttttttttt ddddddd

Memilih Jenis Font

h1 {font-family:sans-serif;} h2 {font-family:Times New Roman;} h3 {font-family:Verdana;} Heading 1 Sub Heading Paragraf

By. Mr.Kholil (www.mrkholil.com )

Halaman -8 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

Memilih Ukuran Font

Ukuran font sangat menentukan tingkat kenyamanan pengguna untuk membaca sebuah teks atau kalimat. Biasanya situs berita menyajikan font dalam ukuran mudah terbaca dan tidak panjang halamannya. Cobalah style berikut ini. Latihan CSS h1 {font-family:Arial; font-size:14px; color:#FF0000;} h2 {font-family:Verdana; font-size:10px; color:#003399; text-align:justify;}

Tips : Memperindah Tampilan website dengan CSS. Dalam memperindah tampilan website, salah satu script yang

By. Mr.Kholil (www.mr kholil.com )

Halaman -9 |

TUTORIAL CSS-TAMBAHAN MATERI DESAIN WEB

dapat digunakan adalah CSS (Cascading Style Sheet).

By. Mr.Kholil (www.mrkholil.com )

Halaman -10 |