A. Pendahuluan
CSS merupakan singkatan dari ” Cascading Style Sheets “. sesuai dengan namanya CSS memiliki sifat ” style sheet language ” yang berarti bahasa pemrograman yang di gunakan untuk web design. CSS adalah bahasa pemrograman yang di gunakan untuk men-design sebuah halaman website. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.
B. Latar Belakang
Karena css dapat mendukung agar website tempilannya menjadi lebih user friendly.
C. Maksud dan Tujuan
Agar dapat mengetahui apa itu CSS dan dasar CSS.
D. Pembahasan
Cascading Style Sheets (CSS) adalah bahasa gaya yang digunakan untuk menggambarkan / penyajian dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan World Wide Web, bersama HTML dan JavaScript.
CSS sebenarnya dirancang untuk pemishan presentasi dan konten tapi juga tata letak warna dan font. Dimana akses pada dapat diberikan lebih banyak fleksiblititas dan kontrol dalam spesifikasi tertentu. CSS dirancang agar memungkinkan beberapa halaman web untuk berbagi format dengan menentukan CSS yang relevan dalam file .css terpisah, dan mengurangi kompleksitas dan pengulangan dalam konten struktural.
Pemisahan format dan konten juga membuatnya layak untuk menyajikan halaman markup yang sama dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di cetak, dengan suara (melalui browser berbasis ucapan atau pembaca layar), dan pada berbasis Braille perangkat taktil. CSS juga memiliki aturan untuk pemformatan alternatif jika konten diakses pada perangkat seluler. Bukan hanya HTML saja tapi, bahasa markup lainnya mendukung penggunaan CSS, termasuk XHTML, XML polos, SVG, dan XUL. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.
CSS sebenarnya dirancang untuk pemishan presentasi dan konten tapi juga tata letak warna dan font. Dimana akses pada dapat diberikan lebih banyak fleksiblititas dan kontrol dalam spesifikasi tertentu. CSS dirancang agar memungkinkan beberapa halaman web untuk berbagi format dengan menentukan CSS yang relevan dalam file .css terpisah, dan mengurangi kompleksitas dan pengulangan dalam konten struktural.
Pemisahan format dan konten juga membuatnya layak untuk menyajikan halaman markup yang sama dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di cetak, dengan suara (melalui browser berbasis ucapan atau pembaca layar), dan pada berbasis Braille perangkat taktil. CSS juga memiliki aturan untuk pemformatan alternatif jika konten diakses pada perangkat seluler. Bukan hanya HTML saja tapi, bahasa markup lainnya mendukung penggunaan CSS, termasuk XHTML, XML polos, SVG, dan XUL. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.
Fungsi dan Kegunaan CSS, CSS dapat digunakan mengubah text dan font serta mengubah warnanya. mengatur ukuran layout, lebar tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive dan masih banyak lagi yang dapat di lakukan oleh css.
Css juga bisa color, margins digunakan untuk mengatur jarak pada luar element tertetu. mengatur warna atau gambar pada latar belakang bisa menggunakan background.
CSS memiliki sintaks yang sederhana dan menggunakan sejumlah kata kunci bahasa Inggris untuk menentukan nama-nama berbagai properti gaya Lembar gaya terdiri dari daftar aturan. Setiap aturan atau aturan-set terdiri dari satu atau lebih pemilih, dan blok deklarasi.
CSS3 adalah standar terbaru untuk bahasa CSS, yang sedang dikembangkan sejak 2005. Ini kompatibel dengan versi lama dari CSS, dan memiliki properti baru yang men-debug quirks sebelumnya dan memperluas fitur CSS2, dan bahkan mendapat beberapa kemampuan seperti JavaScript. CSS3 juga telah membahas sejumlah masalah pengembangan ponsel, akuntansi untuk desain responsif dan mengimbangi masalah yang disebabkan oleh ketidakcocokan Adobe Flash pada perangkat seluler. Dalam kombinasi dengan JavaScript, CSS3 memiliki banyak fungsi Flash sekarang - animasi- dan interaktivitas-bijaksana.
Berikut adalah tujuh hal utama yang membedakan CSS3 dari pendahulunya.
- Mentalitas seluler pertama, CSS3 secara inheren mendukung desain responsif, dan dilengkapi untuk menangani kueri media. Kueri media adalah panggilan yang dibuat oleh kode untuk menentukan perangkat dan layar ukuran apa yang dilihat oleh pengguna di situs. Ini menambah kemampuan desain responsif yang baru untuk repertoar CSS.
- Kode berbasis modul, Salah satu perkembangan terbesar adalah bahwa CSS3 dibagi menjadi "modul." Semua spesifikasi CSS lama telah bermigrasi ke versi baru dan dibagi menjadi bagian yang lebih kecil (dengan beberapa modul baru ditambahkan juga).
- Modul CSS3 lainnya termasuk: Pemilih: Pengembang dapat mengedit elemen berdasarkan nama, kelas, jenis, atribut, dan lainnya.
- Modul Box Model: Ini menjelaskan pendekatan untuk menciptakan konsistensi antara elemen HTML pada halaman, atau "kotak." Dengan menerapkan margin, batas, dan padding ke konten kotak, pengembang dapat membersihkan area di sekitar elemen, memberinya batas, dan lebih.
- Latar belakang dan batas: Dengan kontrol yang lebih baik terhadap perlakuan batas elemen dan latar belakang halaman, CSS3 juga memungkinkan sudut membulat pada kotak dan bayangan. Sebelum CSS3, latar belakang harus dicapai dengan gambar, yang ditambahkan ke ukuran file halaman dan waktu buka.
- Efek teks: CSS3 mencakup efek bayangan, overflow teks (yang menyembunyikan teks yang terlalu panjang untuk elemennya), melanggar kata (melanggar teks secara otomatis sehingga cocok dalam kotak), dan pembungkusan teks - semua hal yang menghemat banyak waktu pemformatan desainer .
- Dukungan font web memberi para desainer akses ke cara yang lebih dari sekadar font “web safe”. Sebelum CSS3, desainer hanya bisa menggunakan font “web safe” untuk 100 persen yakin bahwa font akan selalu menampilkan hal yang sama di semua mesin. Font aman web adalah font yang telah dipasang dan dikenali oleh setiap komputer. Jika seorang perancang menggunakan font umum seperti Times New Roman atau Arial, mereka dapat menjamin bahwa setiap pengguna akan melihat situs mereka seperti yang dimaksudkan. Namun, jika mereka ingin menggunakan font yang lebih jarang, jika tidak didukung oleh mesin pengguna, itu akan secara default kembali ke font web aman. Desainer sekarang dapat menjalankan font web di CSS3, font khusus seperti yang tersedia melalui Google Fonts dan Typecast. Font ini dapat diunduh ke server dan dijalankan melalui kode CSS, atau diakses langsung dari sumbernya melalui skrip, yang disebut tepat di dalam kode CSS. Ini telah membuka dunia kemungkinan bagi para desainer.
- Ini memungkinkan pengembangan lebih cepat, dan waktu muat lebih cepat Apa yang dulu membutuhkan gambar latar belakang, CSS3 sekarang dapat dicapai dengan peningkatan visual, yang menghemat waktu pengembang dalam produksi. Ini mengurangi panggilan dan waktu muat untuk banyak gambar karena semua efek ini dibangun ke dalam kode. Selain itu, halaman memuat lebih cepat berkat ukuran file yang lebih kecil secara keseluruhan dan lebih sedikit panggilan.
- Buat transformasi dan animasi 2D, 3D, dan transisi, Efek ini memungkinkan elemen pada halaman untuk memutar, tumbuh, menyusut, membalik, atau menerjemahkan ke warna yang berbeda. Untuk pertama kalinya, elemen yang dibuat dalam CSS dapat bergerak di layar tanpa memerlukan JavaScript atau kode Flash. Dengan transisi, elemen dapat mengubah ukuran dan warna dengan mulus. Anda dapat menetapkan durasi untuk transisi, mis. membuat tombol yang perlahan-lahan mengembang dan berubah warna saat Anda mengarahkan mouse ke atasnya.
- Warna dan efek gambar baru, CSS3 mendukung warna baru (RGBA, HSL, HSLA) dan warna gradien, dan memungkinkan penyesuaian untuk opasitas. Masalah besar lainnya adalah dukungannya terhadap sudut gambar yang membulat, sebuah efek yang membutuhkan banyak pemformatan dan kerja Photoshop untuk mencapainya sebelumnya.
- Box-sizing telah memperbaiki beberapa masalah penyelarasan yang menyebalkan Kotak-sizing memungkinkan pengembang untuk mendapatkan ukuran elemen yang tepat tanpa harus mengurangi dimensi untuk padding dan batas. Dengan properti kotak-sizing, padding dan batas termasuk dalam tinggi dan lebar. CSS adalah teknologi pengembangan web mendasar yang tetap menjadi inti dari bagaimana segala sesuatu di web terlihat, tetapi dengan evolusi terbaru, terbukti mampu jauh lebih banyak.
- semua elemen dari jenis tertentu, mis. header tingkat kedua h2
- elemen yang ditentukan oleh atribut, khususnya:
- id: pengenal unik dalam dokumen
- class: identifier yang dapat membubuhi keterangan beberapa elemen dalam dokumen
- elemen tergantung pada bagaimana mereka ditempatkan relatif terhadap orang lain di pohon dokumen.
Pseudo-class digunakan dalam pemilih CSS untuk memungkinkan pemformatan berdasarkan informasi yang tidak terdapat dalam pohon dokumen. Salah satu contoh pseudo-class yang banyak digunakan adalah: hover, yang mengidentifikasi konten hanya ketika pengguna "menunjuk ke" elemen yang terlihat, biasanya dengan memegang kursor mouse di atasnya. Ini ditambahkan ke pemilih seperti dalam: hover atau #elementid: hover. Kelas pseudo mengklasifikasikan elemen dokumen, seperti: tautan atau: dikunjungi, sedangkan elemen pseudo membuat seleksi yang mungkin terdiri dari elemen parsial, seperti :: first-line atau :: first-letter.
Para pemilih dapat dikombinasikan dalam banyak cara untuk mencapai kekhususan dan fleksibilitas yang tinggi. [7] Beberapa pemilih dapat bergabung dalam daftar spasi untuk menentukan elemen berdasarkan lokasi, tipe elemen, id, kelas, atau kombinasi apa pun darinya. Urutan pemilih sangat penting. Sebagai contoh, div. MyClass {color: red;} berlaku untuk semua elemen class myClass yang berada di dalam div elemen, sedangkan. MyClass div {color: red;} berlaku untuk semua elemen div yang ada di elemen class myClass.
- File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam HTML yang ingin kita design dengan CSS menggunakan syntax berikut ini. dengan tag link seperti di atas di gunakan untuk menghubungkan file html dengan fie css. syntax di atas di letakkan pada file html. pada atribut rel dan type di tag link di atas di gunakan untuk mende nisikan bahwa yang di panggil atau yang di hubungkan adalah fie Style sheet atau css. kemudian atribut href di gunakan untuk meletakkan letak file css.Contoh jika file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.
<link rel="stylesheet" type="text/css" href="style.css" /><link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="stylesheet" type="text/css" href="../assets/style.css" />
Sebenarnya ada beberapa metode untuk meng import-kan file CSS yaitu adalah :
- Inline CSS Style
Teknik penulisan CSS Inline Style, Cara pertama Belajar CSS Dasar Cara Penulisan CSS. Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selector(id dan class) sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML. syntax css di letakkan di dalam atribut style=””.
Contoh penulisan inline css style
Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah le HTML atau PHP. di sini saya menggunakan HTML. saya membuat sebuah file dengan nama index.html.
<!DOCTYPE html>Pada Coding diatas dapat dilihat pada elemet p memiliki atribut style="". Pada atribut itu terdapat color: #927; yang mana digunakan untuk merubah warna isi dari element p lalu font-size digunakan untuk merubah ukuran font text. Dan Jika file tersebut dibuka dibrowser maka akan terlihat seperti berikut :
<html>
<head>
<title>Tutorial Mukti911</title>
</head>
<body>
<p style="color: #927; font-size: 100px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
- Internal CSS Style
Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di
letakkan satu le dengan le html atau le php. syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada HTML.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Mukti911</title>
<style type="text/css">
#isi{ color: #999; }
.wadah{ background: pink; padding: 5px; }
</style>
</head>
<body>
<div class="wadah"><p id="isi">Mukti911</a></p></div>
</body>
</html>
Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu le dengan le html.
syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 5px atau 5 pixel. css memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda pagar ” # “. saat di jalankan maka hasilnya sebagai berikut:
- External CSS Style
<link rel="stylesheet" type="text/css" href="nama + format file css kalian">Contohnya :
Index.html
<!DOCTYPE html>Style.css
<html>
<head>
<title>Tutorial Mukti911</title>
</head>
<body>
<div class="wadah"><h1 id="isi">Mukti911</a></h1></div>
</body>
</html>
.isi{ color: #999; }Hasilnya :
.wadah{ background: pink; padding: 5px; }
E. Kesimpulan
Jadi dapat dismpulkan CSS adalah sebuah bahasa pengayaan untuk membuat website lebih informatif .
F. Referensi
- www.tutorialspoint.com
- www.w3schools.com
- www.id.wikipedia.org
- www.duniailkom.com
- www.codepolitan.com
No comments:
Post a Comment