PWPB - Pertemuan 9 (CSS)

Assalamu'alaikum Wr.Wb
Salah sejahtera bagi kita semua...
       

          hai semua, balik lagi di SekolahQue... Untuk sekarang kita akan membahas mengenai CSS. Apa sih itu CSS? Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

Nahh...jika sudah paham seperti apa dan bagaimana fungsinya. Sekarang, mari kita mulai mempelajari codingannya :)

(Untuk mengetahui codingan silahkan klik setiap judul tugas yang diberi warna biru)

!-START-!

• inlinecss.html

            Disini, kita akan membuat sebuah CSS Internal pada file HTML. Langsung saja, fungsi tag <style> pada HTML berfungsi sebagai element yang digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen web (HTML). Dan ingat ya, untuk penggunaan CSS setiap value yang kita cantumkan pada property atau tag CSS harus di akhiri dengan symbol "; (titik koma)".

SCREEN SHOT :

• EmbeddedWithClassdanId1.html

Untuk selektor ID ditandai dengan tanda (#) didepannya(CSS).
-ID
Attribute id digunakan dalam penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai id yang sama.
-CLASS
Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (kode HTML).

SCREENSHOT :

• EmbeddedWithClassdanId2.html

        Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk beberapa objek formseperti radio atau checkbox. Selain memberikan keterangan, tag label juga memudahkan penggunan dalam memasukkkan data (membuat form menjadi user friendly). Sedangkan tag <input>
berfungsi untuk memasukan sebuah teks atau menginput teks pada suatu form. misalnya form Log-in.

SCREENSHOT:

• ExternalWithClassdanID.html

        Nahh...Disini, kita akan membuat file external CSS. Berbeda dengan sebelumnya yang menggabungkan file CSS di dalam file HTML. Kita buat file CSS dan file HTML itu secara terpisah atau secara external. Dan untuk memanggil file CSS itu agar html bisa di design menggunakan file Css yaitu dengan menggunakan tag <link rel="stylesheet" href="file css yang Anda buat" type="text/css"> nahh attribut href itu untuk memanggil file css yang telah di buat.

• StyleExternal.css

.kotak{ border: solid; padding: 5px; } #BahasaIndonesia{ width: 400px; height: 100px; float: left; background-color: papayaWhip; font-family: consolas; } #Jepannese{ width: 400px; height: 100px; float: left; background-color: thistle; font-family: impact; } #english{ width: 400px; height: 100px; float: left; background-color: LightCyan; font-family: Arial; }

SCREENSHOT:

• EmbHeadingColor.html

Disni hampir sama seperti penggunaan CSS External di atas. 

SCREENSHOT:

• FormatCharacterSpacing.html

      Judul tugas adalah link codingan HTML. Sedangkan, yang di bawah ini adalah codingan CSS, Dan hasil akhirnya bisa di lihat Screenshotan di bawah ini.

• ExtFormatKarakter.css

p{ letter-spacing: 0.5cm; color: DarkSeaGreen; } h4{ letter-spacing: -2px; color: coral; }

SCREENSHOT:

• TextDecoandSpacing.html

       <em> menunjukkan stress emphasis atau dapat dikatakan konten/kata yang perlu mendapatkan penekanan atau perhatian khusus. Dalam penjelasan lain, em mengandung arti emphatic stress yang menunjukkan penekanan yang tegas.

• ExtDecoandSpacing.css

em{ text-decoration: overline; color: salmon; } h2{ text-decoration: line-through; } h3{ text-decoration: underline; } a{ text-decoration: none; color: LawnGreen; } p.duasenti{ word-spacing: 2cm; } p.limapiksel{ word-spacing: 5px; }

SCREENSHOT:

• EmbAlignandUpper.html

       Fungsi attribute text-transform adalah untuk mengubah atau mentransformasi sebuah text. contohnya: Kita memasukkan sebuah text yang berhuruf kecil(tidak kapital / tidak menggunakan CAPSLOCK) lalu kita menggunakan text-transform :Uppercase dengan class="besar" maka teks yang tadinya kecil saat di run atau di buka format webnya akan menjadi CAPSLOCK. Jika kurang paham, bisa lihat hasil SCREENSHOT dan codingan di judul link.

SCREENSHOT:

• Tugasp9.html

Nahhh...disini saya akan mencontohkan cerita pendek di html menggunakan file CSS external.

• Tugasp9.css

h1{ text-align: center; margin-top: 2cm; color: DarkCyan; font-family: ink free; } h2{ float: right; margin-right: 2cm; font-family: freestyle script; } p{ margin-top: 4cm; margin-left: 4cm; margin-bottom: 4cm; margin-right: 4cm; color: DarkSlateGrey; font-family: calibri; }

Di codingan CSS di atas terdapat 4 attribute margin yaitu margin-top, margin-bottom, margin-left, margin-right. Fungsinya yaitu untuk memberikan jarak pada setiap arah. contohnya untuk memberikan agar  teks tidak terlalu ke atas tampilan pada web.

SCREENSHOT:

Sekian dulu yaa...
Mohon maaf apabila ada yang kurang di pahami...
Tunggu Upload saya yang selanjutnya....

Assalamu'alaikum Wr.Wb