CASCADING STYLE SHEET Allahumma inni asaluka isyatan haniyyah

HTML: Tag div (Division) Untk membuat grup dari tag-tg HTML. Contoh: <div id= "header"

• untuk menamai setiap div digunakan atribut id atau class • Atribut ID

CSS • Secara khusus CSS adalah kumpulan kode yang digunakan untuk mendefinisikan desain dari

Peletakkan kode css dapat dilakukan di tiga cara berikut: 1. Inline CSS Yaitu penulisan

2. Internal CSS Yaitu menuliskan langsung script CSS di file HTML-nya. Contoh : Belajar

3. External CSS Yaitu memanggil file CSS dari folder/lokasi lain, dengan kata lain file

Simpan file berikut dengan nama: CSS 2. PHP <html> <head> <title>Membuat CSS External</title> <link

Simpan file berikut dengan nama: test 2. css H 1{Font-family: "comic sans ms"; fontsize:

• Selector adalah elemen/tag HTML yang ingin diberi style. nama tag yang ingin

<html><head> <style type="text/css">. box{ background-color: green; color: yellow; width: 100 px; height: 100 px;

Property-property pada CSS Margin margin-top: 20 px; margin-right: 30 px; margin-bottom: 50 px; margin-left:

Font • font-size : 12 px; atau font-size : 12 pt; • font-weight :

Image Sprite sekumpulan gambar berbeda yang disatukan dalam satu file gambar. <html><head> <style type="text/css">

CSS Reset • Setiap browser memiliki Style atau File CSS yang akan diterapkan pada

Floating Yaitu untuk mengatur rata kiri atau rata kanan elemen HTML <style> img {

Permasalahan pada Floating <style> #wrapper{ width : 960 px; margin : 0 auto; /*agar

• Skrip di atas menghasilkan gambar yang tumpang tindih • Hal ini dikarenakan

Positioning: static, relative, dan absolut • Secara default, seluruh elemen/tag HTML memiliki positioning static,

<style> #box{ width: 300 px; height: 300 px; background: green; } #box 2{ width:

Untuk membatasi pergerakan dari #box 2 yang memiliki positioning absolute yaitu dengan menambahkan positioning

Positioning: fixed Sifat dari position fixed hampir sama dengan absolute, namun posisi dari elemen

Pseudo-Class : first-child dan : last-child • Pseudo Class digunakan untuk memberikan efek tertentu

Pseudo-Class untuk Link/Anchor Ada beberapa pseudo-class untuk anchor/link: • /* untuk link yang belum

• Perhatikan urutan ketika penulisan semua pseudo class tersebut (Jika bermaksud menuliskan seluruh

Pseudo-Class : first-child dan : last-child digunakan untuk memilih elemen pertama dan terakhir dari

Slides: 27

Download presentation

CASCADING STYLE SHEET Allahumma inni as’aluka `isyatan haniyyah wa mitatan sawiyyah wa maraddan ghaira makhziyyin wa la fadhih

HTML: Tag div (Division) Untk membuat grup dari tag-tg HTML. Contoh: <div id= "header" > </div> <div id= "content" > </div> <div id= "sidebar" > </div> <div id= "footer" > </div>

• untuk menamai setiap div digunakan atribut id atau class • Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan • Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. • Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama • Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML)

CSS • Secara khusus CSS adalah kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup , dimana bahasa markup ini salah satunya adalah HTML • Secara umum CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML • Pembuatan markup yaitu proses penerjemahan dari desain ke dalam kode HTML

Peletakkan kode css dapat dilakukan di tiga cara berikut: 1. Inline CSS Yaitu penulisan kode CSS dalam tag HTML <html> <p style="background: blue; color: white; "> Style Menggunakan CSS</p> </body> </html>

2. Internal CSS Yaitu menuliskan langsung script CSS di file HTML-nya. Contoh : Belajar CSS Selamat Datang CSS <html><head> <style type="text/css"> p {color: white; } body {background-color: black; } </style> </head> <body> <p>Selamat Datang CSS</p> </body></html>

3. External CSS Yaitu memanggil file CSS dari folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Eksternal style ditulis di text editor lain dengan ekstention. css Simpan file berikut dengan nama: CSS 1. PHP <html> <head> <link rel="stylesheet" type="text/css" href="test. css"/> </head> <body> <h 3> Selamat Datang CSS </h 3> </body> </html> Simpan file berikut dengan nama: test. css

Simpan file berikut dengan nama: CSS 2. PHP <html> <head> <title>Membuat CSS External</title> <link rel="stylesheet" type="text/css" href="test. css"> </head> <body> <h 1>Contoh penggunaan Cascade Style Sheet External</h 1> <p> Style Sheet external adalah style sheet yang didefinisikan secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file terpisah, maka harus diberikan ekstensi penyimpanannya dengan diakhiri . css (contoh : external. css) dan tidak perlu didefinisikan di dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus dihubungkan menggunakan sebuah link untuk mengakses atau memanggilnya. </p> </body></html>

Simpan file berikut dengan nama: test 2. css H 1{Font-family: "comic sans ms"; fontsize: 16 pt; font-weight: bold; Color: blue} P{Font-family: "monotype corsiva"; fontsize: 12 pt; font-weight: bold; Color: red; textalign: justify} body{font-family: verdana; font-size: 12 px; background-color: #00 FFFF}

• Selector adalah elemen/tag HTML yang ingin diberi style. nama tag yang ingin diberi style dapat ditulis langsung tanpa menambahkan tanda <>. • Jika tag HTML yang ingin diberi style memiliki ID, nama ID dapat dituliskan diawali tanda # • Jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (. ) diikuti dengan nama class

<html><head> <style type="text/css"> #box{ width: 500 PX; height: 500 PX; background-image : url(logo. png); }</style> </head> <body> <div id ="box"></div> </body></html>

<html><head> <style type="text/css">. box{ background-color: green; color: yellow; width: 100 px; height: 100 px; margin-bottom: 50 px; padding-left: 20 px; </style> </head> <body> <div class="box">Box ke satu</div> <div class="box">Box ke dua</div> </body></html>

Property-property pada CSS Margin margin-top: 20 px; margin-right: 30 px; margin-bottom: 50 px; margin-left: 40 px; CSS Shorthand Border border-color : black; border-style : solid; border-width : 5 px; CSS Shorthand border : 5 px solid black; margin : 20 px 30 px 50 px 40 px;

Font • font-size : 12 px; atau font-size : 12 pt; • font-weight : bold; • letter-spacing : 15 px; atau letter-spacing : -2 px; • line-height : 30 px; • text-align : center; Image • background-image : url (images/background. jpg); • background-repeat : repeat-x; • background-repeat : repeat-y; • background-position : nilai. X nilai. Y; • background-position: 50 px;

Image Sprite sekumpulan gambar berbeda yang disatukan dalam satu file gambar. <html><head> <style type="text/css"> #button { width: 240 px; height: 83 px; background-image : url(gambar-artikel. jpg); background-position-y : 0; } #button: hover{ background-position-y : -83 px; }}</style> </head> <body> <div id ="button"></div> </body></html>

CSS Reset • Setiap browser memiliki Style atau File CSS yang akan diterapkan pada setiap halaman • web yang dibuka. CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh property-property yang telah disetting oleh browser, seperti margin, padding, warna huruf (link) ukuran huruf heading dan lain sebagainya. Perhatikan CSS contoh berikut : *{ margin: 0; padding: 0; }

Floating Yaitu untuk mengatur rata kiri atau rata kanan elemen HTML <style> img { float: left; } </style> <img src="logo. png" alt="gambar"/> <p>Style Sheet external adalah style sheet yang didefinisikan secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file terpisah, maka harus diberikan ekstensi penyimpanannya dengan diakhiri . css </p> Ket: atribut alt digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang

Permasalahan pada Floating <style> #wrapper{ width : 960 px; margin : 0 auto; /*agar wrapper tetap berada ditengah */ } #header { width: 100%; height: 50 px; background: orange; margin-bottom: 10 px; } #content{ padding: 20 px; background : green; margin-bottom : 10 px; } #artikel{ width : 600 px; height : 700 px; float : left; background: orange; } #sidebar { width : 300 px; height: 200 px; float : right; background: orange; } footer{ width : 100%; height: 50 px; background: green; } </style> <div id="wrapper"> <div id="header"></div> <div id="content"> <div id="artikel"></div> <div id="sidebar"></div> <div id="footer"></div>

• Skrip di atas menghasilkan gambar yang tumpang tindih • Hal ini dikarenakan menambahkan floating pada #artikel dan #sidebar, sehingga #content menganggap tidak ada element didalamnya. • Ada dua cara untuk menyelesaikan kasus ini : 1. Menambahkan style overflow: hidden pada #content{ … overflow: hidden; } 2. Menambahkan div kosong dengan style clear: both; sebelum penutup content … <div id=“sidebar”></div> <div style=“clear: both; ”></div>

Positioning: static, relative, dan absolut • Secara default, seluruh elemen/tag HTML memiliki positioning static, artinya tidak dapat menentukan posisi elemen tersebut. • Jika ingin merubah posisi dari elemen tersebut maka harus memberikan position: relative dan selanjutnya dapat menggunakan property top, right, bottom, dan left untuk menentukan posisi elemen yang bersangkutan <style> #box{ background : green; width : 300 px; height : 300 px; top : 100 px; left : 200 px; } </style> <div id="box"></div> <style> #box{ background : green; width : 300 px; height : 300 px; top : 100 px; left : 200 px; Position: relative; } </style> <div id="box"></div>

Untuk membatasi pergerakan dari #box 2 yang memiliki positioning absolute yaitu dengan menambahkan positioning relative pada parentnya yakni #box <style> #box{ width: 300 px; height: 300 px; background: green; position: relative; } #box 2{ width: 50 px; height: 50 px; background: yellow; position: absolute; bottom: 0; right: 0; } </style> <div id="box"> <div id="box 2"></div> Menggunakan nilai negatif … #box 2{ width: 50 px; height: 50 px; background: yellow; position: absolute; bottom: -25 px; right: 20 px; } … Catatan: Jadi Relative sebagai sangkar bagi Absolute, oleh karena itu pergerakan Absolute dibatasi oleh Relative

Positioning: fixed Sifat dari position fixed hampir sama dengan absolute, namun posisi dari elemen fixed akan tetap berada posisi yang ditentukan walaupun browser dizoomin/out atau Discroll ke atas atau ke bawah <style> #social{ width: 300 px; height: 300 px; background: green; Position: fixed; left: 0; top: 100 px; } </style> <div id="social"></div>

Pseudo-Class : first-child dan : last-child • Pseudo Class digunakan untuk memberikan efek tertentu pada selector. Misalnya efek ketika cursor berada di atas suatu elemen (hover), ketika cursor meng-klik suatu elemen dan lain sebagainya. • Berikut adalah cara penulisan pseudo class : selector: pseudo-class { property: value; } • Misalnya menambahkan pseudo-class : hover pada sebuah link a: hover { color : red; }

Pseudo-Class untuk Link/Anchor Ada beberapa pseudo-class untuk anchor/link: • /* untuk link yang belum di klik */ a: link { color: blue; } • /* untuk link yang sudah di klik */ a: visited { color: green; } • /* ketika cursor berada di atas link */ a: hover { color: red; } • /* ketika link dalam keadaan aktif atau terpilih */ a: active { color: orange; }

• Perhatikan urutan ketika penulisan semua pseudo class tersebut (Jika bermaksud menuliskan seluruh pseudo class untuk link): – : hover harus ditulis sesudah : link dan : visited – : active harus ditulis sesudah : hover. • Jika tidak demikian maka efek tersebut tidak akan berjalan dengan baik • Pseudo Class : hover dan : active tidak hanya bisa digunakan untuk link saja melainkan bisa diterapkan pada elemen/tag-tag HTML lainnya.

Pseudo-Class : first-child dan : last-child digunakan untuk memilih elemen pertama dan terakhir dari suatu selector <style> ul li: first-child{ color: green; } ul li: last-child{ color: orange; } </style> <ul> <li>Item ke 1</li> <li>Item ke 2</li> <li>Item ke 3</li> <li>Item ke 4</li> <li>Item ke 5</li> </ul> <div> <p> Paragraf pertama </p> <p> Paragraf kedua </p> <p> Paragraf ketiga </p> <p> Paragraf keempat </p> </div>