Belajar CSS untuk NEWBIE
Assalamualaikum Wr Wb..
Postingan kali ini ane mau ngepost tentang apa yang ane dapetin tadi waktu pelajaran Pemrograman Web di sekolah. Tentang CSS. Apasih itu CSS? Pernah denger? Atau jangan-jangan malah pernah nyoba ya-_-
Yakk seperti judul post-nya, yang boleh baca cuman yang Newbie dalam CSS, buat yang udah Mastah atau lainnya nyingkir dah, biarkan newbie berkarya :v
Oke ini diaa tentang CSS :
A. Pengertian CSS
CSS (
Cascading Style Sheet ) adalah Bahasa style sheet yang digunakan untuk
menggambarkan tampilan dan fprmat pada HTML. CSS dirancang untuk pemisahan
konten dokumen dari atribut dokumen. Halaman markup yang sama dapat memiliki
gaya yang berbeda.
B. Sifat CSS
- Internal ; Skrip CSS
dimasukkan secara langsung ke kode web yang dirancang.
- Eksternal; Skrip CSS
dipisah dan diletakkan pada berkas khusus.
C. Fungsi CSS
- Merancang / Mendesain.
- Mengubah.
- Membentuk Halaman Web.
D. Metode Penulisan CSS
1. Inline Style Sheet
o CSS didefinisikan langsung pada tag HTML yang
bersangkutan.
<p style=”font-size:14pt; color:blue;>
= Teks dengan ukuran huruf 14 point dan berwarna biru.
</p>
2. Embedded Style Sheet
o CSS didefinisikan terlebih dahulu dalam tag
<style>…. </style> sebelum digunakan dalam tag HTML.
o Umumnya tag <style> didefinisikan sebelum tag
<body>.
Contoh :
<style>
Body
{background:#0000ff}
h1 {font-size:12pt; color:#ff0000}
p {font-size:12pt; font-family:arial}
</style>
<body>
<h1>Judul Merah berukuran 18 point</h1>
<p>Kalimat ini diformat menggunakan CSS</p>
</body>
3.
Link Style Sheet
o Metode ini hampir sama dengan Embeded Style Sheet, hanya
saja pendefinisian CSS dibuat pada file yang terpisah dari file HTML.
o File pendefinisian CSS disimpan dengan ekstensi .css
^ Contoh File HTML :
<head>
………..
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>Judul
dengan Format CSS</h1>
<h2>Kalimat dengan format CSS<h2>
</body>
^ Contoh file CSS ( Disimpan dengan nama style.css }
Body {background:#ff00ff}
h1 {font-size:18pt; color:#ff0000}
p {font-size:12pt; font-family:arial}
Nah sekian postingan kali ini. Semoga bermanfaat ^
Nah sekian postingan kali ini. Semoga bermanfaat ^
Wassalamualaikum Wr, Wb
Comments
Post a Comment
Terimakasih telah ber komentar ^