Bahas Tuntas Teknologi Informasi dan Komunikasi

Kamis, 19 Oktober 2017

Pengertian CSS dan Fungsinya

Pengertian CSS dan Fungsinya - Cascading Style Sheet (CSS) adalah aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan bahasa pemrograman.

Demikian pula gaya dalam aplikasi pengolah kata seperti Microsoft Word dapat mengatur beberapa gaya, seperti judul, subtab, bodytext, footer, gambar, dan gaya lainnya untuk digunakan bersama dalam beberapa file.

Secara umum, CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Pengertian CSS dan Fungsinya
CSS


Baca juga: Pengertian HTML dan Fungsinya

CSS dapat mengontrol ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, jarak antar paragraf, spasi antara teks, kiri, kanan, atas, bawah, dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS
Nama CSS berasal dari fakta bahwa setiap deklarasi gaya yang berbeda dapat ditempatkan secara berurutan, yang kemudian membentuk hubungan orang tua-anak di setiap gaya.

CSS sendiri merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape memutus peramban standar CSS terbaru mereka atau setidaknya mendekati.

Versi CSS
Untuk saat ini ada tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada format dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan akan format dokumen yang akan ditampilkan pada printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

CSS2 mendukung posisi konten, download, huruf huruf, tata letak tabel / tabel dan tampilan jenis media untuk printer. Kehadiran versi CSS kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga bisa melakukan animasi di halaman website, termasuk animasi animasi warna ke 3D. Dengan desainer CSS3 lebih mudah dalam hal kompatibilitas situs web pada smartphone dengan dukungan fitur baru dari kueri media.

Selain itu, banyak fitur baru di CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Penulisan CSS
Saat login ke bagian CSS, kita sering menemukan kode berikut:

h1 {
warna: # 0789de;
}
Bagian pertama sebelum '{}' disebut selector, sedangkan yang dilampirkan oleh '{}' disebut deklarasi yang terdiri dari dua elemen, properti dan nilainya. Pemilih dalam pernyataan di atas adalah h1, sedangkan warnanya adalah properti, dan # 0789de adalah nilainya.

Selain itu ada tiga metode penulisan atribut CSS, yaitu:

Lembar Gaya Inline
CSS didefinisikan secara langsung dalam tag HTML yang sesuai. Cara penulisannya adalah dengan menambahkan atribut style = "..." pada tag HTML. Style hanya akan berlaku untuk tag yang dimaksud, dan tidak akan mempengaruhi tag HTML lainnya.

Contoh penulisan CSS dengan metode Inline Style Sheet:

<html>
<head>
<title> Contoh Bentuk Inline </ title>
</ head>
<body bgcolor = "# FFFFFF">
<p id = "cth1">

Ini adalah contoh tag P dengan kehormatan menggunakan CSS </ p>

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

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

Lembar Gaya Tertanam
CSS didefinisikan pertama kali di tag <style> ... </ style> di atas tag <body>. Dalam definisi ini atribut CSS digunakan untuk tag HTML, yang kemudian dapat digunakan oleh tag HTML yang sesuai.

Contoh penggunaan CSS dengan metode Sheet Material Tertanam:

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

<body>
<h1 id = "cth1"> Judul ini berwarna 18 merah </ h1>
<p id = "cth2"> Tag p ini diformat dengan font 12 titik dengan tipe font Arial dan memiliki pengenal 0,5 inci </ p>
<p id = "cth3"> Perhatikan juga bahwa bodi di sini telah diformat dengan margin kiri 0,5 inci dan warna latar belakang biru </ p>
</ body>
</ html>

Sifat CSS
Ada dua properti CSS yang bersifat internal dan eksternal. Jika internal dipilih, maka naskah tersebut disisipkan langsung ke halaman website yang akan dirancang.

Jika halaman web lain akan dirancang dengan model yang sama, maka script CSS harus dimasukkan kembali ke halaman web lain.

Properti kedua adalah eksternal dimana script CSS dipisahkan dan ditempatkan pada file khusus. Nantinya, cukup gunakan beberapa jenis link ke file CSS jika halaman web yang dirancang akan dibuat seperti model dalam script.

Fakta Menggunakan CSS
Fakta Menggunakan CSS meliputi:

Ini didukung oleh sebagian besar versi browser yang lebih baru, namun tidak didukung oleh peramban lawas.

Lebih fleksibel dalam penempatan penempatan posisi. Dalam tata letak CSS, kita mengenali Z-Index untuk menempatkan objek pada posisi yang sama.

Menjaga HTML dalam penggunaan tag minimal, ini mempengaruhi ukuran file dan kecepatan download.
Bisa menampilkan konten utama terlebih dahulu, sementara gambar bisa ditampilkan sesudahnya.

Terjemahan CSS masing-masing browser berbeda, tata letaknya akan berubah bila dilihat di berbagai browser CSS adalah layouting "The Future" dengan menggabungkan dengan XHTML.


Contoh File CSS

<html>
<head>
<style type = "text / css">
tubuh
{
background-color: # d0e4fe;
}
h1
{
warna oranye;
text-align: center;
}
hal
{
font-family: "Times New Roman";
ukuran huruf: 20px;
}
</ style>
</ head>

<body>
<h1> contoh CSS! </ h1>
<p> Ini adalah paragraf. </ p>

</ body>
</ html>
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Pengertian CSS dan Fungsinya

Comments
0 Comments

0 komentar:

Posting Komentar