Penjelasan Tentang CSS Lengkap Sejarah dan Penggunaanya

Cascading Style Sheet atau yang sering disebut dengan CSS adalah aturan untuk mengelola beberapa komponen pada web sehingga akan lebih terstruktur dan rapi. CSS bukan bahasa pemrograman.

Penjelasan Tentang CSS Lengkap Sejarah dan Penggunaanya

Sama seperti style dalam aplikasi pengolah kata seperti Microsoft Word dapat mengelola beberapa style, seperti pos, sub-tab, bodytext, footer, gambar, dan style lainnya untuk digunakan bersama dalam beberapa file. Umumnya, CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Lihat juga: 5 daftar Situs Deep WEB yang jangan sekali-kali Anda coba membukanya

CSS dapat mengontrol ukuran gambar, warna bagian tubuh dalam teks, warna tabel, ukuran batas, warna batas, warna hyperlink, warna mouse di atas, spasi antar paragraf, spasi antara teks, kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengelola tampilan dokumen. Dengan CSS, ini memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS


Nama CSS berasal dari fakta bahwa setiap deklarasi style yang berbeda dapat ditempatkan secara berurutan, yang kemudian membentuk hubungan orangtua-anak dalam setiap style. CSS sendiri adalah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS dibakukan, Internet Explorer dan Netscape merilis browser terbaru mereka yang sesuai atau setidaknya mendekati standar CSS.

Versi


Saat ini ada tiga versi pada CSS, yakni CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan format dokumen sehingga mereka dapat ditampilkan pada printer, sedangkan CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal dalam desain situs web.

Lihat juga: Penjelasan Tentang PHP Lengkap Sejarah dan Penggunaanya

CSS3 mendukung pemosisian konten, dapat diunduh, font font, tata letak tabel dan jenis media untuk printer. Kehadiran versi CSS ketiga diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga dapat melakukan animasi pada halaman web, termasuk animasi warna hingga animasi 3D. Dengan desainer CSS3, lebih mudah untuk kompatibilitas situs web pada telepon pintar dengan dukungan fitur baru, yaitu permintaan media. Selain itu, banyak fitur CSS3 baru seperti: banyak latar belakang, batas-radius, drop-shadow, gambar batas, CSS Math, dan CSS Object Model.

Penulisan


Saat memasuki bagian CSS, kode sering ditemukan sebagai berikut:
h1 {
    color: #048fea;
   }

Bagian pertama sebelum tanda '{}' disebut selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua elemen, yaitu property dan value. Pemilih dalam pernyataan di atas adalah h1, sedangkan warnanya adalah properti, dan #048fea adalah value.

Selain itu ada tiga metode untuk menulis atribut CSS, yaitu:
  1. Inline Style Sheet
  2. Embedded Style Sheet
  3. Shorthand CSS

Inline Style Sheet


CSS didefinisikan secara langsung dalam tag HTML yang dimaksud. Metode penulisan ini cukup untuk menambahkan atribut style= "..." di tag HTML. Style hanya akan berlaku untuk tag yang dimaksud, dan tidak akan memengaruhi tag HTML lainnya.

Lihat juga: Penjelasan Tentang HTML Lengkap Sejarah dan Penggunaanya

Contoh penulisan CSS dengan metode Inline Style Sheet, sebagai berikut:
<html>
<head>
<title>Contoh Inline Style Sheet</title>
</head>
<body bgcolor="gray">
<p>Ini adalah tag P tanpa diformat menggunakan CSS </p>
<p>Perhatikan Tag BODY BGCOLOR ini diformat dengan warna background body abu-abu</p>

<p style="font-size:24pt">Tag P ini diformat dengan besar font 24 point</p>

<p style="font-size:12pt; color:blue">Tag P ini diformat dengan besar font 12 point, dan menggunakan warna biru</p>
</body>
</html>

Embedded Style Sheet
CSS pertama kali didefinisikan dalam tag <style> ... </ style> di atas tag <body>. Dalam definisi ini, atribut CSS yang akan digunakan untuk tag HTML yang disebutkan, yang kemudian dapat digunakan oleh tag HTML yang dimaksud.

