Dito PriwantoPemahaman mengenai penulisan script CSS sangat penting dalam proses pembuatan website yang profesional, nyaman, dan sesuai kaidah SEO pada search engine. Pada artikel sebelumnya, kita telah membahas mengenai konsep dasar CSS, termasuk atribut dan nilai-nilainya. Dalam artikel ini, kita akan belajar CSS tentang cara menulis script CSS pada website agar tampilannya lebih menarik.
Selain tutorial belajar CSS, sebelumnya kami juga telah membahas tentang belajar HTML yang kami bagi dalam beberapa sesi. Dalam artikel ini, kami akan melanjutkan untuk cara mengkombiasikan antara script HTML dan CSS pada website. Simak informasi berikut ini.
Penulisan CSS di website
Secara umum, penulisan CSS dapat dikategorikan sesuai dengan kebutuhannya masing-masing. Berikut adalah beberapa jenis cara penulisan css yang perlu dipelajari :
- Internal CSS
- Inline CSS
- External CSS
Mari kita bahas satu persatu.
Penulisan Internal CSS
Penulisan Internal CSS adalah penulisan script css yang ditulis dalam sebuah tag style di dalam script html pada file yang sama. Format penulisannya yaitu :
<style>
selector {
property1:value;
property2:value;
}
</style>Anda dapat menyesuaikan style CSS sesuai dengan selector yang akan anda gunakan, selector dapat berupa elemen tag html seperti h1, p, body, dll, dan juga dapat berupa atribut class pada elemen html.
Berikut adalah contoh lengkap penulisan Internal CSS.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<style type="text/css">
h2{
color:blue;
font-family: sans;
}
.contohclass{
color:red;
font-family: sans;
}
</style>
</head>
<body>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h3 class="contohclass">Belajar CSS selector dengan atribut class</h3>
</body>
</html>Kemudian, ketika ditampilkan melalui browser akan menghasilkan tampilan sebagai berikut:
Penulisan CSS internal digunakan untuk mengatur gaya seluruh elemen pada file HTML yang sama. Selain itu, setiap properti CSS dipisahkan dengan tanda titik koma (;).
Selector yang digunakan dapat berupa tag HTML atau menggunakan atribut seperti class, sehingga memudahkan penyesuaian CSS jika Anda memiliki lebih dari satu elemen. Hal ini karena CSS akan memeriksa selector pada elemen dan mengaplikasikan gaya sesuai dengan aturan yang ditetapkan. Sebagai contoh, dapat dilihat pada penulisan untuk tag h1, h2, p, dan sebagainya.
Namun, jika website Anda terdiri dari banyak file, Anda perlu membuat script CSS di setiap file HTML. Akibatnya, penulisan script HTML akan menjadi lebih banyak, yang tidak efektif dan merepotkan terutama saat melakukan pengembangan atau perawatan tampilan website.
Penulisan Inline CSS
Penulisan inline CSS adalah penulisan script CSS yang ditulis langsung ke dalam tag html dengan atribut style di file yang sama. Format penulisannya yaitu :
style="property1:value; property2:value"Penulisan di setiap properti di pisah dengan tanda titik koma (;) dan tidak seperti internal CSS yang menggunakan kurung kurawa {}. Berikut ini adalah salah satu contoh penulisan Inline CSS.
<h2 style="color:blue; font-family: sans;">Belajar CSS</h1>Berikut adalah contoh lengkap penulisan Inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
</head>
<body>
<h2 style="color:blue; font-family: sans;">Belajar CSS selector dengan tag h2</h2>
<h2 style="color:blue; font-family: sans;">Belajar CSS selector dengan tag h2</h2>
<h3 style="color:red; font-family: sans;">Belajar CSS selector dengan tag h3</h3>
</body>
</html>Berikut hasilnya jika ditampilkan melalui browser
Untuk hasil yang diperoleh, penulisan inline CSS serupa dengan penggunaan internal CSS, namun cara penulisannya berbeda. Penulisan inline CSS digunakan untuk satu elemen saja dan memiliki prioritas lebih tinggi dibandingkan dengan penulisan CSS internal dan eksternal.
Meskipun demikian, Anda akan mengalami kesulitan jika terdapat banyak elemen yang memerlukan penyesuaian, karena Anda perlu mengeditnya satu per satu. Oleh karena itu, sebaiknya penulisan inline CSS digunakan secara selektif.
Contoh penggunaan penulisan inline CSS dapat diterapkan untuk perubahan secara real-time dengan jQuery atau JavaScript, yang memungkinkan modifikasi elemen tag HTML secara langsung.
Penulisan External CSS
Penulisan External CSS adalah cara menulis script CSS yang disimpan pada file terpisah dari script HTML. Jika format ekstensi file HTML adalah .html (contoh: namafilenya.html), maka format ekstensi file yang digunakan untuk External CSS adalah .css (contoh: namafilenya.css).
Penulisan External CSS terbukti sangat efektif dalam pengembangan tampilan website. Kode script website akan lebih mudah dipahami, terstruktur, dan pengelolaannya menjadi lebih mudah saat ada perbaikan yang diperlukan.
Sebagai contoh, membuat file bernama style.css dengan script css sebagai berikut :
h2{
color:blue;
font-family: sans;
}
h3{
color:red;
font-family: sans;
}
.contohclass{
color:crimson;
font-family: sans;
}
p{
color:darkmagenta;
font-family: sans;
}Kemudian untuk pemanggilan file style.css dapat disesuaikan dengan kebutuhan. Berikut cara penulisannya.
External css di folder yang sama
Penulisan External css di folder yang sama, untuk menggunakan file css yang telah dibuat dapat menggunakan tag link pada file html.
berikut contoh scriptnya :
<link rel="stylesheet" type="text/css" href="style.css">Berikut adalah contoh lengkap penulisan kode External CSS di folder yang sama.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h3 >Belajar CSS selector dengan tag h3</h3>
<p> Belajar CSS selector dengan tag p</p>
</body>
</html>Berikut hasilnya jika ditampilkan melalui browser:
External css di folder yang berbeda
Apabila file css berada di dalam folder, maka penulisannya dapat disesuaikan dengan folder yang digunakan,
Sebagai contoh, jika file css berada di folder assets maka penulisan scriptnya sebagai berikut :
<link rel="stylesheet" type="text/css" href="assets/style.css">Berikut adalah contoh lengkap penulisan kode External CSS di folder yang berbeda.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h3 >Belajar CSS selector dengan tag h3</h3>
<p> Belajar CSS selector dengan tag p</p>
</body>
</html>Berikut hasilnya jika ditampilkan melalui browser:
External css di url lain
Penulisan external css pun dapat mengambil dari url atau website lain, hal ini biasa disebut dengan CDN (Content Delivery Network). Berikut contoh penulisan jika file css berada di url lain.
<link rel="stylesheet" href="https://domainanda.com/css/style.css" />Rubah url domainanda.com menggunakan url cdn milik Anda. Berikut adalah contoh lengkap penulisan kode External CSS di url lain.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<link rel="stylesheet" href="https://domainanda.com/css/style.css" />
</head>
<body>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h3 >Belajar CSS selector dengan tag h3</h3>
<p> Belajar CSS selector dengan tag p</p>
</body>
</html>External css dengan @import
Selain itu, external css dapat menggunakan @import untuk memanggil file css. Bisa melalui file html, maupun melalui file css. Berikut contoh penulisan script nya :
Penulisan script jika menggunakan file dengan html :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h2 >Belajar CSS selector dengan tag h2</h2>
<h3 >Belajar CSS selector dengan tag h3</h3>
<p> Belajar CSS selector dengan tag p</p>
</body>
</html>Penulisan script jika menggunakan file css di folder yang sama:
@import "style.css";Penulisan script jika menggunakan file css di url lain :
@import url("https://domainanda.com/css/style.css");Ubah domainanda.com dengan menggunakan URL website Anda sendiri. Ketika diakses melalui browser, tampilannya akan sama seperti menggunakan penulisan Inline CSS, Internal CSS, bahkan External CSS. Perbedaannya hanya terletak pada cara penulisan dan lokasi script CSS yang digunakan.
Penulisan CSS eksternal akan memudahkan Anda dalam mengembangkan tampilan website (front-end), terutama ketika Anda memiliki banyak file HTML. Dengan cara ini, Anda hanya perlu memanggil file CSS tanpa perlu membuat ulang script CSS tersebut.
Kesimpulan
Secara keseluruhan, cara penulisan CSS dapat bervariasi tergantung pada kebutuhan proyek dan pengembang website. Pilihan antara cara penulisan CSS di website akan tergantung pada proyek website, kebutuhan, fungsionalitas, dan preferensi pengembang website.
Dalam banyak kasus, penulisan External CSS dengan file terpisah adalah hal yang umum digunakan untuk menghasilkan kode CSS yang terorganisir, mudah dipelihara, dan dapat digunakan secara efisien dalam proyek pengembangan website.
