Pengertian CSS

CSS (Cascading Style Sheet)

merupakan singkatan dari Cascading Style Sheets. Yaitu sebuah rangkaian instruksi yang dapat menentukan bagaimana suatu text itu dapat tertampil di halaman web. Perancangan desain text ini bisa dilakukan dengan mengartikan fonts (huruf) , margins (ukuran), colors (warna), latar belakang (background), ukuran font (font sizes) dan lain sebagainya. Elemen-elemen contohnya colors (warna) , fonts (huruf), sizes (ukuran) trus spacing (jarak) dapat disebut juga dengan “styles”.

Cascading Style Sheets (CSS) ini ternyata juga bisa meletakkan styles yang berbeda pada layers atau (lapisan) yang berbeda pula. CSS ini terdiri atas style sheet yang memberitahubrowser dalam menyelesaikan suatu dokumen yang akan disajikan.  lalu untuk fitur-fitur baru pada halaman web juga lama dapat ditambahkan dengan bantuan style sheet.  Pada saat menggunakan CSS, Anda tidak perlu repot-repot menulis font, size  atau pun color pada setiap paragraf nya, ataupun pada setiap dokumen sekalipun. Lalu, setelah Anda membuat sebuah style sheet, Anda pun bisa menyimpan kode tersebut sekali saja dan juga dapat kembali menggunakannya apabila suatu saat diperlukan.

Lalu apa itu CSS ?

CSS (Cascading Style Sheet) ini adalah salah satu bahasa desain web (style sheet language) dimana mampu mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda atau deisebut dengan (markup laguage). Umumnys CSS ini digunakan dalam mendesain sebuah halaman HTML dan juga XHTML, akan tetapi sekarang CSS dapat  diaplikasikan pula untuk segala dokumenXML, termasuk juga di dalam nya SVG dan juga XUL bahkan sampai dengan sistem operasi Android.

CSS diciptakan guna memisahkan antara konten utama dengan tampilan dokumen yang termasuk layout, font dan juga warna. Pemisahan ini berguna  untuk meningkatkan daya akses konten pada web, kemudian menyediakan lebih banyak fleksibilitas dan juga kontrol dalam spesifikasi dari sebuah karakteristik pada sebuah tampilannya, dimana juga dapat memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kesulitan dalam penulisan kode dan juga struktur dari konten, misalnya dalam teknik tableless pada desain web.

CSS ini juga memungkinkan sebuah halaman untuk menampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, contohnya adalah on-screen, in-print, by voice, dan lain sebagainya. Selain itu, pemilik konten web juga bisa menentukan link yang menghubungkan konten dengan file CSS (Cascading Style Sheet)

Tujuan CSS sendiri

Tujuan utama dari CSS dikembangakan ialah agar dapat membedakan konten dari dokumen dan dari tampilan dokumen. Maka dari itu, pembuatan dalam pemrograman ulang web pun akan lebih mudah dilakukan. Hal-hal yang terlibat dalam desain web itu adalah warna, ukuran dan formatting. Dengan adanya CSS ini, konten dan desain web akan tampak mudah saat dibedakan, jadi memungkinkan juga untuk melakukan pengulangan pada tampilan-tampilan tertentu pada suatu web, sehingga akan sangat memudahkan dalam hal membuat halaman web yang banyak, dimana pada akhirnya bisa menghemat waktu dalam pembuatan web.

Fungsi css

fungsi utama dari css ialah mendesain, merancang, merubah, dan juga membentuk halaman pada wesite ataupun blog dan isi dari halaman website itu ialah tag-tag html, logikanya css itu bisa mengubah tag-tag html yang sederhana sehingga bisa menjadi lebih fungsional dan juga menarik.

Cara kerja css

Sebenarnya Untuk cara kerja css itu sangatlah mudah,  disini kita hanya perlu menulis stylenya saja (selector id dan class tersesuaikan) maka dengan itu secara otomatis akan bekerja pada document html juga.

Jenis-Jenis CSS (Inline, Internal, Eksternal)

Cascading Style Sheet (CSS) merupakan sebuah bahasa script yang berfungsi untuk mempercantik tampilan website agar tampilan website lebih menarik untuk dilihat. Dengan CSS kita dapat mengatur dan menentukan jarak, mengubah jenis font, ukuran font, warna dan lain sebagainya. Pada CSS ada beberapa jenis cara penulisan diantaranya CSS :

1. Inline Style Sheet
2. Internal Style Sheet
3. Eksternal Style Sheet

Untuk lebih jelasnya simak uraian Jenis-Jenis CSS (Inline, Internal, Eksternal) berikut ini.

1. Inline Style Sheet

Inline Style Sheet merupakan metode atau cara penulisan CSS langsung pada tag HTML yang ingin diberikan style CSS. Metode ini biasanya digunakan ketika kita tidak ingin mengatur semua elemen didalam dokumen web. Metode ini sangat tidak disarankan karena akan membuat tag pada HTML akan penuh dengan attribute HTML dan membuat ukuran file pada HTML akan bertambah besar. Berikut contoh penggunaan Inline Style Sheet.<body style=”font-family: arial”>
    <h1 style=”background-color: red; color: white; padding: 5px”>Cascading Style Sheet (CSS).</h1>
</body>

2. Internal Style Sheet

Internal Style Sheet merupakan metode penulisan CSS langsung didalam file HTML tepatnya berada diantara tag head dengan diapit tag style terlebih dahulu sebelum memuali kode CSS. Berikut contoh penggunaan Internal Style Sheet.<html>
<head>
    <meta charset=”UTF-8″>
    <title>Jenis-Jenis CSS (Inline, Internal, Eksternal)</title>
    <style type=”text/css”>
        body {font-family: arial;}
        h1 {
            background-color: red;
            color: white;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Cascading Style Sheet (CSS).</h1>
</body>
</html>

3. Eksternal Style Sheet

Eksternal Style Sheet merupakan metode penulisan CSS secara terpisah dengan memberikan ekstensi .css untuk nama filenya. Metode ini sangat dinajurkan untuk menuliskan kode CSS karena kita akan dengan mudah mengubah kode yang terkumpul dalam satu file. Untuk Eksternal style file akan disematkan atau diload dengan kode HTML seperti berikut.<head>
    <meta charset=”UTF-8″>
    <title>Jenis-Jenis CSS (Inline, Internal, Eksternal)</title>
    <link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

Baik, itulah tadi Jenis-Jenis CSS (Inline, Internal, Eksternal) yang bisa kalian gunakan dalam penulisan kode-kode CSS, semoga bisa bermanfaat dan selamat mencoba.

Leave a comment

Blog at WordPress.com.

Up ↑

Design a site like this with WordPress.com
Get started