Pengertian CSS (Cascade Style Sheet) dan contohnya



Pengertian CSS (Cascade Style Sheet)

CSS (Cascade Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini anda dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).


Baca Juga : Cara Menyisipkan Gambar Pada HTML


Dengan adanya CSS, anda dapat lebih mempercantik tampilan web. Baik dari style teks, button, textfield,tabel dan lain-lain.


Contoh :


<style type="text/css">

B { color : lime }

</style>


Arti dari kode CSS di atas adalah : setiap teks yang ada di dalam tag B pada bagian body, maka warnanya akan berubah menjadi lime.



Ketentuan Dasar CSS

Setiap "Style Rule" atau peraturan/perintah dalam CSS, terdiri dari dua elemen dasar yaitu : "selector" dan "declaration"

"selector" biasanya adalah tag HTML (dalam hal ini B), sementara

"declaration" adalah satu atau beberapa perintah/nilai dari CSS yang menunjukan type bentuk yang diaplikasikan pada selector.


Baca Juga : Menyisipkan Link Pada HTML


Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai CSS yang berada dipisahkan satu dengan yang lain dengan menggunakan titik-koma.


Contoh:


<style type="text/css">

B {

        color: lime;

        text-decoration: underline;

        font-family: Arial;

    }

</style>



Jenis Penempatan CSS

Di dalam tag HTML langsung contoh CSS pada tag <P> :


<P style="text-align: center; font-weight: bold">

Di dalam file HTML 
Contoh:

<style type="text/css">
B { color : lime }
</style>

Diletakan di bagian atas sebelum tag body.

Di dalam file CSS tersendiri, yang mana suatu file CSS ini dapat digunakan untuk semua file HTML yang ada.

Untuk menggunakan file CSS tersebut, tambah code berikut sebagai tanda untuk memanggil file CSS.

<head>
<link rel="stylesheet" href="global.css"
tpye="text/css"
</head>

Arti dari kode di atas yaitu, memanggil file global.css untuk dapat digunakan pada file tersebut.

Classes

CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas(classes) dan menerapkanya aturan Style-Sheet kedalam sebuah class.


Baca Juga : Pengertian HTML dan Contohnya


Definisi Class CSS ditandai dengan tanda titik sebelum nama class-nya.


Class CSS untuk TextField

Contoh Class LongText :

/*setting textfield panjang*/

               .LongText

               {

                              background-color: #3399CC;

                              border-width: 1;

                              color: #ffffff;

                              font-size: 9pt;

                              font-family: Tahoma;

                              border-color: #336699;

                              boder-style:ridge;

                              width:220;

                              height:22;

               }


Class CSS untuk Button

Contoh class dottedbutton :


/*setting button dgn border garis potong2*/

               input.dottedbutton

               {

                  font-size:10px;

                  font-family:Verdana,sans-serif;

                  font-weight:bold;

                  color:#FFFFFF;

                  width:200px;

                  height:30px;

                  background-color:#3399CC;

                  border-style:dotted;

               }


Untuk menggunakan CSS button tadi, letakan pada tag button, sebagai berikut.

<input name="simpan" type="submit" value="Simpan" class="dottedbutton">


Sedangkan untuk menggunakan CSS textfield tadi, letakan pada tag textfield, sebagai berikut.

 

<input name="id_prioritas" type="text" class=“LongText">



CSS untuk Teks

.judul{

                              font-family:Tahoma;

                              font-size:10pt;

                              font-weight:bold;

               }

 

               .teks{

                              font-family:Tahoma;

                              color:black;

                              font-size:9pt;

               }


Cara menggunakanya :
 

<td height="40" colspan="3" class="judul"></td>

<tr class="teks"></tr>


Penutup

Sekian artikel mengenai Pengertian CSS (Cascade Style Sheet) dan contohnya. Semoga bermanfaat bagi anda yang membaca artikel ini. 


Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama