materi tambahan css-1
Post on 04-Dec-2014
41 Views
Preview:
TRANSCRIPT
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 |
top related