Tutorial Belajar CSS

Pengertian CSS, Fungsi dan Cara Penggunaan CSS

Written by adies

Cascading Style Sheets atau CSS adalah bahasa desainer website. Namun sebelum mempelajarinya sebaik kita ketahui dulu apa itu CSS?

Pengenalan CSS

Cascading Style Sheet atau css adalah suatu code yang digunakan untuk mengatur, mempercantik halaman website.
Menurut wikipedia, CSS adalahkumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup”. Nah bahasa markup itu adalah HTML.
Oleh karena itulah css selalu disandingkan dengan dengan html, karena keduanya saling melengkapi.

Apa itu CSS

  • CSS singkatan dari Cascading Style Sheets
  • Styles didefinisikan bagaimana manampilkan elemen HTML
  • Styles umumnya disimpan ke dalam Style Sheet
  • Styles ditambahkan HTML untuk membantu pekerjaan
  • External Style Sheets dapat membantu banyak pekerjaan
  • External Style Sheet disimpan dalam CSS files
  • Multiple Style dapat didefinisi meskipun banyak halaman bisa menjadi satu style.

Fungsi CSS

CSS berfungsi untuk mempercantik tampilan HTML, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya. 

Pada html kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, kita bisa membuat latar belakang sebuah halaman dengan warna.
Html memiliki tag style untuk mengatur tampilan contohnya sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <p>
 ini akan <font color="red">merah</font>.
 <br />
 <font color="blue">Belajar </font> css pertama di phpdanmysql.com
 <font color="green">tentang pengertian css</font>.
</body>
</html>

Kalau di perhatikan code html diatas memang warna tulisan akan berubah warnanya menjadi merah, biru dan hijau, ini karena saya meletakkan tag font pada text yang ingin saya warnai.

Tapi menurut para master web programming hal ini tidak disarankan, karena ini akan menyulitkan anda.

Contohnya begini jika kita memakai tag html untuk merubah warna text, background dan lain2 kita harus meletakan tag html tersebut pada setiap text yang ingin kita ubah warnanya.

Kalau web anda memiliki 3 paragraf iya gak masalah…

Tinggal copy semua tag font pada tiap element html. Urusan selesai

namun jika web anda memiliki ratusan conten pasti akan menguras waktu dan tenaga untuk mengatur style nya.

Dan satu lagi anda akan kesulitan saat ingin mengubah warnanya…

Jika kita punya 100 halaman dan semua pengaturan style nya di dalam tag html dan kita ingin mengubah warnanya mau tidak mau harus di ubah satu persatu.

Oleh karena kekurangan inilah css hadir sebagai pengatur halaman dan css tidak ikut untuk mengurusi pembuatan text yang ditampilkan, css hanya mengatur tampilan agar terlihat lebih menarik.

Contoh CSS

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 .warna {
 color: green;
 }
 </style>
</head>
<body>
 <p>
 <span class=warna> Ini akan Hijau</span>.
 <br />
 <span class=warna>Belajar </span> CSS pertama di Phpdanmysql.com
 <span class=warna>tentang pengertian CSS</span>.
</body>
</html>

Dalam contoh diatas saya membuat style css untuk mengubah warna text yang berada di tag span dengan atribut class yang memiliki id warna.

Id dari atribut class ini lah yang kita pakai untuk mengubah warna text nya. Id ini harus sama dengan di dalam tag style css.

Dalam contoh diatas jika kita hendak mengubah warnanya menjadi merah kita hanya ubah satu kata saja.

Ubah kata kata green menjadi red maka warnanya akan berubah menjadi merah. Simple kan?

Nah begitulah pengertian dan fungsi serta cara penggunaan CSS.

Ini masih awal dari css, masih banyak hal dalam css belum kita pelajari, seperti pembuatan warna backgroud, border dll

tutorial selanjutnya kita belajar penulisan kode css 3 Cara Penulisan Kode CSS Kedalam HTML

About the author

adies

Ada Komentar?

×