CSS digunakan untuk mendefinisikan gaya teks seperti jenis huruf, ukuran, dan warna. CSS dapat ditulis langsung di dalam tag HTML, digunakan tag style di dalam head, atau disimpan ke dalam file CSS terpisah. Selector seperti ID dan kelas digunakan untuk menentukan elemen mana yang akan diterapkan gaya CSS.
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
PWEB CSS
1. PENGENALAN CSS
CSS = Cascading Style Sheet
Fungsi : mendefenisikan style untuk suatu
teks dengan jenis huruf, ukuran , warna
tertentu.
2. MEMBUAT CSS
CARA PERTAMA :
mengetikkan langsung dalam tag html
sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
3. CARA KEDUA :
Menggunakan tag style di dalam tag head.
<head>
<style type=“text/css”>
……… style definitions ………
</style>
</head>
4. Style definitions : adalah defenisi style yang ingin
dibuat.
Format penulisannya adalah :
Selector adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang
diinginkan untuk selector.
Selector { property1 : value1 ;
property2 : value2;….
propertyN : valueN ; }
5.
6.
7. CARA KETIGA :
Menyimpan informasi style ke dalam sebuah
file dengan ekstensi/type file css
Memanggil file css dalam html dengan tag
link yang diletakkan dalam tag head.
<head>
<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>
</head>
8.
9. Contoh :
<style type=“text/css” >
hr { color : red ; height : 5px ; width : 50%; }
</style>
Keterangan :
Tag adalah style
Atribut adalah type=“text/css”
Selector adalah hr
Property adalah color, height, width
Value adalah red, 5px, 50%
10. ID SELECTOR
ID selector digunakan untuk menyeleksi
elemen berdasarkan ID tertentu.
ID selector diawali tanda #
(sharp/kres/octothorpe)
11. Sebuah paragraf dengan
content sebagai selector ID.
#content {
font-family: Arial, sans-serif;
font-size: 14px;
color: red;
}
<p id="content">
Artikel Belajar CSS ID Selector
</p>
12. CLASS
class digunakan untuk menentukan style
juga sama seperti id.
Selector ini ditulis dengan awalan titik atau
dot “.” pada css dan class=“nama-class”
pada HTML
13. Sebuah paragraf dengan
content sebagai selector ID.
.teks-hijau {
color: green
}
<p class="teks-hijau"> Paragraf ini memiliki Class
teks-hijau </p>