CSS

/belajar-coding/dasar

CSS adalah singkatan dari Cascading Style Sheet. CSS adalah kumpulan kode-kode yang bertujuan untuk mengatur gaya tampilan atau layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

header{
background:red;
font-weight:bold;
}
article{
text-align:center;
font-size:12px;
}

Kenapa harus menggunakan CSS

HTML dirancang untuk mendesain halaman web, namun hanya menampilkan konten saja. Sementara untuk memberikan warna, background, menentukan jarak dan tata letak kita membutuhkan CSS.

Seiring perkembangan teknologi, kita bisa memberikan efek yang menarik, tata letak dengan model grid, bahkan bisa membuat layout seperti table tanpa elemen <table>.

Cara Penggunaan CSS

Ada beberapa cara yang bisa kita gunakan untuk menerapkan CSS pada HTML.

1. External CSS

Metode ini yang paling umum digunakan saat ini, karena kita bisa menulis file CSS dengan ektensi .css secara terpisah dengan file HTML.

<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">

Bahkan kita bisa juga menggunakan File CSS dari website lain, misal kita akan menggunakan file CSS Framework Bootstrap

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />

2. Internal CSS

Kita juga bisa menuliskan kode CSS dalam file yang sama dengan file HTML kita di dalam elemen <style></style>

 <!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Judul Artikel</h1>
<p>Isi kontent atau artikel yang panjang.</p>

</body>
</html> 

3. Inline CSS

Inline CSS memungkinkan kita menuliskan style di dalam element HTML dengan menggunakan atribute style

Dalam beberapa kasus, inline style sering kali digunakan, dan sangat bermanfaat ketika kita menggunakan kode CSS dinamis menggunakan javascript.

<div class="content" style="font-weight:bold;">
Disini isi kontent nya
</div>

Pelajaran Terkait CSS

Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

Berikan Komentar
Email anda tidak akan ditampilkan. Field yang wajib diisi ditandai dengan *
*