Salam SHARE
gan. .!!
Kali ini saya akan mencoba Share tentang Pengenalan dan Penempatan CSS yang
benar. yang pertama yang akan saya jelaskan adalah apa itu Css, mungkin bagi
sebagian orang masih bingung dengan kata tersebut, untuk lebih jelasnya saya
langsung saja menjelaskannya.
CSS
Css atau Cascading Style Sheet adalah sebuah
elemen penting dalam pembuatan sebuah Web site,sehingga web akan lebih
terstruktur. Css bukan merupakan bahasa pemrograman. dengan kata lain Css
digunakan untuk mendesain sebuah tampilan Web site agar tampilannya
menarik. sama halnya kita mendesain sebuah Web dengan aplikasi Photoshop.
perbedaan antara kita mendesain tampilan Web menggunakan Css dengan Photoshop
adalah Css mampu mendesain secara keseluruhan walaupun Web tersebut
memiliki banyak halaman sehingga dapat mempercepat kinerja dan tidak memakan
waktu yang lama. Dengan membuat sebuah file Css dan mengimportnya
dedalam file atau script halaman Web yang ingin dibuat. Css merupakan
aturan style yang banyak sekali digunakan oleh para programer Web karena
memiliki fleksibilitas dari tag, kemudahan dan memiliki atribut yang
lengkap.
Cara Kerja Css
selanjutnya
saya akan menjelaskan bagaimana cara kerja dari Css.
Css bekerja menggunakan dua elemen
antara lain yaitu "Selector" dan "declaration".
selector berfungsi untuk menempatkan sebuah deklarasi pada sebuah Web yang
ingin dibuat. sedangkan Declaration berisi perintah-perintah yang mengatur tampilan.
untuk lebih jelasnya gan saya akan memberikan contoh halaman Web dengan Css:
<html>
<head>
<title> Coba Css</title>
<styletype=”text/css”>
.type {font-family:arial; font-size:50px;}
</style>
</head>
<body>
<table>
<tr>
<tr><td class=”type”> Mari belajar Css dengan SMANGAT </td>
</tr>
</table>
</body>
</html>
Hasilnya seperti Gambar dibawah ini :
Selanjutnya saya akan mencoba menjelaskan dua cara dalam penempatan Css antara
lain :
1. internal Style
pada internal style, Css akan diletakkan bersamaan dengan halaman web yang
ingin dibuat. Peletakkan Sckript Css akan diletakkan antara "tag
<head> </head>" dimana untuk memulai script Css
dibuka dengan "tag <style=”text/css”> dan ditutup dengan tag
</style>" untuk lebih jelasnya anda dapat melihat contoh
yang saya buat di bawah ini :
file ini kita simpan dengan nama cobacss.html.
<html>
<head>
<title> Coba Css</title>
<styletype=”text/css”>
.type{font-family:arial;font-size:50px; background-color:read;font-color:black;}
</style>
</head>
<body>
<table>
<tr><td class=”type”>Ini merupakan Contoh Internal CSS</td></tr>
</table>
</body>
</html>
Saat dijalankan program akan menampilkan seperti dibawah ini :
2. External Style
sedangkan External Css merupakan kebalikan dari Internal Css yaitu
penempatan Script Css akan diletakkan di file yang terpisah dari halaman web
yang akan dibuat. Untuk lebih jelasnya langsung aja dapat dilihat dari program
dibawah ini :
- pertama-tama kita buat
dulu file untuk script Css dengan nama cssexternal.css extensi
untuk file ini harus .css, adapun scriptnya antara lain :
body{font-family:arial;
background-attachment:fixed;
color:black;}
- kemudian kita buat file halam web untuk pemanggilannya dengan nama cobacss.html, seperti
script dibawah ini:
<html> <head> <title>Coba Css </title> <link rel="stylesheet" type="text/css" href="cssexternal.css"> </style> </head> <body> <div id=”tulisan”>Ini merupakan Contoh External CSS</div> </body> </html>
- hasil saat halaman web
dijalankan :
dalam pemanggilan Css yang bertipe External pada script halaman web kita
dapat dilakukan dengan cara link seperti tag <link
rel="stylesheet" type="text/css"
href="cssexternal.css"> nama file harus sama dengan penyimpanan
Css, jika nama file salah maka pemanggilan tidak berhasil.
itulah sedikit penjelasa tentang Pengenalandan Penempatan CSS semoga
artikel ini dapat membantu anda. Terimakasih. .!!
ARTIKEL TERKAIT :
- Macam-Macam
Elemen Selector Css
- Membuat
Menu Drop Down
ConversionConversion EmoticonEmoticon