Newpedia CSS Learn

Pendahuluan

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk menggaya dan mendesain elemen-elemen HTML di sebuah halaman web. CSS memungkinkan Anda untuk mengontrol tampilan dan layout dari halaman web, seperti warna, font, ukuran, dan tata letak elemen.

Di artikel ini, kita akan mempelajari berbagai konsep dasar dan lanjutan CSS yang akan membantu Anda menciptakan desain web yang menarik dan responsif.

Apa Itu CSS?

CSS adalah bahasa yang digunakan untuk mengatur gaya (style) elemen-elemen HTML. Tanpa CSS, sebuah halaman web akan terlihat seperti teks biasa tanpa desain. CSS memungkinkan kita untuk memberikan warna, font, jarak, posisi, dan banyak elemen desain lainnya.

CSS memungkinkan pemisahan antara struktur (HTML) dan tampilan (styling). Ini memudahkan pemeliharaan dan pengembangan situs web yang lebih besar.

        <style>
            body {
                background-color: #f4f4f4;
            }
            h1 {
                color: #333;
                text-align: center;
            }
        </style>

Menulis CSS

Ada tiga cara utama untuk menulis CSS: inline, internal, dan eksternal.

1. Inline CSS

CSS inline ditulis langsung pada elemen HTML menggunakan atribut style.

        <h1 style="color: blue; text-align: center;">Judul Halaman</h1>

2. Internal CSS

CSS internal ditulis di dalam tag <style> di bagian <head> HTML.

        <style>
            body {
                font-family: Arial, sans-serif;
            }
        </style>

3. External CSS

CSS eksternal ditulis dalam file terpisah dengan ekstensi .css. CSS ini kemudian dihubungkan dengan halaman HTML menggunakan tag <link>.

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

External CSS lebih dianjurkan karena membuat kode HTML lebih bersih dan memungkinkan pemeliharaan yang lebih mudah.

Selektor CSS

Selektor CSS digunakan untuk memilih elemen HTML yang akan diberikan gaya. Ada beberapa jenis selektor CSS:

1. Selektor Elemen (Type Selector)

        h1 {
            color: blue;
        }

Selektor ini mengubah gaya semua elemen <h1> di halaman.

2. Selektor Kelas (Class Selector)

        .judul {
            font-size: 24px;
            color: red;
        }

Selektor kelas digunakan dengan tanda titik .. Kelas dapat diterapkan pada banyak elemen HTML.

3. Selektor ID (ID Selector)

        #judulUtama {
            font-weight: bold;
        }

Selektor ID digunakan dengan tanda pagar # dan hanya dapat diterapkan pada satu elemen di halaman.

4. Selektor Atribut

        a[href="https://newpedia.github.io"] {
            color: green;
        }

Selektor atribut digunakan untuk memilih elemen berdasarkan nilai atribut tertentu.

Properti CSS

CSS memiliki berbagai properti yang dapat digunakan untuk mengatur berbagai aspek elemen HTML, seperti warna, font, margin, padding, dan banyak lainnya.

1. Warna dan Latar Belakang

        body {
            background-color: #f0f0f0;
            color: #333;
        }

2. Font

        p {
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
        }

3. Margin dan Padding

        div {
            margin: 20px;
            padding: 10px;
        }

Margin mengatur jarak di luar elemen, sementara padding mengatur jarak di dalam elemen.

4. Border

        img {
            border: 2px solid black;
        }

Properti border digunakan untuk memberikan garis tepi pada elemen.

Layout dan Posisi

CSS memungkinkan Anda untuk mengatur layout halaman web dan posisi elemen dengan berbagai teknik, seperti menggunakan display, position, dan float.

1. Display

        div {
            display: block;
        }

Properti display mengatur bagaimana elemen ditampilkan di halaman, apakah sebagai elemen blok (block), inline, atau elemen fleksibel (flex).

2. Positioning

        div {
            position: absolute;
            top: 50px;
            left: 100px;
        }

Properti position digunakan untuk menentukan bagaimana elemen diposisikan dalam halaman, apakah relatif terhadap elemen lain atau tetap pada posisi tertentu.

3. Flexbox

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

Flexbox adalah metode layout CSS yang memungkinkan elemen-elemen dalam kontainer untuk diatur secara fleksibel dan responsif.

Desain Responsif dengan CSS

Desain responsif memungkinkan halaman web menyesuaikan tampilannya agar sesuai dengan berbagai ukuran layar, seperti desktop, tablet, dan ponsel. CSS Media Queries adalah alat utama untuk mencapainya.

        @media (max-width: 768px) {
            body {
                background-color: #e0e0e0;
            }
            .container {
                flex-direction: column;
            }
        }

Media Queries digunakan untuk menerapkan gaya berbeda berdasarkan ukuran layar atau perangkat.

Kesimpulan

CSS adalah alat yang sangat kuat untuk mendesain halaman web. Dengan menguasai berbagai konsep seperti selektor, properti, layout, dan desain responsif, Anda dapat membuat situs web yang menarik dan fungsional.

Langkah berikutnya adalah memperdalam penggunaan CSS dengan mempelajari teknik-teknik lanjutan seperti animasi, transisi, dan penggunaan framework CSS seperti Bootstrap.

Belajar CSS Lengkap di Newpedia