Scribd
Unggah
2 tayangan7 halaman

Pengenalan Dasar CSS untuk Pemula

Modul ini memperkenalkan CSS sebagai bahasa untuk menata dokumen HTML dengan menjelaskan sintaks dasar, termasuk selector dan blok deklarasi. Contoh penggunaan CSS untuk mengubah gaya elemen HTML disertakan, serta cara menggunakan ID untuk memberikan gaya yang berbeda pada elemen. Terdapat juga referensi untuk melihat daftar properti CSS yang lebih lengkap.

Diunggah oleh

elokmardian
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
2 tayangan7 halaman

Pengenalan Dasar CSS untuk Pemula

Modul ini memperkenalkan CSS sebagai bahasa untuk menata dokumen HTML dengan menjelaskan sintaks dasar, termasuk selector dan blok deklarasi. Contoh penggunaan CSS untuk mengubah gaya elemen HTML disertakan, serta cara menggunakan ID untuk memberikan gaya yang berbeda pada elemen. Terdapat juga referensi untuk melihat daftar properti CSS yang lebih lengkap.

Diunggah oleh

elokmardian
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Modul 4.

Pengenalan CSS

CSS adalah bahasa yang kita gunakan untuk menata dokumen HTML. CSS

menjelaskan bagaimana elemen HTML harus ditampilkan. Tutorial ini akan

mengajarkan Anda secara garis besarnya saja

CSS digunakan untuk mengontrol gaya dokumen web dengan cara yang

sederhana dan mudah. CSS adalah singkatan dari Cascading Style Sheets.

Sintaks CSS
Aturan CSS terdiri dari Selector dan blok deklarasi.

Sintaks CSS

Block of declaration
{ color: blue; font-size: 12px; }
h1
↑ ↑ ↑ ↑
property Value of Property Value of property
Selector property
Declaration Declaration

Selector menunjuk ke elemen HTML yang ingin Anda beri style tertentu.
Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh
titik dua.
Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi
dikelilingi oleh kurung kurawal.

Contoh
Dalam contoh ini semua elemen <p> akan diratakan tengah, dengan warna
teks merah:
p{
color: red;
text-align: center;
}

Perhatikan:
Sebaiknya letakkan CSS di dalam block tag <STYLE></STYLE> dimana tag
STYLE berada di dalam Blok Tag <HEAD></HEAD>

<!DOCTYPE html>
<html>
<head>
<style>
p{
color:red;
text-align:center;
}
</style>
</head>
<body>

<p>Merdeka</p>

</body>
</html>
Hasilnya adalah:
Penjelasan contoh
p adalah Selector dalam CSS (menunjuk ke elemen HTML yang ingin Anda
stylekan: <p>). color adalah properti, dan red dalah adalah nilai property
text-align adalah properti, dan center adalah nilai properti. Ini akan berakibat
semua tulisan yang diapit oleh tag <P></P> akan berada di tengah dan
berwarna merah.

Property dari CSS ini banyak sekali. Untuk melihat daftar dan penggunaannya
bisa dilihat di sini:
1. [Link]
2. [Link]
3. [Link]

Misal kita ingin memberi orname pada border maka kita cari tentang border
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:red;
text-align:center;
border-bottom: 5px solid blue;
}

</style>
</head>
<body>

<p>Merdeka</p>

</body>
</html>

Hasilnya bisa dilihat di bawah ini


CSS id
Selain menggunakan cara di atas, cara lain adalah dengan menggunakan
CSS id. Misalnya kita akan membuat tampilan <P> yang bermacam-macam.
Maka yang harus kita lakukan adalah sebagai berikut:

#nama_id{
property:nilai property;
}

<!DOCTYPE html>
<html>
<head>
<style>
#psatu{
color:red;
text-align:center;
border-bottom: 5px solid blue;
}
#pdua{
color:blue;
text-align:center;
border-bottom: 5px solid red;
}

</style>
</head>
<body>

<p id="psatu">Warna Garis biru</p>


<p id="pdua">Warna Garis merah</p>
</body>
</html>

Hasilnya adalah:
Tugas di kelas:
Buatlah sebuah tampilan untuk tag di bawah ini menggunakan id CSS
<h1> dengan font-size 25, color biru dan style tebal
<h2> dengan font-size 30, color merah dan style miring

Cek di reference CSS dengan kata kunci font


[Link]

Anda mungkin juga menyukai