Modul Pemograman Web Materi CSS inline Style Sheet

Ade Kurniawan 6/17/2017 04:19:00 PM

Modul pemograman web kurikulum 2013 materi css inline style sheet dan embedded style sheet.
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

CSS merupakan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML

1.Inline Style Sheet

Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <P></p> atau paragraf.

 

<p align="center" style="color:blue; font-size:26px">SMK INDONESIA </p>

Jika script diatas dijalankan maka akan tampil halaman html seperti berikut :

inline style sheet

pada gambar diataas terlihat bahwa tulisan yang kita buat pada halaman inline.html berwarna biru dan terletak di tengah.
Hal tersebut merupakan hasil dari penggunaan align=”center dan style”color/;blue;

kita dapat memodifikasi tampilan tersebut rata kiri dan warna merah dengan mengubah script seperti berikut :

<p align="left" style="color:red; font-size:26px">SMK INDONESIA </p>

Setelah dijalankan maka tampilan halaman inline.html diatas menjadi seperti berikut :

inline style sheet 2

2. Embedded Style Sheet

Pada Embedded Style sheet style css terlebih dahulu di tuliskan yang diapit oleh <style>..</style> dan diletakkan diaas <body> kemudian style yang telah dipanggil dengan menggunakan class=””.

Berikut adalah contoh script css embedded stayle sheet silahkan dicoba dan disimpan dengan nama embedded.html

<html>

</head>
<head>
<style>
input.btn {color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto;
}
</style>
<body>
<table>
<tr>
<td><form >
<p><label for="nama">Username</label>
<input type="text" id="nama" />
</p>
<p>
<label for="KTP">Password</label>
<input type="text" id="KTP" />
</p>
<p>
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
</p>
</form></td>
</tr>
</table>

</body> </html>

<html>
</head>
<head>
<style>
input.btn {color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto;
}
</style>
<body>
<table>
<tr>
<td><form >
<p><label for="nama">Username</label>
<input type="text" id="nama" />
</p>
<p>
<label for="KTP">Password</label>
<input type="text" id="KTP" />
</p>
<p>
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
</p>
</form></td>
</tr>
</table>
</body>
</html>

 

simpan dengan embedded.html maka hasilnya sebagai berikut:

Embedded style sheet

Pada listing  kode css embedded style diatas penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style>

Demikian Modul pemrograman web kurikulum 2013 CSS materi inline styel sheet dan embedded style sheet semoga dapat memudahkan siswa dalam memahami css

Tags:
Ade Kurniawan

Posted by: Ade Kurniawan

Menemukan metode baru dalam menyelesaikan alur program adalah hal yang menantang bagi saya, kesegaran berfikir datang kembali saat memikirkan opsi penyelesaian sebuah algoritma. Aktifitas ini membuat saya terpacu untuk belajar karena di era saat ini perkembangan teknologi berjalan sangat cepat dan menuntut kesiapan yang terus mendesak jika tidak ingin tertinggal.

Post a Comment

0 Comments