Tuesday, March 1, 2011

Menyisipkan CSS Ke Halaman HTML


www.AstroDigi.com

AstroDigi.com | Selasa, 1 Mar 2011 | CSS (Cascading Style Sheet) adalah kumpulan perintah yang berfungsi untuk mengatur huruf (font, size, style, color, dll) dan mengatur warna yang digunakan pada halaman HTML. Anda bisa mendapatkan banyak pilihan file CSS baik dengan mendownload atau mendapatkannya bersamaan dengan template HTML.

Ada dua cara untuk menyisipkan CSS yaitu:

Pertama: Menyisipkan secara internal

Sisipkan CSS diantara <head> dan </head> dengan perintah sebagai berikut:
<style type="text/css">
. . . . baris perintah CSS . . . .
</style>

Contoh:
<head>
<style type="text/css">
.bot {
color : #000000;
margin-top : 20px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 200px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.bot a {
color : #000000;
text-decoration: none;
}
.bot a:hover {
color : #294A7B;
}
</style>
</head>

Pada penggunaannya anda tinggal mengawali penulisan text di HTML dengan <p
class="bot"> dan mengakhirinya dengan </p> . Maka semua text akan diperlakukan seperti pada perintah CSS tersebut yaitu:

Font=Tahoma/Verdana/Arial
Ukuran Font=11
Margin=200pixel (kiri), 10pixel (kanan), 10pixel (atas) dan 0 (bawah)
Warna Huruf=#000000 (=hitam)
Warna Bila Dilewati Mouse=#294A7B (=abu-abu agak kebiruan)
Ketebalan Font=Bold (=tebal)

Kedua: Menyisipkan secara eksternal
Copy semua perintah CSS dan simpan dalam sebuah file, dan beri nama dengan ekstensi .CSS , misalnya Hurufku.CSS dan simpan satu folder dengan halaman HTML (catatan: bagi yang sudah cukup mengerti, bisa juga difolder lain asal dituliskan juga lokasi foldernya).

Sisipkan CSS diantara <head> dan </head> dengan perintah sebagai berikut:
<link rel="stylesheet" type="text/css" href="Hurufku.CSS">

Jadi bila dalam kasus ini anda menyimpan perintah CSS seperti pada contoh pertama diatas:

.bot {
color : #000000;
margin-top : 20px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 200px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.bot a {
color : #000000;
text-decoration: none;
}
.bot a:hover {
color : #294A7B;
}

Dalam sebuah text file dengan nama Hurufku.CSS, maka hasilnya akan sama juga dengan cara pertama tadi.

Jadi anda bisa merubah CSS internal menjadi CSS eksternal ataupun sebaliknya dengan petunjuk diatas.

Selamat mencoba . . . have a nice day :)



www.AstroDigi.com (Nino Guevara Ruwano)

Comments :

6 comments to “Menyisipkan CSS Ke Halaman HTML”

Slam kenal ??
aq baru belajar buat blogg

tutornya sangat membantu
baru saja aq lihat tutor ini
kini blogg ku ada perubahan

masanet said...
on 

Salam kenal juga bung Masanet :) senang sekali bila artikel ini bisa bermanfaat . . akan menyusul artikel-artikel tentang HTML yang lain, silakan ikuti terus :)

NINO said...
on 

ninest123 08.21
michael kors outlet, ray ban sunglasses, louboutin outlet, burberry outlet, christian louboutin, longchamp outlet, michael kors outlet, oakley sunglasses cheap, michael kors outlet, ray ban sunglasses, michael kors outlet, nike free, longchamp handbags, oakley sunglasses, coach outlet, burberry outlet, louboutin, kate spade handbags, longchamp handbags, tiffany and co, coach purses, air max, chanel handbags, prada outlet, nike shoes, tiffany and co, polo ralph lauren, polo ralph lauren outlet, true religion jeans, true religion jeans, tory burch outlet, michael kors outlet, rolex watches, jordan shoes, michael kors outlet online sale, oakley sunglasses, kate spade outlet, prada handbags, gucci outlet, coach factory outlet, louboutin shoes, true religion outlet, coach outlet store online, air max

ninest123 Ninest said...
on 

oakley pas cher, timberland, air jordan, louboutin, nike air force, michael kors uk, michael kors pas cher, mulberry, lululemon outlet online, nike free, nike roshe run pas cher, vans pas cher, true religion outlet, sac longchamp pas cher, air max, ralph lauren, sac burberry, michael kors, hollister, longchamp, nike trainers, nike huaraches, air max pas cher, ray ban sunglasses, air max, nike air max, hollister, hogan outlet, sac guess, nike tn, new balance pas cher, longchamp, ray ban pas cher, nike blazer, converse pas cher, north face, polo lacoste, nike free pas cher, vanessa bruno, sac hermes, north face, polo ralph lauren, abercrombie and fitch, nike roshe

ninest123 Ninest said...
on 

baseball bats, beats by dre, hollister, celine handbags, p90x, mont blanc, north face jackets, instyler, mcm handbags, babyliss pro, louboutin, wedding dresses, valentino shoes, birkin bag, giuseppe zanotti, mac cosmetics, north face outlet, air max, reebok outlet, lululemon outlet, oakley, ghd, soccer jerseys, vans, new balance shoes, nfl jerseys, abercrombie, abercrombie and fitch, iphone cases, timberland boots, hollister clothing store, herve leger, nike roshe run, ralph lauren, insanity workout, vans shoes, soccer shoes, jimmy choo outlet, asics running shoes, chi flat iron, converse, air max, ferragamo shoes, bottega veneta

ninest123 Ninest said...
on 

louis vuitton, louis vuitton outlet stores, uggs, sac louis vuitton, ugg, supra shoes, pandora charms, juicy couture outlet, thomas sabo, converse shoes, hollister, ugg boots, marc jacobs, karen millen, cheap uggs, louis vuitton outlet, louis vuitton handbags, juicy couture, swarovski, swarovski crystal, gucci, louis vuitton, sac louis vuitton, louis vuitton, ugg boots clearance, ray ban, links of london, ugg, toms shoes, ugg pas cher, rolex watches, wedding dresses, doke gabbana, ugg outlet, pandora jewelry, coach outlet store online, uggs outlet, louis vuitton outlet, pandora charms, louis vuitton uk, ugg, sac lancel, montre homme
ninest123 08.21

ninest123 Ninest said...
on 

Post a Comment

Related Posts Plugin for WordPress, Blogger...