konten

Kupas Tuntas CSS : Pengertian, Jenis, Fungsi, cara Kerja, dan Contohnya | Belajar HTML

kupas tuntas css :
Perhatian : Gunakan menu di pojok kanan atas jika tulisan berwarna putih !.
Pada postingan sebelumnya dengan topik yang sama, kita telah mengenal apa itu html, fungsi, struktur, element, tag dan penerapannya. Maka tidak lengkap jika kita tidak membahas pasangan nya, yaitu CSS.
  • Apa itu css ?
  • Apa fungsinya ?
  • Bagaimana cara kerjanya ?
  • Apa saja jenisnya ?

Pertanyaan diatas akan kita bahas satu persatu.

CSS yaitu singkatan dari Cascading Style Sheets. CSS sendiri merupakan kumpulan perintah yang di gunakan untuk menjelas kan tampilan sebuah halaman situs web dalam markup language. Markup language atau bahasa markup biasanya selalu di lengkapi dengan html dalam proses pembuatan website. Html dan css saling terkait satu sama lain, hubungan kedua nya ibarat pakai celana tanpa mengenakan kolor, rasanya ada yang ganjil. :D

Jika html berfungsi untuk membentuk rangka sebuah website, maka css berfungsi untuk memberikan tampilan website tersebut agar menjadi lebih menarik, kalau ingin di ibarat kan, html bangunan rumah nya, css jadi cat dan aksesoris rumah. Css berperan untuk mengganti warna tampilan ,font, background, dan menambah kan gambar halaman pada html.

Bagian-bagian CSS sendiri terdiri dari :
Selector, property, dan value.

SELECTOR
selector sendiri merupakan  sebuah tag yang digunakan pada css agar element pada html dapat diedit dengan mengguna kan css atau ditambah kan gaya pada css.


 Gambar.1 : gambar selector
Selector terdiri dari beberapa macam tergantung fungsinya :

SELECTOR TAG
fungsi selector tag yaitu memilih element berdasarkan nama tag.  contoh p { berarti semua yang di pilih adalah bagian pada element p.

SELECTOR CLASS
Fungsi selector class yaitu memilih element berdasarkan class

SELECTOR ID
Fungsinya memilih element berdasarkan id. Selector id selalu di tandai dengan tanda pa

SELECTOR ATTRIBUT
Fungsinya memilih element berdasarkan attribut

SELECTOR UNIVERSAL
Fungsinya berbeda dari yang lain, ini di gunakan untuk mereset css.

Untuk setiap bagian selector akan di bahas mendalam pada bagian selanjutnya ,nantinya akan di sertakan dengan kode-kode dan tulisannya.

PROPERTY
Property merupakan nama gaya untuk menentukan style pada tag html, dengan menggunakan  property lah, sebuah tag html dapat diubah menjadi sifat css, kegunaan property yaitu untuk menambah kan warna, background, posisi teks dan lain sebagainya. Ada banyak macam property yang dapat di gunakan untuk mendsain sebuah halaman web. Untuk contoh nya liat gambar no 2.

VALUE
Value sendiri jika di terjemahkan ke dalam bahasa indonesia yang berarti nilai. Value sendiri di gunakan untuk memberikan keluaran nilai dari suatu property.  Contoh mudahnya , "nama saya : blongkos", dari kalimat itu kita bisa mendapatkan property nya yaitu nama saya(property), blongkos (value). Contoh nya bisa di lihat pada gambar no 2. 

Dari gambar css di atas bisa kita lihat , text nya berwarna merah(red) dan posisinya rata tengah (center). Mulai dari p { } . 

Keterangan : p : selector, color: property, red: value. Text-align : property , center : value.

CSS juga memiliki beberapa jenis style sheet. Sebelum itu kita memahami apa itu style sheet terlebih dahulu

INLINE STYLE SHEET
Inline CSS digunakan untuk tag HTML tertentu. Atribut <style> digunakan untuk memberikan style ke tag HTML tertentu. 
kelebihan dari inline style sheet yaitu jika ingin mengedit bagian tertentu, maka pilihan menggunakan inline merupakan pilhan tepat. Contoh scriptnya bisa di lihat di bawah :
----------------
<!DOCTYPEhtml><html><body style="background-color:black;"><h1 style="color:white;padding:30px;">yura46.blogspot.combelajarhtml</h1><p style="color:white;">yraetikel</p></body> </html>
----------------

EKSTERNAL STYLE SHEET
Posisi dari file css internal pada umumnya di letakkan setelah kode <head> pada html.
Ketika kita menghubungkan file dengan ekstensi .css maka apa yang ingin kita edit pada sebuah website ,akan tampil semua nya secara menyeluruh. Untuk kelebihan nya ,bisa dengan cepat mengedit pada bagian yang ingin di edit pada kode html. Contoh script eksternal :
------------
<head><linkrel="stylesheet"type="text/css" href="style.css" /> </head>
------------
INTERNAL STYLE SHEET
Untuk Kode CSS pada internal style sheet pada umumnya diletakkan pada  bagian kode <head> pada halaman. File pada css jika di pasang menggunakan cara ini ,keuntungan nya file yang akan di panggil bisa di proses secara cepat. Contoh script nya bisa di lihat di bawah :
--------
<head><styletype="text/css">p{color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;} </style> </head>

--------
EMBEDDED STYLE SHEET
Peletakan kode embedded style sheet pada umumnya di dalam tag <style> pada bagian ini</style> di atas tag <body>. Contohnya :
------------
<head>
<style type=”text/css”>
h1 {color : red;}
</style>

</head>
------------
Sebelum lebih jauh melangkah ada baiknya mengetahui bagaimana cara kerjanya :

Cara kerja CSS : CSS beroperasi melalui tag <style> dengan atribut class warna. Css membantu html dalam menentukan warna dan ukuran font, dan tata letaknya. Jika kita ingin menggantikan warna dari text, kita hanya tinggal mengetikkan <span>, tanpa harus capek-capek mengetik ulang kode cssnya. CSS memang di rancang untuk mengganti halaman sebuah website tanpa perlu mengganti isi yang sudah ada dalam konten.

pembentuk sebuah website biasa nya terdiri dari dari berbagai macam css, salah satunya kita akan intip sedikit yaitu css color : ( untuk bagian css lainy seperti css font, margin, icons, position dan masih banyak lagi, akan di bahas tuntas pada bagian selanjut nya).
CSS Color : warna di css mengguna kan kode warna  berupa nama dari warna, atau  RGB, HEX, HSL, RGBA, HSLA.
CSS color bisa di terapkan di beberapa bagian di antara nya ,text color, backgroud, dan border. Contoh :

       Gambar : contoh css background

           Gambar : contoh css margin
            Gambar : contoh css border
Gambar : contoh css text color

Sekarang sudah terjawab apa itu css ,fungsinya ,cara kerja ,dan jenis-jenis dan contoh penerapannya. Untuk ulasan pada part selanjutnya akan di bahas css lebih spesifik lagi, untuk bagian website mulai dari css font,css icons, css pedding, css link ,css position dan masih banyak lagi dan akan di sertakan dengan kode dari setiap css. Setelah script perbagian di ulas , maka kita akan coba membuat website pertama.
Semoga bermanfaat. Jika ada yang ingin di diskusikan ,silahkan tinggalkan komentar, atau ingin memberikan masukan dan saran. Trimakasih



Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Kupas Tuntas CSS : Pengertian, Jenis, Fungsi, cara Kerja, dan Contohnya | Belajar HTML "

Post a comment

ads

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel