Thursday, November 28, 2013

3 cara untuk memasang CSS pada dokumen HTML

2:56 PM  Unknown  6 comments

yaitu:

  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh: 
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

</body>
</html>

Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel="stylesheet" type="text/css" href="public.css"/>
</head>
<body>
</body>
</html>

Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat kode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

berikut kodenya
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Sumber : http://www.cmsplaza.com/

Posted in:

6 comments:

Thanks kak atas artikelnya,sangat membantu sekali dalam penerapan CSS pada pemrograman pada html saya, sebelumnya saya belum tahu bagaimana cara mengguunakannya,setelah saya melihat punya kakak,saya langsung mempraktekkan,dan ternyata gampang sekali hehe,terus berkarya kak dalam artikelnya,agar dapat membantu orang lain dan termotivasi ingin seperti kakak.Perkenalkan Nama Saya Dhita Heru Pambudi, Kunjungi website kampus saya https://www.atmaluhur.ac.id/

Terima kasih untuk artikelnya kak, sangat membantu sekali. Saya AMANDA MONICA (1922500162) dari STIMIK ATMA LUHUR. Ini link kampus saya http://www.atmaluhur.ac.id.

Terima kasih untuk artikelnya, perkenalkan saya NILY SUSANTI(1922500046) dari https://www.atmaluhur.ac.id

Terimakasih atas artikelnya, perkenalkan nama saya MELINDA (1922500187) dari STMIK ATMA LUHUR https://www.atmaluhur.ac.id

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More