Sekarang kita menuju ke pembahasan mengenai CSS, ane sarankan buat temen-temen yang baru belajar untuk membuat halaman web, monggo terlebih dahulu belajar mengenai sintaks HTML, yang sudah pernah ane bahasi sebelumnya. karena HTML dan CSS itu sangat bergantung satu sama lain.
buat yang belom membaca tutorial HTML monggo ke sini dulu
buat yang belom membaca tutorial HTML monggo ke sini dulu
CSS merupakan singkatan dari Cascading Style Sheet, yang berguna untuk mempercantik tampilan / layout dokumen website yang akan kita buat, disini bukan berarti HTML digantikan dengna CSS, namun CSS hanya berguna untuk mempermudah desain halaman web.
Untuk menuliskan syntax CSS, sedikit berbeda dengan ketika kita menuliskan sintaks html.
umumnya script CSS terdiri dari beberapa komponen:
umumnya script CSS terdiri dari beberapa komponen:
1
| Selector { property : value } |
Selector merupakan tag HTML atau elemen ( Class/id ) yang di pilih oleh pembuat web
Property merupakan atribut atau fungsi yang bisa anda atur nilainya atau pun jenis nya.
Value merupakan nilai yang di masukan pada atribut
Property merupakan atribut atau fungsi yang bisa anda atur nilainya atau pun jenis nya.
Value merupakan nilai yang di masukan pada atribut
untuk lebih jelasnya perhatikan sript CSS berikut :
1
| P {color : blue } |
Dimana P merupakan sebuah selector, Color merupakan sebuah property dan value merupakan sebuah nilai dari property.
Contoh sript di atas berguana untuk menjadikan semua Tag P menjadi berwarna biri “blue”.
Nilai value dapat di definisikan dengan tanda titik dua ( : ) dan nilai property dapat di definisikan dengan tanda ( { untuk meng awali dan } untuk mengakhiri ).
Contoh sript di atas berguana untuk menjadikan semua Tag P menjadi berwarna biri “blue”.
Nilai value dapat di definisikan dengan tanda titik dua ( : ) dan nilai property dapat di definisikan dengan tanda ( { untuk meng awali dan } untuk mengakhiri ).
Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara yang dapat dilakukan. Yaitu bisa dengan cara Inline Style, header/internal style dan juga bisa dengan menggunakan Linked/external CSS.
1. cara memasukan CSS dengan mode inline:
1
2
3
4
5
6
7
8
9
10
| <html><header><title>Belajar CSS</title></header><body><p style="color : red"> Teks ini berwarna merah </p><p style="color : Blue"> teks ini berwarna biru </P><p style="color : green"> teks ini berwarna hijau </p></body></html> |
Untuk membuat inline CSS pada tag HTML ditambahkan atribut STYLE=”CSS VALUE”
2. Internal CSS/Header CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
| <head><title> Belajar tutorial CSS</title><style>h3 {font-family : calibri;color : red;font-style : italic}</style></head><Body><h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3></body></html> |
pada metode kedua, bahwa informasi di dalam tag h3 dituliskan dibagian style header, cimana menggunakan fon calibri dan merah dan bercetak miring.
3. Linked CSS/ External CSS
CSS metode ini adalah yang paling umum digunakan, karena akan mengurangi beban load file HTML yang kita buat dan juga menghemat resource, karena tidak perlu ditulis berulang-ulang di setiap file html yang kita buat,
CSS metode ini adalah yang paling umum digunakan, karena akan mengurangi beban load file HTML yang kita buat dan juga menghemat resource, karena tidak perlu ditulis berulang-ulang di setiap file html yang kita buat,
- pertama buat file css dengan nama style.css yang berisi:
1
2
3
| h3 {font-family : calibri;color : red;font-style : italic} |
- Buat file html yang isinya
1
2
3
4
5
6
7
8
| <head><title> Belajar tutorial CSS</title><link rel="stylesheet" href="style.css" type="text/css"></head><Body><h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3></body></html> |
Pada metode ketiga, cara memanggil file css yang telah dibuat adalah dengan menggunakan tag <link>
0 komentar:
Posting Komentar