Bagi pengembang web profesional tentu tidak asing dengan apa itu CSS. Namun bagi pemula tentunya masih asing mendengar nama CSS.
Nama lengkap bahasa Inggris CSS adalah Cascading Style Sheets. Juga dikenal sebagai String Style Lists, Cascading Style Sheets, Concatenating Style Sheets dan Hierarchical Style Sheets. Ini adalah bahasa komputer yang digunakan untuk menambahkan gaya ke dokumen terstruktur.
Apa Itu CSS?
Cascading Style Sheets (Bahasa Inggris) singkatan: CSS juga dikenal sebagai String Style List, Cascading Style Sheet, Cascading Style Sheet, Hierarchical Style Sheet adalah style sheet yang digunakan untuk dokumen terstruktur seperti dokumen HTML atau dokumen XML.
Ini merupakan bahasa komputer untuk menambahkan gaya seperti font, spasi dan warna, dan lain-lain. Seperti yang didefinisikan dan dikelola oleh W3C. CSS dibagi menjadi beberapa tingkatan: CSS1 sekarang tidak digunakan lagi, CSS2.1 adalah standar yang direkomendasikan dan CSS3 dibagi menjadi modul-modul kecil dan sedang distandarisasi.
CSS3 sekarang didukung oleh sebagian besar browser modern, sedangkan versi CSS4 berikutnya masih dalam pengembangan.
CSS terutama digunakan untuk mendesain gaya halaman web dan mempercantik halaman web. CSS tidak hanya dapat memodifikasi halaman web secara statis, tetapi juga secara dinamis memformat berbagai elemen halaman web dengan berbagai bahasa skrip.
CSS dapat melakukan kontrol presisi tingkat piksel atas tata letak posisi elemen di halaman web. Mendukung hampir semua gaya ukuran font dan memiliki kemampuan untuk mengedit objek halaman web dan gaya model.
Apa Itu Fitur Bahasa CSS
CSS menyediakan deskripsi gaya untuk bahasa markup HTML yang mendefinisikan bagaimana elemen di dalamnya ditampilkan. CSS merupakan terobosan dalam bidang desain web. Ini dapat digunakan untuk memodifikasi gaya kecil untuk memperbarui semua elemen halaman yang terkait dengannya.
Apa Saja Ciri- Ciri CSS
1. Memiliki Gaya Atau Style Yang Kaya
CSS menyediakan tampilan gaya dokumen yang kaya dan kemampuan untuk mengatur properti teks dan latar belakang. Memungkinkan pembuatan batas untuk elemen apa pun itu dalam CSS.
Serta jarak antara batas elemen dan elemen lainnya dan jarak antara batas elemen dan konten elemen. Memungkinkan teks akan diubah sesuka hati Kapitalisasi, pemangkasan, dan efek halaman lainnya.
2. Mudah Digunakan Dan Dimodifikasi
CSS dapat mendefinisikan gaya dalam atribut gaya elemen HTML atau di bagian header dokumen HTML. Atau mendeklarasikan gaya dalam file CSS khusus untuk referensi oleh halaman HTML. Singkatnya, lembar gaya CSS dapat menyimpan semua deklarasi gaya secara terpadu untuk pengelolaan terpadu.
Selain itu, elemen dengan gaya yang sama dapat diklasifikasikan dan ditentukan menggunakan gaya yang sama. Atau gaya dapat diterapkan ke semua tag HTML dengan nama yang sama atau gaya CSS dapat ditetapkan ke elemen halaman.
Jika kita ingin mengubah gaya, kita hanya perlu menemukan deklarasi gaya yang sesuai dalam daftar gaya untuk dimodifikasi.
3. Aplikasi Multi-Halaman
Halaman gaya CSS dapat disimpan dalam file CSS terpisah. Sehingga kita dapat menggunakan lembar gaya CSS yang sama di beberapa halaman. Secara teori, lembar gaya CSS bukan milik file halaman mana pun dan dapat direferensikan ke file halaman mana pun. Dengan cara ini, gaya beberapa halaman dapat disatukan.
3. Cascade
Sederhananya, cascading adalah menyetel gaya yang sama beberapa kali pada sebuah elemen yang akan menggunakan nilai atribut set terakhir. Misalnya, jika kumpulan lembar gaya CSS yang sama digunakan untuk beberapa halaman di sebuah situs dan beberapa elemen di beberapa halaman ingin menggunakan gaya lain.
Lembar gaya terpisah dapat ditentukan untuk gaya ini dan diterapkan ke halaman. Gaya yang ditentukan kemudian ini akan menggantikan pengaturan gaya sebelumnya. Dan apa itu yang Anda lihat di browser akan menjadi kumpulan gaya terakhir yang sebelumnya sudah di buat di CSS.
4. Kompresi Halaman
Di situs web yang menggunakan HTML untuk menentukan efek halaman, tabel dan elemen font dalam jumlah besar atau berulang sering diperlukan untuk membentuk gaya teks dengan berbagai spesifikasi.
Konsekuensinya adalah sejumlah besar tag HTML akan dihasilkan. Sehingga meningkatkan ukuran file halaman. Menempatkan deklarasi gaya dalam lembar gaya CSS saja dapat sangat mengurangi ukuran halaman.
Sehingga waktu yang digunakan saat memuat halaman juga akan sangat berkurang. Selain itu, penggunaan kembali lembar gaya CSS sangat mengurangi ukuran halaman dan mengurangi waktu pengunduhan.
Apa Itu Jenis Css Yang Ada?
Gaya CSS terutama mencakup tiga jenis berikut:
1. Gaya Sebaris (Inline Style)
Bagian dalam struktur, yaitu gaya yang ditulis dalam tag ditulis di awal tag, dalam atribut style.
contoh:
<tag style="style attribute name 1: style attribute value 1; attribute name 2: attribute value 2;...">2. Gaya internal (Internal Style)
Itu ditulis di dalam halaman HTML, disimpan di tag Head dan gaya ditulis di tag style.
contoh:
<style>
style attribute name 1:
style attribute value 1;
attribute name 2:
attribute value 2
</style>3. Gaya eksternal (external style)
Ditulis dalam file css.
contoh:
.demo{
background: linear-gradient(to right,#009688,#d3d3d3);
}
.post-slide{
margin: 0 15px;
}
.post-slide .post-img{
overflow: hidden;
}
.post-slide .post-img img{
width: 100%;
height: auto;
transform: scale(1);
transition: all 1s ease-in-out 0s;
}
.post-slide:hover .post-img img{
transform: scale(1.08);
}
.post-slide .post-content{
background: #fff;
padding: 20px;
}
.post-slide .post-title{
font-size: 17px;
font-weight: 600;
margin-top: 0;
text-transform: capitalize;
}
.post-slide .post-title a{
display: inline-block;
color: #808080;
transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
color: #3d3030;
text-decoration: none;
}Itu dapat digunakan dengan memanggil ke halaman HTML menggunakan tag berikut ini.
<link type="text/css" rel="stylesheet" href="css/main.css" />Contoh penggunaan CSS bisa di baca di:
- Efek Transisi Menggunakan Properti CSS
- Membuat Animasi Gelombang (Wave Animation) Dengan CSS3
- Membuat Efek Timeline Vertikal Keren Dengan CSS3 Cocok Untuk Lending Page
- Animasi Menu Navigasi Keren Dengan CSS3 Keren Dan Responsive
- Membuat Carousel jQuery Dan CSS3 Dengan Layout List Card
Apa Itu Kode Css?
Seperti yang sudah dicontohkan diatas, Kode adalah file sumber yang ditulis oleh programmer dalam bahasa yang didukung oleh alat pengembangan. Dan merupakan seperangkat sistem aturan eksplisit yang mewakili informasi dalam bentuk diskrit dengan karakter, simbol atau simbol sinyal.
Kode css adalah beberapa komposisi bahasa Inggris yang bermakna. Termasuk atribut css bahasa Inggris dan komposisi nilai. kode Css adalah untuk mengontrol gaya tampilan halaman web.
Kode css terdiri dari nama css plus, “{“, plus atribut css, plus nilai atribut dan terakhir diakhiri dengan “}” untuk membentuk pemilih atribut css.
Kesimpulan
Dalam membuat sebuah web tentu harus memahami apa itu CSS. CSS sendiri memiliki banyak fungsi untuk membuat desain web yang indah.
Ada beberapa jenis CSS yang bisa kita gunakan. Dengan fungsi dan kegunaanya, kita dapat menggunakan sesuai dengan apa yang kita rencanakan.
Kode CSS mengacu pada kode dengan sintaks aturan kode CSS biasa, kode ini memiliki fungsi tata letak gaya HTML yang perlu kita pelajari adalah hubungan antara kode CSS dan kode HTML. Kode CSS dan kode HTML dikembangkan menjadi web HTML yang lengkap halaman
Akhirnya menggunakan HTML termasuk setidaknya file kode CSS dan file kode HTML menyematkan program untuk membuat situs web yang lengkap.
