Konsep Dasar Pemrograman – CSS (Cascading Style Sheets)

RyukensDev

Admin

posted on 2 months ago — updated on 1 second ago

32
views

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web yang dibuat menggunakan HTML.

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web yang dibuat menggunakan HTML. CSS memungkinkan pengembang web untuk menentukan warna, font, layout, dan elemen desain lainnya secara terpisah dari struktur HTML. Dengan CSS, kita dapat meningkatkan estetika dan pengalaman pengguna pada halaman web.

Struktur Dasar CSS

CSS dapat ditulis dalam beberapa cara:

Inline CSS: CSS yang diterapkan langsung pada elemen HTML.
Internal CSS: CSS yang disertakan dalam tag <style> di dalam halaman HTML.
External CSS: CSS yang disimpan dalam file terpisah dan dihubungkan ke halaman HTML dengan tag <link>.

Contoh Inline CSS:

<p style="color: red;">Ini adalah paragraf dengan teks merah.</p>

Contoh Internal CSS:

<head>

<style>

p {

color: blue;

}

</style>

</head>

Contoh External CSS:

<head>

<link rel="stylesheet" href="style.css">

</head>

Sintaks Dasar CSS

CSS menggunakan aturan atau aturan gaya untuk mendefinisikan gaya elemen HTML. Sintaks CSS terdiri dari selector, property, dan value.

selector {

property: value;

}

Contoh:

h1 {

color: green;

font-size: 24px;

}

Selector: Menentukan elemen HTML yang akan diberi gaya (misalnya h1 untuk tag heading).
Property: Properti CSS yang ingin diterapkan pada elemen (misalnya color, font-size).
Value: Nilai properti yang diinginkan (misalnya green untuk warna atau 24px untuk ukuran font).

Beberapa Properti CSS yang Paling Umum Digunakan

Warna dan Latar Belakang

color: Menentukan warna teks elemen.
background-color: Menentukan warna latar belakang elemen.
background-image: Menentukan gambar latar belakang.

Contoh:

body {

color: white;

background-color: black;

}

Teks dan Font

font-family: Menentukan jenis font.
font-size: Menentukan ukuran font.
font-weight: Menentukan ketebalan teks.
text-align: Menentukan perataan teks (misalnya left, center, right).

Contoh:

h1 {

font-family: Arial, sans-serif;

font-size: 30px;

text-align: center;

}

Layout dan Penataan Elemen

margin: Menentukan jarak luar elemen (jarak dari elemen lain di sekitar).
padding: Menentukan ruang di dalam elemen (jarak dari konten elemen).
width dan height: Menentukan lebar dan tinggi elemen.
display: Menentukan bagaimana elemen ditampilkan (misalnya block, inline, flex).

Contoh:

.container {

width: 80%;

margin: 0 auto; /* Menyusun elemen di tengah */

padding: 20px;

}

Border dan Outline

border: Menentukan border di sekitar elemen.
border-radius: Menentukan sudut melengkung pada border elemen.
outline: Menentukan garis luar elemen.

Contoh:

.button {

border: 2px solid black;

border-radius: 5px;

padding: 10px;

}

Pentingnya Penggunaan CSS yang Efisien

CSS memiliki mekanisme yang disebut Cascading, yang memungkinkan beberapa aturan CSS untuk diterapkan pada elemen yang sama. Prioritas dan urutan aturan ini ditentukan oleh beberapa faktor, seperti spesifisitas selector dan urutan penulisan di dalam file CSS. Memahami cara kerja cascading akan membantu pengembang untuk menghindari konflik gaya dan menjaga konsistensi desain.

Pengenalan CSS Flexbox

Flexbox adalah metode layout di CSS yang memungkinkan elemen untuk disusun secara fleksibel dan responsif. Dengan Flexbox, kita dapat mengatur elemen dalam satu baris atau kolom dengan lebih mudah.

Contoh penggunaan Flexbox:

.container {

display: flex;

justify-content: space-between;

}

.item {

flex: 1;

}

display: flex;: Menentukan bahwa elemen dalam container akan disusun dengan Flexbox.
justify-content: Mengatur distribusi ruang antar elemen dalam container.
flex: Menentukan ukuran fleksibel dari elemen anak.

Responsiveness dengan CSS Media Queries

CSS juga memungkinkan kita untuk membuat desain responsif menggunakan media queries. Media queries memungkinkan desain menyesuaikan tampilannya berdasarkan ukuran layar perangkat.

Contoh:

@media screen and (max-width: 768px) {

body {

background-color: lightblue;

}

Media query ini akan mengubah warna latar belakang halaman menjadi lightblue jika layar perangkat lebih kecil dari 768px.

Kesimpulan

CSS adalah bahasa yang sangat penting untuk mendesain halaman web, memungkinkan kita untuk mengontrol bagaimana elemen-elemen HTML ditampilkan di layar. Dengan CSS, kita dapat mengatur warna, font, layout, dan elemen desain lainnya untuk membuat tampilan web lebih menarik dan responsif. Beberapa konsep dasar seperti selector, properties, margin, padding, dan penggunaan media queries sangat penting untuk menciptakan desain yang sesuai dengan berbagai ukuran layar.

Dengan memahami CSS, kita dapat membuat halaman web yang tidak hanya fungsional tetapi juga estetis dan user-friendly. Penggunaan teknik seperti Flexbox dan Grid Layout membuat pembuatan desain yang kompleks menjadi lebih mudah dan fleksibel.