DaunKoder
CSS

Belajar CSS: Dasar CSS Untuk Pemula

CSS merupakan bahasa inti yang harus dipahami oleh developer web. Dengan CSS kita dapat membuat web terlihat lebih rapi dan menarik.

Apa Itu CSS?

CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk menata teks, tata-letak dan warna pada file HTML maupun SVG. CSS dapat disimpan di file .css dan disipkan pada HTML.

Deklarasi, Blok Deklarasi dan Selektor

Deklarasi merupakan properti dan nilai yang akan diberikan kepada elemen. Deklarasi terdiri dari Properti dan Nilai. Properti dan nilai dipisahkan oleh tanda titik dua (:). Deklrasi diakhiri oleh titik koma (;). Deklarasi ditulis sebagai berikut

Properti

Blok Deklarasi merupakan kumpulan dari deklarasi CSS. Blok diawali dengan { dan diakhiri dengan }. Contohnya sebagai berikut:

{
    background-color: red;
    color: white;
}

Selektor merupakan kata kunci yang digunakan untuk memilih elemen. Contoh p akan memilih elemen <p>. Setelah selektor harus terdapat blok deklarasi. Contoh:

p {
    background-color: red;
    color: white; 
}

Komentar CSS

Komentar merupakan kode yang akan diabaikan oleh Browser. Komentar berguna untuk memberi penjelasan suatu kode. Komentar diawali oleh /* dan diakhiri */. Contoh

/* Ini sebuah komentar */

Penulisan CSS

Terdapat tiga cara untuk menulis CSS yaitu

Inline Style

Cara ini menulis CSS langsung pada elemen. Caranya dengan mengisi atribut style pada elemen dengan kumpulan deklarasi. Contoh:

<p style="background-color: red; color: white;">Tulisan putih pada merah</p>

Menjadi:

Inline Style

Internal Style

Cara ini menulis CSS pada elemen <style>. Biasanya elemen ini ditaruh pada elemen <head>. Contoh:

<head>
    <style>
    p {
        background-color: red; 
        color: white; 
    }
    </style>
</head>
<body>
    <p>Tulisan putih pada merah</p>
</body>

Menjadi:

Internal Style

External Style

Cara ini menulis CSS pada file .css lalu mengimpor CSS ke HTML. Cara mengimpor file CSS dengan membuat elemen <link rel="stylesheet"> dengan mengisi atribut href dengan URL CSS. Contoh

style.css

p {
   background-color: red; 
   color: white; 
}

File HTML

<head>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <p>Tulisan putih pada merah</p>
</body>

Menjadi:

External Style

Penjelasan Contoh

Dari contoh-contoh diatas kita menggunakan properti background-color dan color. background-color mengatur warna latar belakang elemen. Sedangkan color mengatur warna tulisan elemen. Elemen tersebut harus diisi dengan nama warna HTML atau warna Hex.

Menata Web Sederhana

Kita dapat menata sebuah web dengan CSS. Contoh:

<head>
    <style>
        body {
            background-color: black;
            color: white;
        }

        h1, h2 {
            color: yellow;
        }
    </style>
</head>
</body>
    <h1>Web Sederhana</h1>
    <p>Ini adalah sebuah web sederhana.</p>

    <h2>Heading 2</h2>
    <p style="color: red;">Paragraf ini akan berwarna merah</p>

    <h2>Heading 2</h2>
    <p>Paragraf ini akan berwarna putih</p>
</body>

Menjadi:

Contoh

Kesimpulan

CSS itu mudahkan!. Banyak sekali yang kalian dapat lakukan dengan CSS. Mulai dari mengatur warna samapi mengatur tata letak. Kalian harus terus belajar CSS agar jadi Web Developer yang jago.