Pengertian CSS dan Fungsi CSS

Pengertian CSS dan Fungsi CSS - Assalamualaikum sobat, pada kesempatan kali ini kita akan membahas tentang pengertian CSS dan fungsi dari css. Kuy kita simak ulasan dibawah ini.

Pengertian CSS

Apa yang dimaksud dengan CSS? mungkin itulah yang tersirat dipikiran sobat.

CSS merupakan kepanjangan dari Cascading Style Sheet. CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML seperti perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

CSS dan HTML memiliki keterkaitan yang sangat erat, karena mereka berdua saling melengkapi, sebelum sobat mempelajari CSS ini sebaiknya sobat terlebih dahulu memahami HTML beserta sintak-sintaknya. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Penulisan CSS

Penulisan kode CSS di bedakan menjadi 3 metode, yaitu Embedded Style Sheet, Inline Style Sheet, dan External Style Sheet.

1. Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>.Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan Embedded Style Sheet

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>

<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

2. Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.

Contoh penggunaan Inline Style Sheet

<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

3. External Style Sheet

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran ".css" atau ekstensi ".css". Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang sobat buat. Dengan cara ini, sobat hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web sobat.

Contoh penggunaan External Style Sheet pada file index.html

<html>
<head>
<title>Contoh Bentuk Inline </title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

Contoh penggunaan External Style Sheet pada file Style.css

p {font-family: arial; font-size: small;} h1 {color: red; }

Versi CSS dari awal hingga sekarang

Saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada performatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan, dan yang terakhir CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel/table layout dan media tipe untuk printer. Kehadiran CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Object Model, dan CSS Math.

Cukup sekian dulu dari saya, semoga bisa bermanfaat dan Keep Coding!

Kuy ke materi berikutnya : Pengertian Selector, Property dan Value beserta fungsinya pada CSS