☛ 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>
|
||||