Scribd
Unggah
26 tayangan14 halaman

5 Css Dasar

CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan tata letak komponen web. CSS memiliki dua bagian utama, yaitu selector untuk menentukan elemen HTML mana yang akan distylisasi dan deklarasi untuk menentukan properti dan nilai gaya. CSS dapat menggunakan id, class, dan properti seperti background-color, background-image, background-repeat, dan background-position untuk mengatur latar belakang elemen.

Diunggah oleh

Lalu Kamar
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
26 tayangan14 halaman

5 Css Dasar

CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan tata letak komponen web. CSS memiliki dua bagian utama, yaitu selector untuk menentukan elemen HTML mana yang akan distylisasi dan deklarasi untuk menentukan properti dan nilai gaya. CSS dapat menggunakan id, class, dan properti seperti background-color, background-image, background-repeat, dan background-position untuk mengatur latar belakang elemen.

Diunggah oleh

Lalu Kamar
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
Anda di halaman 1/ 14

t e

f No
im
Perancangan Web
#5- CSS Dasar Imam Fathurrahman, M.Kom
Fungsi css

-CSS singkatan dari Cascading Style Sheet .

o t
-CSS merupakan sebuah e bahasa pemrogram
f
an yang fungsinyaN untuk menstrukturkan kom
im web yang beragam sesuai
ponen-komponen
dengan keinginan kita .
.
Syntax CSS

CSS memiliki dua bagian utama:

1) pemilih ( Selector ) , dan


t e
No
2) satu atau lebih deklarasi ( Declaration ).
f
im
Syntax CSS

CSS memiliki dua bagian utama:

t e
Selector adalah HTML element yang ingin dibuat style nya.

No
Declaration merupakan isi dari property dan nilai dari CSS.
f
 Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property diguna
kan titik koma ( ; ) im
Contoh :

<style>
p {color:red; text-align:center;
}
</style> <style>
t e
f No
p {color:red; text-align:center;}
</style>

im
<html>
<body>
<p> mulai mencoba belajar CSS </p>
</body>
</html>
CSS id dan Class

CSS id
• Selector id digunakan untuk menentukan style untuk elemen tunggal y
e
ang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefi
t
No
nisikan dengan “#“. Aturan style bawah ini akan diterapkan pada eleme
n dengan id = “para1″ f
im
Contoh :

<style>
• #para1 #para1 {text-align:center;color:blue;}

{
e
</style>

t<html>

No
text-align:center; <body>
<div id='para1'> mulai mencoba belajar CSS </div

color:blue; f >

im
</body>
</html>
}
CSS id dan Class

CSS class

• Selector class digunakan untuk menentukan gaya untuk sek


t e
elompok elemen. Berbeda dengan pemilih id, kelas pemilih y

f No
ang paling sering digunakan pada beberapa elemen . Denga
n ini memungkinkan anda untuk menentukan gaya dan elem
im
en HTML dengan class yang sama .

• Selector Class menggunakan atribut class HTML, dan didefin


isikan dengan “.”
CSS class

• Contoh
.center {text-align:center;}
.latar-hitam{ background-color:#000; }
t e
No
.text-merah{ color:red; }
.padding16{ padding:16px; } f
im
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang di
pengaruhi oleh kelas.
• Pada contoh di bawah, elemen p semua dengan class = “center”a
kan di buat rata tengah :
– p.center {text-align:center;}
Properti Background-color

• Properti Background-color menetapkan warna


latar belakang dari suatu elemen.
• Warna latar berlakang inite didefinisikan dalam pe
milih body .
N o
f
im
• contoh : body {background-color : #b0c4de ;}
• Dengan CSS, warna paling sering ditentukan ad
alah :
• * nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”
Properti Background-image

• Properti Background-image menentuk


an warna gambar untuk digunakan seba
gai latar belakang suatu
ot e elemen.
f
Secara default, gambarN diulang sehingg
im elemen.
a mencakup seluruh
Gambar latar belakang untuk halaman b
isa di set seperti ini:
• contoh : body {background-image:url(‘*.
gif’) ;}
•
Properti Background-repeat

• Properti Background-repeat ini digunakan untuk mengul


angi gambar, baik secara vertikal atau horizontal .
• Properti :
t e
No
• repeat
• f
repeat-x (pengulangan horizontal)
•
•
im
repeat-y (pengulangan vertikal)
no-repeat (tanpa pengulangan)
• contoh :
• body
{
background-image:url(‘*.png’);
background-repeat:repeat-x;
}
Properti Background-position

• Properti Background-position digunakan


untuk mengatur posisi awal dari backgroun
d image
t e
No
• contoh :
• body f
{ im
background-image:url(‘*.png’);
background-repeat:no-repeat;
background-position:right top;
}
t e
oyou
Thank N
f
im

Anda mungkin juga menyukai