Contoh menggunakan CSS dengan metode Embedded Style Sheet:
<html>
<head>
<title>Contoh Embedded Style Sheet</title>
</head>
<style>
body {background:#808080; color:#FFD700; margin-left:0.2in}
h1 {font-size:20pt; color:#0000CD}
p {font-size:12pt; font-family:arial; text-indent:0.2in}
</style>

<body>
<h1>Judul ini berukuran 20 dengan warna merah!</h1>
<p>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.2 inch </p>
<p>Perhatikan juga bahwa body disini telah diformat dengan margin kiri 0.2 inch dan warna background gray</p>
</body>
</html>

Shorthand CSS


Teknik singkatan adalah cara untuk mempersingkat penulisan kode CSS yang memungkinkan untuk mengatur nilai beberapa properti secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja menghemat waktu. Kode terlihat lebih rapi, lebih efisien, dan seringkali lebih mudah dibaca.

Lihat juga: Penjelasan Tentang Moodle Lengkap Sejarah dan Integrasi

Dalam CSS, wajar jika satu properti memiliki banyak elemen. Misalnya dalam margin CSS memiliki 4 properti untuk setiap sisi elemen.
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
Jika menggunakan teknik Shorthand CSS, menulis semua properti dapat disatukan demi menciptakan kode yang lebih ringkas. Urutan penulisan syntax pada teknik singkatan harus benar agar sesuai dengan style yang diinginkan.

Untuk saat ini metode penulisan Shorthand CSS tersedia untuk property berikut:
  1. Margin
  2. Padding
  3. Font
  4. Background
  5. Border
  6. List

Margin

margin: 3px 5px 7px 10px;

Artinya:
margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 10px;

Font

font: italic bold 12px/28px Arial;

Lihat juga: Penjelasan Lengkap Tentang Joomla

Artinya:
font-style: italic;
font-weight: bold;
font-size: 12px;
line-height: 28px;
font-family: Arial;

Background

background: #808080 url('igniel.jpg') no-repeat top center;

Artinya:
background-color: #808080;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;

Border

border: 3px solid #808080;

Artinya:
border-width: 5px;
border-style: solid;
border-color: #808080;

List

list-style: disc inside url('dot.gif');

Artinya:
list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');

Sifat CSS


Ada dua property CSS, internal dan eksternal. Jika internal dipilih, maka skrip dimasukkan langsung ke halaman situs web yang akan dirancang. Jika halaman web lain akan dirancang dengan model yang sama, maka skrip CSS harus ditambahkan ke halaman web lainnya.

Lihat juga: Penjelasan Lengkap Tentang Drupal

Sifat kedua adalah eksternal di mana skrip CSS dipisahkan dan ditempatkan dalam file khusus. Nantinya, cukup gunakan semacam tautan ke file CSS jika halaman web yang dirancang akan dibuat seperti model dalam skrip.

Fakta Menggunakan CSS


Fakta Menggunakan CSS meliputi:

  • Ini telah didukung oleh sebagian besar versi browser terbaru, tetapi tidak didukung oleh browser lama.
  • Lebih fleksibel dalam tata letak posisi. Dalam tata letak CSS, kita tahu Z-Index untuk menempatkan objek di posisi yang sama.
  • Menjaga HTML dalam menggunakan tag minimal, ini mempengaruhi ukuran file dan kecepatan unduh.
  • Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan setelahnya.
  • Terjemahan CSS untuk setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
  • CSS adalah tata letak "Masa Depan" dengan bergabung dengan XHTML.
Lihat juga: Penjelasan Tentang Blogger Lengkap Sejarah dan Integrasi

Contoh Berkas CSS

<html>
<head>
<style type="text/css">
body
{
background-color:#808080;
}
h1
{
color:blue;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>Contoh Berkas CSS</h1>
<p>This is a paragraph.</p>

</body>
</html>

Cobalah kreasikan sendiri di sini Tryit Editor

Artikel Pencarian Terkait:
  • Pengertian,Definisi, Dan Fungsi Dari Css
  • Sejarah dan Perkembangan CSS
  • Pengertian CSS Beserta Fungsi dan Cara Kerja CSS
  • Pengertian, Fungsi, Tujuan Dan Sejarah CSS .
  • Cascading Style Sheets - Wikipedia bahasa Indonesia, ensiklopedia ...

Komentar

Posting Komentar

Postingan populer dari blog ini

Terlalu Dekat Dengan Pasar, 15 Minimarket Modern Di Malang Akan Di Tutup Oleh Pemkot Malang

Gambar
WESTERNBLOG.XYZ  - Rencana Pemerintah Kota Malang untuk menutup toko modern yang dekat dengan pasar tradisional terus menjadi matang. Selain itu, mencoba memasukkan produk-produk usaha mikro, kecil dan menengah (UMKM) ke dalam toko-toko ritel yang dioperasikan juga ditingkatkan. Mengenai penyelesaian toko modern yang sedang berjalan, itu juga membantu mengangkat produk UMKM. Upaya untuk mengendalikan toko modern di dekat pasar tradisional akan segera diterapkan pada mereka yang mengganti aturan. "Pengendalian toko modern ini harus dilakukan tahun ini," kata Walikota Malang, Sutiaji, Minggu (21/4). "Dalam waktu dekat, saya akan bertemu dengan toko ritel modern untuk membahas dan mengadakan perjanjian baru," jelas politisi Demokrat itu. Sebelumnya, Sutiaji mengaku telah bertemu dengan salah seorang General Manager sebuah toko modern di Jakarta. Dia mengumumkan bahwa dia telah membuka rencana untuk memutuskan toko modern, sementara berencana untuk memasarkan produk lok...
Baca selengkapnya

Cara Menghindari Konten Salinan dengan Baik dan Benar

Gambar
Apakah kalian tahu, bahwa konten Kalian hasil salinan atau bukan? disengaja dan tidak disengaja bisa saja terjadi pada Blog Kalian. Bagaimana tidak, banyak para Blogger diluar sana yang berbondong - bondong membuat artikel yang memungkin tulisan mereka sama walaupun tidak disengaja. Artikel ini tidak mengajari Kalian untuk berbuat curang dengan membuat konten salinan yang aman dan sebagainya, akan tetapi hal itu bisa dilakukan selama Kalian tahu caranya. Merasa kasihan dengan mereka para Blogger yang telah membuat artikel dengan susah payah lalu di Copy begitu saja tanpa ijin. Akan lebih baiknya lagi selain menampilkan sumber yang di cari di berbagai website yang Kalian kunjungi, hendahlak untuk mengganti kata - kata yang bertujuan sama dengan maksud menghindari konten salinan. Berikut ini contoh yang baik dan benar untuk mengbuat konten atau artikel dengan Mencantumkan sumber ilmu yang didapatkan. Mengbuat Konten atau Artikel dengan Mencantumkan Sumber "Banyak Para Blogger membua...
Baca selengkapnya

112 TPS di Riau akan melakukan pengulangan Coblosan dan Lanjutan

Gambar
WESTERNBLOG.XYZ - Bawaslu Riau merekomendasikan bahwa ada 112 tempat pemungutan suara yang akan melakukan pemungutan suara ulang (PSU) dan pemilihan lebih lanjut. Ini dilakukan karena masalah di lapangan. "Kami sudah menyampaikan ini ke KPU Riau. Ini karena banyaknya laporan yang kami terima dari publik saat pemilihan 17 April 2019," kata Ketua Bawaslu Riau, Rusidi Rusdan Lubis. Rusidi menjelaskan rekomendasi PSU dan melanjutkan setelah partainya memverifikasi dan mengumpulkan hasil data pemantauan di TPS di Riau. Hasil pengawasan ini kemudian ditinjau dan dibahas dua hari setelah pemungutan suara. "Diskusi dilakukan secara komprehensif dengan merekapitulasi peristiwa dan masalah khusus yang terjadi di semua TPS di Riau," kata Rusidi. Menurut Rusdi, berdasarkan hasil pengumpulan masalah, ditemukan bahwa 26 tempat pemungutan suara akan dilakukan oleh PSU dan 86 tempat pemungutan suara dilaksanakan dengan pemilihan lebih lanjut. "(Sebanyak) 26 tempat pemungutan ...
Baca selengkapnya