Metode Penulisan CSS cara menghubungkan dengan HTML
Metode penulisan CSS dibagi berdasarkan cara menghubungkan syntax CSS dengan markup language salah-satunya HTML. To the point aja berikut metode penulisan dalam memanggil CSS kedalam HTML:
- Inline Style Sheet CSS didefinisikan langsung pada tag HTML (in element body) yang diberi attribute style dimana attribute style terdiri dari dua formula, yaitu property:value;. Pada Inline Style Sheet tidak ada lagi selector karena telah diwakili tag HTML. <html> <head> <title>Inline Method</title> </head> <body bgcolor ="#FFFFFF"> <h1 style="color:red">UCHIHA CLAN</h1> <p id="Sasuke">Uchiha adalah salah-satu clan</p> <p id="Itachi" style ="font-size:29pt;color:green">Uchiha adalah salah-satu clan</p> </body> </html> Hasilnya
- h1 dan p merupakan tag HTML
- style merupakan attribute
- color dan font-size merupakan property
- 20pt, red dan green merupakan value
- Internal Style Sheet Atau embedded style sheet ditulis dalam tag style dimana bagian CSS terletak di bagian Head (berisi syntax css yaitu selector dan declaration) dan bagian HTML terletak di bagian body (berupa tag yang sesuai dengan selector pada head). CSS pada Head akan memberi perintah terhadap HTML pada Body yang nantinya akan ditampilkan di website. <html> <head> <title> Belajar tutorial CSS</title> <style> h3 {font-family:calibri;color:red;font-style:italic} </style> </head> <body> <h3>Uchiha Itachi dan Uchiha Sasuke</h3> </body> </html> Hasilnya
- Eksternal Style Sheet Atau dikenal juga dengan istilah linked style sheet yaitu script khusus yang berekstensi filename.css yang akan diimport dengan Tag Link atau @import. Misalnya saya membuat file filename.css menggunakan apps text editor seperti notepad, xplore,etc yang berisi kumpulan style sheet css yang akan ditampilkan diwebsite dimana isinya hanya berupa syntax css yang terdiri atas selector dan declaration tanpa menggunakan tag HTML. Berikut isi dari filename.css p {font-size:17pt;margin-left:20px;} h1 {font-family:sans;color:#333;} h2 {font-family:calibri;color:red;font-style:italic} Upload filename.css yang telah dibuat ke situs web hosting agar memiliki URL yang nantinya akan dipasang di attribute href. Contoh URL CSS yang telah diupload http://SIMONDOL.net/content/filename.css <html> <head> <title>Script Eksternal CSS</title> <link type="text/css" rel="stylesheet" href= media="all"> </head> <body> <h1>maka yang tampil nanti adalah teks disini</h1> <h2>dengan semua style yang telah didesign diidalam filename.css</h2>. </body> </html> Hasilnya
UCHIHA CLAN
Uchiha adalah salah-satu clan
Uchiha adalah salah-satu clan
Note:
0 Response to "Metode Penulisan CSS cara menghubungkan dengan HTML"
Post a Comment
Silahkan tinggalkan jejak!