Assalamualaikum wr. wb.


Kembali lagi dengan saya Rizki aziz yang akan membahas tentang pemrograman web tentunya.
Kali ini saya akan membagikan tentang CSS dalam program HTML.


  • ·         Definisi dan fungsi cascading style sheet (css)
                 Cascading style sheet atau lebih sering dengan istilah CSS merupakan salah satu dokumen                   website yang bertujuan untuk mengatur gaya (style) tampilan website.


  • ·         Manfaat CSS

1.       Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
2.       Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
3.       Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
4.       Dapat berkolaborasi dengan JavaScript.
5.       Dapat digunakan dalam hampir semua jenis web browser.



Anatomi dari cascading style sheet (CSS).


Terdiri dari 3 hal :

1. Selector
    body, h1, h2, p, form, ....
    Class(.), id(#)

2. Property
    Color, font-family, font-spacing,
    background-position, ...

3. Value
     Red, arial, 16, 8px, ...


Pengcodingan CSS

  • Inline
            Didalam file html yang sama, dalam masing – masing tag.
  • Embedded

            Didalam file html yang sama, hanya dalam satu file html saja.
  • External

            Diluar file html, bisa digunakan di berbagai file html, dengan format file.css


Beberapa Property pada css text format.



Pengaturan warna pada text/color
Css dapat diterapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan css dapat menggunakan nilai warna sebagai berikut.

      1.       Nilai HEX à misalnya “#ff0000”
      2.       Nilai RGB à misalnya “rgb(225, 0, 0)”
      3.       Nama dari warna tersebut à misalnya “red”
      4.       Menggunakan color in CSS à Misalnya, “Thistle, GoldenRod, Salmon”
       Format penulisan untuk pemberian warna pada text menggunakan css adalah sebagai berikut :
       Selector {color : nilai warna;}


Berikutnya saya akan memberikan contoh penggunaan – penggunaan yang sudah tertera diatas.

1. Inlinecss

 sourcecode : 


Hasil source code :




2. Embedded with class dan id1.html

source code : 



Hasil source code :




3. Embedded with class dan id2.html

 source code : 

Hasil source code :




4.  External with class dan id.html

 source code html : 

source code css :

Hasil dari source code :





5.  EmbHeadingColor.html

 Source code : 

Hasil dari source code :



6.  formatCharacterSpacing.html

 Source code html : 

Source code css :


Hasil dari source code :


7. TextDecoAndSpacing.html

    Source code html : 
    

   Source code css :

   Hasil dari source code :




8.  EmbIndentAlignUpper.html

 Source code : 

Hasil dari source code :




OK.. dari materi yang kalian pelajai diatas, kalian coba buat halaman web form dengan kemamuan kalian sendiri.

Misal nya berikut saya membuat contoh form menggunakan tag yang sebelumnya saya bagikan :

 Source code : 

Hasil source code :





Sekian dari saya termikasih telah berkunjung , dan mohon maaf bila ada kesalahan..

Wassalmualaikum wr. wb.