Pengertian CSS, Fungsi, dan Cara Penulisan nya


Pengertian CSS, Fungsi, dan Cara Penulisan

Pada kesempatan kali ini JogjaXploit akan memberikan artikel mengenai Pengertian CSS, Fungsi CSS dan Cara Penulisan CSS. Apa itu CSS? Cascading Style Sheet atau yang biasa disebut CSS merupakan sebuah salah satu bahasa desain web yang berfungsi untuk memperindah tampilan website, mengatur beberapa komponen dalam web sehingga lebih ter-struktur.

CSS biasanya di gunakan untuk mendesain sebuah halaman HTML dan XHTML. Bahasa desain satu ini merupakan suatu bahasa yang wajib bagi developers dan creator agar Website atau aplikasi yang di buat nya bisa tampak indah dan menarik. 

Mengapa menggunakan CSS?
  • CSS memungkinkan kita untuk menerapkan style tertentu pada elemen HTML tertentu
  • Dengan CSS, kita bisa memisahkan antara style dan konten
  • Elemen HTML akan terlihat lebih menarik jika diberikan CSS di dalam elemen tersebut.
  • Masih banyak lagi alasan mengapa kalian harus menggunakan CSS pada elemen HTML atau halaman Web kalian

Pada kali ini kita akan bahas satu persatu mengenai Fungsi CSS, Sejarah, dan Penulisan nya.

Fungsi CSS :
  • Memberikan warna tulisan
  • Memberikan border
  • Memberikan text-aligning pada tulisan
  • Memberikan perintah tentang bagaimana HTML tersebut ditampilkan
  • Dan masih banyak lagi Fungsi dari CSS ini.
Sekarang, mari kita bahas mengenai Sejarah dari CSS

Nama CSS sendiri didapat dari setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang mana kemudian membentuk hubungan ayah-anak atau yang disebut parent-child pada setiap style. 

CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996 Setelah CSS distandardisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Struktur dari CSS



Penjelasan :

Setiap perintah CSS terdiri dari 2 komponen atau bagian yaitu Selector dan Declaration.
  • Selector berfungsi untuk memberi tahu browser bagian atau tag mana yang akan di berikan style/CSS. Contohnya h1, body, head, table, dll
  • Pada declaration terdepat dua komponen yaitu property dan value yang mana antara property dan value tersebut dipisahkan dengan titik dua.
  • Property merupakan style yang akan diberikan pada selector dan value adalah nilai dari property tersebut

Ada 3 cara penulisan CSS pada HTML yang akan JogjaXploit bagikan di bawah ini


1. Inline Style Sheet / Inline CSS

Inline Style Sheet atau Inline CSS merupakan salah satu cara penulisan CSS melalui objek atau suatu tag html langsung. Maksudnya, dengan memberikan Style atau CSS langsung pada HTML yang ingin di berikan Style. Untuk menerapkan cara ini, kalian hanya perlu memberikan tag <style> pada elemen yang kalian inginkan diberi CSS atau style. Berikut contoh penulisan nya


<html>
<head>
<title>Contoh Inline CSS</title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpa berikan format 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>

2. Embedded Style Sheet (Internal)

Embedded Style Sheet Internal atau Embedded Internal CSS yaitu salah satu cara penulisan CSS dengan cara mendefinisikan terlebih dahulu tag <style> ... </style> diatas tag <body> . Berikut contoh penulisan nya.


<html>
<head>
<title>Contoh Embedded CSS</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>

3. Embedded Style Sheet (Eksternal)

Embedded Style Sheet Eksternal merupakan salah satu cara penulisan CSS dengan cara mendefinisikan atau menempatkan kumpulan style pada file tersendiri/file lain. Penulisan jenis ini banyak digunakan oleh para pemilik web, aplikasi dan lain sebagainya karena lebih fleksibel dan mudah dalam pengaturan serta pengecekan style nya. Berikut contoh penulisan nya.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>contoh Embedded Style Sheet Eksternal</title>
 <link rel="stylesheet" href="lokasi_style.css">
</head>
<body>
 
</body>
</html>


Lalu buatlah file yang akan kita buat khusus untuk menaruh dan menyimpan perintah perintah style. Yang didalam file CSS nya terdapat berbagai  style, contoh nya.



body {   background-color: lightblue;}

h1 {   color: white;   text-align: center;}

p {   font-family: verdana;   font-size: 20px;}

Mungkin cukup sekian yang dapat saya bagikan mengenai Apa itu CSS, Fungsi css, dan Cara Penulisan CSS. Selamat berjumpa di artikel selanjutnya, Terima kasih.

4 Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. MAKASIH MATERINYA KAK... ALHAMDULILLAH AKU UDAH BISA NGODING SENDIRI :'). DAN JUGA YANG TERPENTING MATERI INI GRATIS EA:V

    BalasHapus

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment

Lebih baru Lebih lama

ads

ads