Home » » Materi CSS dalam pembuatan HTML

Materi CSS dalam pembuatan HTML

Posted by richj Posted on 06.47 with No comments
hai haii agan agann selamat malam buat pengunjung blog setia MANCHESTER HACKER kali ini ane akan share ttg materi sekolah ane nih yaitu tentang CSS (Cassading Style Sheet) , simak baik baik yah :)


Apa itu CSS :
· Feature untuk membuat dynamic HTML.
· Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
· Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan
· berwarna biru)
· Support ke semua browser.
Aturan penulisan :
Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green; ¾ Nama property bersifat case sensitive.
color : green;
property : color
value : green
Cara penggunaan CSS :
_External Style Sheet
Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
‰ <link, merupakan tag pembuka diakhiri dengan tanda “>”
‰ rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
‰ type=“text/css”, file yang dipanggil berupa css
‰ href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh Penggunaan :
script efek.css
body {
color: green;
background: white;
Bengkel Internet PENS-ITS : Cascading Style Sheets
font-family : arial;
}
_Internal Style Sheet
Bentuk umum : <style type=“text/css”>
…definisi style… </style>
Contoh Penggunaan :
Inline Style sheet
Contoh Penggunaan :




<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>PENS ITS</H1>
<P> PENS ITS adalah kampus teknik yang concern ke bidang elektro
</BODY>







<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<STYLE type="text/css">
body {
color: white; background: green;
font-family : arial; }
</STYLE>
</HEAD>
<BODY>
<H1>Zefnet</H1>
<P>Zefnet adalah sebuah web Developer dan Linux Center
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>centranet</TITLE>
</HEAD>
<BODY style="color: white;
background: green; font-family : arial;“ >
<H1>ZEFNET</H1>
<P>ZEFNET adalah sebuah web
Developer dan Linux Center
</BODY>
</HTML>


II. ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan : FONT-FAMILY : sans-serif; FONT-SIZE : small;
Cara penulisan yang salah : FONT-FAMILY : “sans-serif”; FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green}; H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!-- - - >
Bentuk ukuran :
Ukuran Keterangan
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang
sifatnya vertikal
px Pixels, menentukan ukuran yang bersifat pixel (layar
monitor) seperti ukuran huruf.

III. SELECTOR SEBAGAI PENGONTROL DESIGN
1. Selector untuk merubah body.

<HTML> 
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
body
{
FONT-FAMILY: Geneva, Arial;
FONT-SIZE: 20px;
color: red; BACKGROUND-COLOR: green; 
}
</style>
</HEAD>
<BODY>

Halaman efect CSS
</BODY>
</HTML>
Bengkel Internet PENS-ITS : Cascading Style Sheets

2. Jenis-jenis selector
a. Selector bebas
<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
gbawah{
TEXT-DECORATION: underline;
}
</style>
</HEAD>
<BODY>
<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> 

</BODY>
</HTML>

b. Selector dengan class

<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
.right { text-align : right }
</style>
</HEAD>
<BODY>
<h2 class="right">Class Heading 2 </h2>
<p class="right"> Class Paragraf</p>
</BODY>
</HTML>

c. Selector Id
<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
#BODY_115 {
FONT-SIZE: 20px; TEXT-DECORATION: underline; COLOR: blue; FONT-FAMILY:Comic Sans MS; }
</style>
</HEAD>
<BODYid="BODY_115">
Menggunakan ID Selector
</BODY>
</HTML>
Label:

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.