Welcome - GarelliaPahlevi.Blogspot.COM


 





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>

---------------------------------------------------------------------------------------------
CSS ID
---------------------------------------------------------------------------------------------
Diawali dengan tanda # , dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID 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
---------------------------------------------------------------------------------------------
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 */
Untuk bentuk peulisan 3, file *.CSS dan *.HTM harus berada pada satu folder yang sama atau sesuaikan dengan alamat file tersimpan.
---------------------------------------------------------------------------------------------


-------------------------------------------------------------------------------------------------
CSS Background
-------------------------------------------------------------------------------------------------
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
-------------------------------------------------------------------------------------------------
<HTML>
 <HEAD>
 <TITLE>Pengaturan Margin</TITLE>
 <STYLE>
  BODY {
     margin-top : 100px;
     margin-bottom : 100px;
     margin-left : 50px;
     margin-right : 50px;
        }
 </STYLE>
 </HEAD>
 <BODY>
 Pengaturan Margin Halaman
 </BODY>
 </HTML>
-------------------------------------------------------------------------------------------------
CSS Padding
-------------------------------------------------------------------------------------------------
Padding hampir sama dengan margin untuk lebih jelasnya perhatikan Box Model berikut

Berikut adalah contoh penulisan padding. Pada P.Padding{….} coba ganti dengan P.Padding{padding:25px 50px;} lihat hasilnya dan cobalah untuk dipahami. Penulisan lebih simple dengan hasil yang sama. Penulisan seperti ini bisa juga diterapkan di penulisan margin.
<HTML>
<HEAD>
<TITLE>Pengaturan Padding</TITLE>
<STYLE>
      P {
        Background-color:yellow;
        }
   P.Padding {
           padding-top:25px;
           padding-bottom:25px;
           padding-left:50px;
           padding-right:50px;
                      }
</STYLE>
</HEAD>
<BODY>
<P>tanpa spesifik padding.</P>
<P Class="Padding">dengan spesifik padding.</P>
</BODY>
</HTML>
-------------------------------------------------------------------------------------------------
CSS LIST
-------------------------------------------------------------------------------------------------

Coba kode berikut, pahami sendiri ya :D . 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