Author : Minarni, S.Kom.,MM

Ukuran: px

Mulai penontonan dengan halaman:

Download "Author : Minarni, S.Kom.,MM"

Indra Sumadi
7 tahun lalu
Tontonan:

1 S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia

2 Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web Akses web lebih cepat di-loading (mempercepat pembacaan HTML) Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang Ringan pada filesize/ bandwidth lebih kecil Dapat digunakan pada semua web browser

3 Perbandingan jika menggunakan CSS Jika ingin merubah tulisan menjadi berwarna merah misalnya, kita harus menuliskan coding <font color= red ></font> Jika ingin membuat text berwarna merah lagi maka kita akan menuliskan lagi <font color= red ></font> setiap kali kita ingin merubah font-nya Jika menggunakan CSS, kita cukup membuat selector untuk p(paraghraph) maka otomatis tampilannnya sama dengan sifat tag p hanya ditambahkan perubahan warna, seperti berikut : p { color: red; Panggil dengan cara ketikkan : <p>text Warna Merah</p> Jika ingin membuat warna merah lagi tinggal panggil tag <p> di awal setiap teks yang ingin dirubah

4 Penulisan CSS ditandai dengan script <style> Penulisan CSS bisa diletakkan di head atau di body, atau pun di file terpisah sendiri. Contoh : <style type="text/css"> p{ font-family: Comic Sans Ms; font-size: 18px; i { font-family: sans; color: blue; </style>

5 <body> <p>daftar FACEBOOK</p> <i>nama</i> </body>

6 Untuk membuat text berwarna merah, bercetak tebal dan bergaris bawah, maka coding CSS-nya : p{ color: red; font-weight: bold; text-decoration: underline; Untuk membuat text h1(heading1) dibuat dengan warna biru dan jenis tulisan Futura Md BT, maka coding CSS-nya : h1{ color: blue; font-family: Futura Md BT;

7 Background Attachment Berfungsi untuk mendefinisikan cara penampilan sebuah background gambar. Mengatur gambar layar, apakah ikut bergerak jika scroll kita gerakkan ke atas maupun ke bawah, nilainya ada dua yaitu fixed dan scroll. Background Color Berfungsi untuk mengubah latar belakang sebuah halaman Background Image Berfungsi untuk mengubah latar belakang sebuah halaman dengan gambar Background Position Berfungsi untuk mengatur letak sebuah gambar yang dihasilkan. Nilai properti background position bisa berupa : Left/ Right / Center sedangkan nilai yang kedua bisa berupa Top/middle/bottom Background Repeat Berfungsi untuk mengatur perulangan gambar. Nilainya bisa berupa Repeat-y, repeat-x, no-repeat

8 Background body { background-image : url( images.jpg ); Background-repeat: no-repeat; Background-attachment: fixed; Background-position: center middle;

9 ID dan Class ID dan Class dalam CSS digunakan jika ingin memberikan lebih dari satu jenis style pada suatu tag html. Dengan adanya id dan class ini kita dapat membrikan style masingmasing pada suatu kolom atau paragraf tertentu. ID ditandai dan selalu diawali dengan tanda pagar (#) sedangkan class selalu ditandai dengan tanda titik (.).

10 ID dan Class #menu { background: blue;.intro { font-family: tahoma; font-size: 20px; font-weight: bold; color: yellow; <body> <div id= menu > <p class= intro >AKU</p> <div class= intro >DIV</p> </body>

11 Border Secara umum ada beberapa nilai yang terkandung dalam properti ini, diantaranya : Dashed, efek garis putus-putus Dotted, efek garis titik-titik Double, efek garis double Groove, efek garis 3D dengan tipe groove Inset, efek garis 3D denga tipe inset None, tanpa garis Outset, efek garis 3D denga tipe outset Ridge, efek garis 3D denga tipe ridge Solid, efek garis normal

12 Border Border-bottom Border-bottom-color Border-bottom-style Border-bottom-width Border-left Border-left-color Border-left-style Border-left-width Border-top Border-top-color Border-top-style Border-top-width Border-right Border-right-color Border-right-style Border-right-width

13 Border <html> <head> <title>border CSS</title> <style> p{border-top-style: solid; border-left-style: dotted; border-bottom-style: dashed; border-right-style: double; </style> </head> <body> <p>border style solid, dotted, dashed dan double</p> </body> </html>

14 Border <html> <head> <title>nyekrip: Belajar Border CSS</title> <style> p{border-style:solid; border-left-width:10px; border-top-width:20px; border-right-width:30px; border-bottom-width:40px; </style> </head> <body> <p>paragraf nih, dengan lebar border yang berbeda pada tiap sisi</p> </body> </html>

15 Border p.pertama { border-style: solid; border-color: red; border-width:10px; p.kedua { border-style: solid; border-color: #98bf21; border-width:10px; p.ketiga { border-style: solid; border-color: rgb(252,217,197); border-width:10px;

16 Padding Padding merupakan properti yang digunakan untuk mengatur jarak ruang bagian bibir tepi dalam sebuah elemen (mengatur jarak border dengan konten). Padding dibagi 4 properti, diantaranya : Padding-top Padding-right Padding-bottom Padding-left

17 Padding <html> <head> <style>.top { padding-top: 20px; </style> </head> <body> <div class="top"> HAVE A NICE DAY </div></body> </html> <html> <head> <style>.pad { padding-top: 20px; padding-left: 20px; </style> </head> <body> <div class= pad"> HAVE A NICE DAY </div></body> </html>

18 Margin Padding berfungsi untuk mengatur jarak antara bibir tepi dengan konten di dalam suatu elemen Margin berfungsi untuk mengatur jarak antara bibir tepi dengan konten di luar suatu elemen Margin-top Margin-right Margin-bottom Margin-left

19 <html> <head> <style> body { background-color: blue; color:yellow; #top { border-style: solid; margin-top: 50px;.intro { font-size: 20px; font-weight: bold; padding: 10px 30px 40px 30px; </style> </head> <body> <div id="top"> <div class="intro"> margin dan padding top right bottom left </div> </div> </body> </html>

20 <html> <head> <style> body { background-color: blue; color:yellow; #top { border-style: solid; margin-top: 50px;.intro { font-size: 20px; font-weight: bold; padding: 10px 30px 40px 30px; </style> </head> <body> <div id="top"> <div class="intro"> margin dan padding top right bottom left </div> </div> </body> </html>

dokumen-dokumen yang mirip

CSS Cascading Style Sheet

CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style