Apa itu CSS
mengendalikan komponen web agar lebih terstruktur.
Apa Keuntungan Menggunakan CSS?
Hal yang paling terlihat menguntungkan adalah lebih mudah dalam mengontrol style banyak berkas.html berdasarkan id dan class-nya. Tidak perlu mendefinisikan satu per satu setiap bagian ataupun setiap berkas.
Mengapa Harus CSS?
Tidak menutup kemungkinan digunakan JavaScript atau yang semisalnya untuk mengatur sebuah tampilan wabsite. Namun, ada hal yang perlu diperhatikan yaitu mengenai ukuran script yang akan ditanam dalam sebuah berkas .html. Dengan CSS, untuk mengatur posisi bisa hanya diwakili oleh satu atau dua baris saja. Berbeda dengan jika menggunakan JavaScript. Selain itu, akan dijumpai permasalahan ketika diinginkan sebuah animasi. Biasanya digunakan jQuery yang berukuran 50kB hingga 100kB atau bahkan lebih dari itu hanya untuk menjalankan animasi sederhana saja. CSS juga bisa melakukan animasi hanya dengan beberapa baris saja yang tentunya itu tak ‘kan lebih dari 10kB.
CSS Itu Mudah Dipahami
Bahasa yang digunakan pada CSS sangat mudah untuk dipahami. Mengapa mudah dipahami? Karena dalam CSS menggunakan bahasa yang umum dan meminimalisasi penggunakan algoritma layaknya JavaScript.
Dukungan Terhadap CSS
Apakah CSS didukung oleh semua browser? Jawabnya, ya. Namun tak semua browser bisa menikmati layaknya browser lainnya. Browser yang paling banyak mendukung CSS adalah Firefox, Chrome, dan Safari. Akhir-akhir ini hampir semua website di dunia menggunakan CSS untuk mengatur tampilannya, baik itu dalam jumlah sedikit maupun banyak.
Cara Untuk Menyisipkan CSS Pada HTML
1. External Style Sheet
Sebuah external style sheet adalah file (.css) dimana berisi gaya CSS yang disimpan terpisah dari halaman website. Beberapa halaman dapat dihubungkan ke file css yang sama dan setiap perubahan yang dilakukan dalam external style sheet ini akan berdampak pada semua halaman yang memiliki tautan ke file css tersebut. Untuk cara berikut sangat ideal apabila diterapkan pada banyak halaman website. Sehingga mempersingkat waktu apabila ingin merubah tampilan tanpa harus membuka keseluruhan file satu-persatu. Setiap halaman harus dihubungkan dengan file CSS menggunakan tag <link>.
Contoh :
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
File tidak berisi tag html, dan style sheet harus disimpan dalam format .css. Adapun contohnya adalah sebagai berikut :
Contoh :
style.css
a {background-color:green;}
table{background-color:blue;}
2. Internal / Embedded Style Sheet
Gaya CSS Internal Style Sheet bisa diterapkan untuk halaman web dengan menggunakan elemen style. Deklarasi dari gaya CSS yang diinginkan bisa dengan menempatkan di antara tag pembuka <style> dan tag penutup </style>.
Contoh :
<style type="text/css">
h2 { color:blue;}
a {background-color:green;}
table{background-color:blue;}
</style>
</head>
Tag <style> ditempatkan di dalam elemen head. Atribut type menentukan bahasa yang digunakan untuk pendefinisian gaya CSS tersebut. CSS adalah bahasa gaya yang digunakan secara luas / umum dan ditandai dengan nilai text/css.
Namun, tag <style> memiliki kelemahan, yaitu set gaya tidak bisa digunakan untuk seluruh situs website. Karena harus mengulangi definisi gaya dalam elemen style pada bagian atas setiap halaman website yang dibuat.
3. Inline Style
Metode paling sederhana untuk menambahkan gaya CSS di halaman web anda adalah dengan menggunakan gaya inline. Untuk menggunakan style ini, dapat diterapkan pada elemen HTML melalui atribut style. Berikut contoh penggunaannya :
Contoh :
Gaya inline tidak memiliki selector, deklarasi gaya diterapkan langsung pada parent element - yaitu tag <p>. Gaya inline memiliki kelemahan, yaitu tidak dapat digunakan kembali apabila dibutuhkan kembali. Misalkan jika ingin menerapkan gaya diatas untuk elemen p lainnya, maka harus diketikkan ulang dalam atribut elemen gaya tersebut. Selain itu, gaya inline yang terletak pada halaman HTMl akan membuat kode sulit dibaca dan memeliharanya.
Aturan Penulisan Pada CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
property : atribut yang akan diubah
Cara penulisan :
font-size : small;
Cara penulisan yang salah :
font-family : “sans-serif”;font-size : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
h1, h2 {color : green};h3, h4 & h5 {color : red};
Cara menuliskan komentar :
menggunakan tanda : <!-- ….. →
Cara Mempermudah Pengaturan CSS
Style pada CSS memiliki struktur seperti berikut :
Selector digunakan untuk menentukan pada elemen apa style tersebut digunakan. Selector dapat berupa nama id elemen atau nama class. Bagian deklarasi menerangkan style yang akan dibuat. Bagian ini terdiri dari properti dan value. Properti dapat diisi dengan jenis warna, ukuran, perataan margin, dll. Sedangkan pada value diisi dengan nilai dari propertinya, misalnya red untuk warna. Setiap akhir penulisan properti dan value harus diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antara satu properti dengan properti lain. Apabila tanda titik koma (semicolon) lupa disertakan, maka style tersebut tidak akan dijalankan oleh browser.
Sering sekali menjadi pertanyaan ketika pertama mempelajari CSS adalah, bagaimana jika akan membuat style untuk beberapa elemen yang berbeda namun stylenya sama? Misalkan saja disini akan membuat style untuk elemen h1, h2 dan h3 namun memiliki style yang sama. Berikut contohnya :
h1, h2, h3 {
properti : value;
}
Boleh jadi banyak selektor (tag, id, dan class) yang akan diatur. Tentunya perlu aturan yang bisa dipahami dan mempermudah pembacaan, apalagi saat dikerjakan lebih dari satu orang. Berikut adalah cara menuliskan CSS ala WordPress, dan terbukti sangat mudah pembacaan.
selector1 {
property: value;
property: value;
}
selector2,
selector3 {
property: value;selector2,
selector3 {
}
Mengapa perlu dilakukan hal seperti ini? Karena biasanya setiap selector mempunyai banyak sekali property dan value. Berikut adalah contohnya.
#name,
#nickname,
#activities,
#learn,
#projects,
#contacts {
background: url('img/biru.png');
width: 80px;
text-align: center;
margin: 5px;
line-height: 80px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
}
#name,
#contacts {
margin-left: 90px;#name,
#contacts {
}
Variasi Menuliskan Warna
Banyak kita jumpai dalam CSS penulisan warna yang beragam, misalkan untuk menuliskan warna merah, kita dapat menuliskannya dengan 5 cara, sbb:
1. color: red;
2. color: #ff0000;
3. color: #f00;
4. color: rgb(255,0,0);
5. color: rgba(255,0,0,1);
6. color:hsl(100,85%,50%);
7. color:hsla(100,85%,50%,0.6);
Penulisan warna yang beragam tersebut tergantung kebutuhan. Mana yang dianggap lebih memudahkan, itulah yang dipakai.
Matrix Value pada CSS
Pada CSS, penulisan sangat dimudahkan dengan dikenalnya matrix value. Berikut adalah macam-macam penulisan margin setiap sisinya 10px.
1. margin: 10px;
2. margin: 10px 10px 10px 10px;
3. margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
Manakah yang lebih enak digunakan? Jawabannya adalah tergantung kebutuhan. Jika yang diperlukan margin-left saja, maka cukuplah dengan menulis margin-left karena dengan menggunakan margin saja tidak bisa, menggunakan margin dengan matrix value juga tidak bisa.
Tidak hanya pada margin saja, matrix value juga bisa ditemukan pada property lainnya, misalkan: background, box-shadow, padding, transition, dan sebagainya.
Detail pada CSS
Fungsi dari CSS ini memang digunakan untuk melakukan detail pada elemen-elemen website yang dibangun. Detail yang biasanya diperhatikan adalah hover dan focus, terutama pada link. Berikut adalah format penulisan hover, berlaku juga pada focus dan visited.
a:hover {
color: red;
text-decoration: none;
}
Bisa dicoba dan dibuktikan ganti penulisan a:hover dengan a: hover (dengan spasi setelah ‘titik dua’). Maka hasilnya adalah kode CSS tersebut dianggap tidak valid.
Website responsif adalah website yang memiliki beberapa penampilan tergantung seberapa lebar layar dia diakses. Untuk mencobanya, berikut adalah contoh website responsif:
1. sitia-its.org
2. css-tricks.com
3. facebook.com
4. dan banyak lagi lainnya
Untuk membuat website menjadi responsif, tambahkan kode berikut pada berkas CSS yang dibuat.
@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
Bisa dicoba dan dibuktikan ganti penulisan a:hover dengan a: hover (dengan spasi setelah ‘titik dua’). Maka hasilnya adalah kode CSS tersebut dianggap tidak valid.
Website Responsif dengan CSS
Website responsif adalah website yang memiliki beberapa penampilan tergantung seberapa lebar layar dia diakses. Untuk mencobanya, berikut adalah contoh website responsif:
1. sitia-its.org
2. css-tricks.com
3. facebook.com
4. dan banyak lagi lainnya
Untuk membuat website menjadi responsif, tambahkan kode berikut pada berkas CSS yang dibuat.
@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
/* isi dengan selector */
}
Ubah max-width sesuai lebar maksimal yang dibutuhkan sebuah layar. Fungsi dari responsif ini agar pengunjung dari berbagai lebar layar bisa nyaman mengunjungi website buatan kita.
Membuat Layout dengan CSS
Dalam membuat layout halaman web tidak membutuhkan tabel apabila memanfaatkan CSS. Kelebihan CSS dalam layout wes dibandingkan penggunaan tabel adalah fleksibilitas dan jga leih meminimalisasi jumlah ukuran byte file yang dihasilkan. Apabila menggunakan tabel untuk mendesain layout web, maka semakin banyak sel yang dibuat akan semakin besar pula ukuran byte file, dan mengakibatkan proses loading web pun membutuhkan waktu yang sedikit lebih lama dibandingkan menggunakan CSS saja.
Hal terpenting dalam pembuatan layout dengan menggunakan CSS adalah membagi elemen halaman menjadi beberapa divisi-divisi tertentu sesuai kebutuhan. Untuk yang pertama, misalkan saja untuk membuat bagian header. Berikut style untuk header yang akan dibuat :
#header {
border : 1px solid #000;
background-color : #999;
}
Dengan menggunakan style diatas, header yang akan ditampilkan terlihat seperti berikut :
Properti padding menyatakan jarak antara tepi sel dengan elemen yang berada di dalamnya. Untuk contoh diatas hanya sebagai contoh saja, dan bisa digunakan pada bagian lainnya seperti footer, main, sidebar, dll.
Apabila digunakan untuk layout sidebar, perlu ditambahkan kondisi tertentu supaya bisa terlihat dengan rapi. Sebagai contoh disini, menu navigasi atau sidebar terletak di sebelah kanan dan content berada di sebelah kiri.
#content {
border : 1px solid #000;
}
#sidebar {
float : left;
border : 1px solid #00f;
background-color : blue;
color : #fff;
}
Dengan menggunakan style diatas content akan terlihat seperti berikut : Efek penggunaan float : left ; dapat dilihat pada posisi sidebar gambar diatas dimana posisinya mengarah ke kiri.
Penutup
Itulah beberapa materi tentang css yang bisa saya sampaikan. Semoga kalian mengerti dengan apa yang saya jelaskan. Sebenarnya masih ada banyak materi lagi mungkin saya akan membahasnya nanti, itu juga kalo saya lagi gabut. Untuk sekarang saya hanya bisa membahgikan materi sederhana yang mungkin semua orang pasti sudah tahu. Dikarenakan sudah ada diberbagaikan sumber website untuk belajar css. Walaupun begitu saya ingin membagikan anggap aja untuk jaga jaga takutnya saya lupa lgai tentang materi css.
