A. Pendahuluan
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
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.
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, pa
dding 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.
Selector, Dalam css selector sangatlah penting sekali dimana ia diguanakan untuk menyatakan bagian mana dari markup yang berlaku untuk gaya dengan mencocokan tag dan atribut di markup itu sendiri. Selector mungkin berlaku untuk beberapa hal berikut:
- 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.
Kelas dan ID bersifat case-sensitive, dimulai dengan huruf, dan dapat menyertakan karakter alfanumerik dan garis bawah. Kelas dapat berlaku untuk sejumlah contoh elemen apa pun. ID hanya dapat diterapkan ke satu elemen.
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.
Cara Penggunaannya css dapat diakses / dibuat melalui beberapa cara :
-
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” />
- Inline CSS Style
<!DOCTYPE html>
<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>
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 :
- Internal CSS Style
<!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>
- External CSS Style
Teknik penulisan CSS External Style. Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan le css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada le css. le css dan html di hubungkan menggunakan
<link rel=”stylesheet” type=”t
ext/css” href=”nama + format file css kalian”>
Contohnya :
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Mukti911</title>
</head>
<body>
<div class=”wadah”><h1 id=”isi”>Mukti911</a></h1></div>
</body>
</html>
Style.css
.isi{ color: #999; }
.wadah{ background: pink; padding: 5px; }
Hasilnya :
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
Tinggalkan Balasan