CSS merupakan kepanjangan dari Cascading Style Sheet yaitu sebuah dokumen web untuk mengatur HTML dengan berbagai properti yang tersedia untuk memperindah tampilan html.
Script CSS sendiri terdiri dari 3 bagian yaitu :
a. Selektor, memilih elemen yang akan diberikan aturan
b. Property, aturan
c. Value, Nila
Penulisan CSS terbagi menjadi 3 macam, yaitu Inline, internal dan eksternal. Berikut penjelasan dari ketiga penulisan CSS :
a) Inline CSS
Penulisan CSS langsung di dalam HTML. Model penulisan ini hanya memiliki satu atau dua property saja, tapi susah jika ad perbaikan desain.
Berikut script Inline CSS dengan nama file inline.html
<html>
<head>
<title>Inline</title>
</head>
<body>
<p style="color:blue>Tulisan ini akan berwarna biru</p>
<p style="font-weight: bold">Tulisan ini dicetak tebal</p>
<!-- script CSS ditulis langsung dalam HTML dengan menggunaakn eks.html --></body>
</html>
Tampilan pada browser sebagai berikut :
b) Internal CSS
Penulisan CSS masih dalam satu elemen HTML dengan menggunakan tag <style> … </style> yang ditulis dalam elemen <head> … </head>. Namun penulisan internal ini, tidak dapat digunakan untuk mengatur HTML lain.
Berikut ada contoh script internal CSS dengan nama file internal.css sebagai berikut :
<html>
<head>
<style type="text/css">
p{
color: red;
font-weight: bold;
}
</style>
</head>
<!-- script CSS ditulis langsung dalam HTML dengan menggunakan eks.html -->
<body>
<p> Tulisan ini berwarna merah</p>
<p> Tulisan ini dicetak tebaal </p>
</body>
</html>
Tampilan pada browser sebagai berikut :
c) Eksternal CSS
Penulisan ekternal CSS adalam model penulisan CSS yang terpisah dengan HTML artinya file CSS disimpan dalam file tersendiri dan paling banyak di gunakan.
Kelebihan dari penulisan eksternal CSS adalah dapat digunakan oleh banyak file HTML.
“Perlu diingat, dalam penulisan CSS, setiap akhi sript wajib diberikan tanda (;)
File CSS perlu dihubungkan dengan HTML dengan cara memanggil File CSS dalam elemen <head> … </head>. Cara memanggil file CSS sebagai berikut :
<link rel=”stylesheet” href=”nama_file.css”>
Berikut adalah contoh file HTML dan file CSS :
<html>
<head>
<litle>Internall</litle>
<link rel="stylesheet" href="Blog/eksternal.css">
</head>
<body>
<p>Tulisan ini berwarna biru</p>
<p>Tulisan ini dicetak tebal</p>
</body>
</html>
Dan berikut kita buat file ekternal.css yang terpisah dalam satu file tersendiri sebagai berikut :
p{
color: blue;
font-weight: bold;
text-transform: uppercase;
}
Tampilan pada browser sebagai berikut :
Cara memanggil file CSS.
- Letakan file CSS ke folder CSS (htdocs - Blog - CSS)
- Letakan file eksternal.html pada folder Blog (htdocs - Blog)
- ketikan di browser : localhost/Blog/eksternal.html
Semoga bermanfaat buat sobat yang baru tau👊👊👋😉
0 Comments