18 April 2017

Belajar CSS

CSS (Cascade Style Sheet) merupakan fitur baru dari HTML yang mendeskripsikan bagaimana tampilan document HTML di layar (template). 

Baca artikel sebelumnya PRAKTIK 27 DROPDOWN DAN TEXTAREA HTML

Aturan penulisan :
a. Aturan penggunaan CSS
Selector {property:Value}
dimana
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
-Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
FONT-FAMILY : arial;
FONT-SIZE : small;
-Nama property bersifat case sensitive
-Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!-- - - >

b. 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
stylesheet
type=“text/css”, file yang dipanggil berupa css
href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh Penggunaan :
Dengan nama file script efek.css
body {color: green;
           background: white;
           font-family : arial;
           }
Contoh1.html
 
<HTML>
<HEAD>
<TITLE>contoh css 1</TITLE> 
<LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>FTKOM</H1>
<P> Program studi teknik Informratika fakultas teknik computer UNCP
</BODY>


c. Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>
Contoh Penggunaan :

<HTML>
<HEAD>
<TITLE> contoh css 2</TITLE>
<STYLE type="text/css">
body {
color: white;
background: green;
font-family : arial;
}
</STYLE>
</HEAD>
<BODY>
<H1> Prezi.com </H1>
<P>Prezi.com adalah sebuah web yang dapat digunakan untuk membuat presentasi
dengan tampilan menarik daripada powerpoint.
</BODY>
</HTML>

Baca artikel selanjutnya PRAKTIK 28 MARQUEE HTML

No comments: