Welcome - GarelliaPahlevi.Blogspot.COM


 





Bentuk Penulisan CSS

CSS (Cascading Style Sheets) Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML, sperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.

Berikut contoh penulisan :
PENULISAN 1 Inline Style Sheet
<BODY>
<P style=’
   color:red;
   font-size:40px’>
   PENULISAN 1
</P>
</BODY>

PENULISAN 2 Internal Style Sheet
<HEAD>
<STYLE>
H1 {
   color:red;
   font-size:40px;
   }
</STYLE>
</HEAD>
<BODY>
<H1> PENULISAN 2 </H1>
</BODY>

PENULISAN 3 External Style Sheet
Buka notepad ketikan kode dibawah save as style.css
H1 { font-family:"arial";  /* jenis hurup */
     font-size:40px;       /* ukuran hurup */
     color : Red ;         /* warna hurup */
     font-style:italic;    /* style hurup*/
     text-align:center;    /* align */
   }

Buka notepad lagi ketikan kode dibawah save as contoh.htm. double klik dan lihat hasilnya.
<HTML>
<HEAD>
<TITLE>Pemanggilan External CCS</TITLE>
<LINK rel="stylesheet"
     type="text/css"
     href="style.css" />
</HEAD>
<BODY>
<H1> PENULISAN 3 </H1>
</BODY>
</HTML>


Untuk bentuk peulisan 3, Style.CSS dan Contoh.HTM harus berada pada satu folder yang sama atau sesuaikan dengan alamat (url) file tersimpan.

CSS ID Tag

Diawali dengan tanda # , dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web, karena dapat didefiniskan dengan ID yang berbeda.
Contohnya : #ContohID{}

Untuk Pemanggil Selector digunakan <div id="selector"></div>
Contohnya : <div id="ContohID"></div>

Berikut lengkapnya menggunakan bentuk Penulisan 2
<HTML>
<HEAD>
<STYLE>
#ContohID {
     Font-Family : aral, Helvetica;
     Font-Size : 30px;
     Color : green;
     text-align:center;
     }
</STYLE>
</HEAD>
<BODY>
<DIV id="ContohID">contoh ID Tag</DIV>
</BODY>
</HTML>

CSS Class Tag

Class Tags CSS Biasanya Menggunakan Tanda titik Pada Awalan Selector. Contohnya : .ContohClass{}

Untuk Pemanggil Selector digunakan <div class="seleactor"></div>
Contohnya: <div class="ContohClassTags"></div>

Berikut Lengkapnya menggunakan bentuk Penulisan 3
Notepad pertama ketikan kode dibawah save as ContohClass.CSS
.ContohClass {
     Font-Family : Arial, Helvetica;
     Font-Size : 40px;
     Color : blue;
     text-align:center;
     background-color:#b0c4de;
     }


Notepad kedua ketikan kode dibawah save as ContohClass.HTM
<HTML>
<HEAD>
<LINK rel="stylesheet"
     type="text/css"
     href="ContohClass.CSS" />
</HEAD>
<BODY>
<p class="ContohClass">contoh Class Tag</p>
</BODY>
</HTML>


NOTE :
Untuk pengaturan tata letak gunakan Margin atau Padding
DIV pada ID dan Class Tags dapat dirubah dengan P atau H1, H2 dll
Untuk menyisipkan comment gunakan /* comment */

CSS Background atau Latar Belakang

Untuk yang mau background dengan gambar cukup ganti Background-Color dengan Background-image:url(isikan dengan alamat gambar); untuk tampilan background dengan gambar bisa ditambahkan perintah berikut, pilih salah satu dan tempatkan dibawah background-image,
background-repeat:repeat-x;
background-repeat:no-repeat;
untuk pengaturan tata letak bisa menggunakan Margin atau Padding. Berikut contoh mengganti warna background dan stylis hurup pada tag Body.
<HTML>
<HEAD>
<TITLE>Body</TITLE>
<STYLE>
 BODY {
     Font-Family : Geneva,Arial;
     Font-Size : 20px;
     Color: red;
     Background-Color: green;
     }
</STYLE>
</HEAD>
<BODY>
Merubah Tampilan Body
</BODY>
</HTML>

CSS Margin dan Padding

Margin hampir sama dengan Padding untuk lebih jelasnya perhatikan Box Model berikut



Berikut adalah contoh penulisan Padding ataupun Margin. 
<HTML>
<HEAD>
<TITLE>Pengaturan Padding atau Margin</TITLE>
<STYLE>
      P {
        Background-color:yellow;
        }
   P.Spesifik {
           padding-top:25px;
           padding-bottom:25px;
           padding-left:50px;
           padding-right:50px;
                      }
</STYLE>
</HEAD>
<BODY>
<P>Paragraf tanpa spesifik.</P>
<P Class="Spesifik">Paragraf dengan spesifik.</P>
</BODY>
</HTML>


Pada P.Spesifik{….} coba ganti dengan
P.Spesifik{padding:25px 50px;} atau P.Spesifik{Margin:25px 50px;}
P.Spesifik{padding:25px 10px 50px 5px;} atau P.Spesifik{Margin:25px 10px 50px 5px;}
dan lihat hasilnya.

CSS LIST

Coba kode berikut pada notepad, untuk list bergambar gunakan code list-style-image:url(isikan alamat gambar);
<HTML>
<HEAD>
<STYLE>
        UL.a {list-style-type:circle;}
        UL.b {list-style-type:square;}
        OL.c {list-style-type:upper-roman;}
        OL.d {list-style-type:lower-alpha;}
</STYLE>
</HEAD>
<BODY>
       <P>Example of unordered lists:</P>
       <UL Class="a">
       <li>Coffee</li>
       <li>Tea</li>
       <li>Coca Cola</li>
       </UL>
              <UL Class="b">
              <li>Coffee</li>
              <li>Tea</li>
              <li>Coca Cola</li>
              </UL>
<P>Example of ordered lists:</P>
       <OL Class="c">
       <li>Coffee</li>
       <li>Tea</li>
       <li>Coca Cola</li>
       </OL>
               <OL class="d">
               <li>Coffee</li>
               <li>Tea</li>
               <li>Coca Cola</li>
               </OL>
</BODY>
</HTML>


Go Garage




  Coret Coretanku  
  None
  None
  None
  None
  None
  None
  None
  None
  None