CSS Dasar

Last updated 4 years ago

Was this helpful?

CSS Dasar

CSS merupakan singkatan dari Cascading Sytle Sheet. CSS digunakan untuk memberikan gaya pada halaman web yang tidak bisa dilakukan oleh HTML.

Ada 3 cara yang dapat digunakan untuk memberikan gaya pada halaman. 1. Inline Style Sheet, menulis kode CSS langsung ke dalam tag HTML. 2. Internal Style Sheet, menulis kode CSS pada area <head> ... </head> pada script HTML. 3. External Style Sheet, menulis kode CSS di file tersendiri, disimpan dengan extensi file .css kemudian dihubungkan dengan file HTML. Cara ketiga ini adalah cara yang paling ideal digunakan.

Penulisan kode CSS terdiri dari selector dan blok declaration. Selector digunakan untuk menentukan elemen HTML yang ingin diberi style. Blok Declaration terdiri dari satu atau lebih declaration. Setiap declaration terdiri dari property dan value CSS, dan diakhiri dengan tanda titik koma (;). Blok declaration diawali dengan tanda kurung kurawal buka ( { ) dan diakhiri dengan tanda kurung kurawal tutup ( } ).

Inline Style Sheet

Inline style sheet yaitu menuliskan kode CSS langsung ke dalam tag HTML yang diinginkan. Sebaiknya cara ini digunakan untuk memformat suatu elemen satu kali saja. Penulisan CSS dengan cara ini dimulai dengan style: “property : value”.

Contoh penggunaan Inline Style Sheet:

css-inline.html


<!DOCTYPE html>
<html>
<head>
    <title>CSS Inline</title>
</head>
<body>
    <p>
        Contoh penggunaan CSS Inline
    </p>
    <p style="color: red">
        Paragraf berwarna merah 
    </p>
</body>
</html>

Kode di atas memberi warna merah pada paragraf ( tag <p> ).

Internal Style Sheet

Internal style sheet yaitu menempelkan kode CSS diantara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh penggunaan Internal Style Sheet:

css-internal.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Internal</title>
    <style>
        h4 {
            color: red;
            font-style: italic;
        }
        p {
            color: blue;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h4>Contoh penggunaan CSS Internal</h4>
    <p>Paragraf berwarna biru</p>
    <p>Paragraf ini juga berwarna biru</p>
</body>
</html>

Kode di atas memformat tag <h4> dan <p>. Semua elemen yang menggunakan tag <h4> dan <p> akan mengikuti kode CSS h4 dan p. Penulisan dengan cara ini lebih praktis dibandingkan Inline Style Sheet, karena kode CSS dapat digunakan berulang kali.

External Style Sheet

Kode CSS external ditulis dalam satu file terpisah yang disimpan dengan ekstensi file .css. Halaman web yang memerlukan kode CSS ini, dapat memanggil file .css ini. Cara ini sangat direkomendasikan untuk digunakan, karena file .css dapat digunakan untuk semua halaman web yang memerlukan.

Contoh penggunaan External Style Sheet:

1 . Tulis kode di bawah ini dan simpan dengan nama file : style.css

style.css

h4 {
    color: red;
    font-style: italic;
}

p {
    color: blue;
    background-color: #f0f0f0;
}

2 . Kemudian tulis kode di bawah ini dan simpan dengan nama file : css-external.html

css-external.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS External</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h4>Contoh penggunaan CSS External</h4>
    <p>Paragraf berwarna biru</p>
    <p>Paragraf ini juga berwarna biru</p>
</body>
</html>

Hasil dari penulisan kode CSS dan HTML di atas

Selector

Digunakan untuk menyeleksi atau memilih elemen HTML

Element Selector

Element selector digunakan untuk menentukan elemen HTML yang ingin diberi style berdasarkan nama elemen.

style.css

p {
    color: blue;
    text-align: center;
}

element-selector.html

<!DOCTYPE html>
<html>
<head>
    <title>Element selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Tag p tengah dan berwarna biru</p>
    <p>Tag p tengah dan berwarna biru juga</p>
</body>
</html>

Hasil dari penulisan kode di atas

Class Selector

Class selector digunakan untuk menentukan elemen HTML yang ingin diberi style berdasarkan atribut class dari elemen HTML tertentu. Cara penulisan Class selector diawali dengan tanda titik (.), diikuti dengan nama class.

.nama-class { property : value }

Untuk menempelkan class ke dalam tag HTML yaitu diawali dengan tagHTML, diikuti tanda titik (.) dan nama class.

tagHTML.nama-class { property : value }

Contoh penulisan class selector:

sytle.css

.tengah {text-align: center;}
p.tengah {color : red;}
h1.kanan {text-align: right; color: blue;}

class-selector.html

<!DOCTYPE html>
<html>
<head>
    <title>Class selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tengah">
        <p>Tag p tengah</p>
        <h1>Tag H1 tengah</h1>
    </div>
    <p class="tengah">Tag p akan berwarna merah dan tengah</p>
    <p class="tengah">Tag p akan berwarna merah dan tengah juga</p>
    <h1 class="kanan">Tag H1 kanan akan berwarna biru</h1>
</body>
</html>

Hasil dari penulisan kode di atas

Tag p tengah dan Tag H1 tengah berada di dalam tag <div> yang menggunakan style .tengah. Tag p akan berwarna merah dan tengah menggunakan style .tengah dan p.tengah. Tag H1 kanan akan berwarna biru menggunakan style h1.kanan.

Id Selector

Id selector digunakan untuk menentukan elemen HTML yang ingin diberi style berdasarkan atribut id dari elemen HTML tertentu. Cara penulisan Id selector diawali dengan tanda titik (#), diikuti dengan nama id. Berbeda dengan class selector yang penggunaannya untuk beberapa elemen, id selector digunakan untuk satu elemen saja.

#nama-id { property : value }

Untuk menempelkan id ke dalam tag HTML yaitu diawali dengan tagHTML, diikuti tanda titik (#) dan nama class.

tagHTML#nama-id { property : value }

Contoh penulisan id selector:

style.css

#tengah {text-align: center;}
p#kanan {text-align: right; color: red; }

id-selector.html

<!DOCTYPE html>
<html>
<head>
    <title>Id selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="tengah">Tag div tengah</div>
    <p id="kanan">Tag p kanan dan berwarna merah</p>
</body>
</html>

Hasil dari penulisan kode di atas

Grouping Selector

Grouping selector digunakan untuk memberikan style yang sama pada beberapa elemen HTML. Grouping selector dapat mengurangi atau menghemat penulisan kode CSS.

Berikut contoh penulisan kode grouping selector pada elemen h1, h2 dan p:

style.css

h1, h2, p {
    text-align: center;
    color: red;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

grouping-selector.html

<!DOCTYPE html>
<html>
<head>
    <title>Grouping selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Tag h1</h1>
    <h2>Tag h2</h2>
    <p>Tag p</p>
</body>
</html>

Hasil dari penulisan kode di atas

Nesting

Nesting merupakan penulisan selector di dalam selector. Penulisan kode CSS dengan cara ini membuat struktur dokumen HTML lebih baik.

Berikut contoh penulisan kode CSS nesting:

style.css

#top { background-color: #f0f0f0; padding: 5px; }
#top h1 { color: blue; background-color: white; border: 1px solid black; text-
align: center; }
#top p { color: red; }

nesting-selector.html

<!DOCTYPE html>
<html>
<head>
    <title>Nesting Selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
        <h1>Judul</h1>
        <p>Deskripsi</p>
    </div>
    
    <h1>Judul di luar block id="top"</h1>
    <p>Deskripsi di luar block id="top"</p>
</body>
</html>

Hasil dari penulisan kode di atas

Judul di luar block id="top" dan Deskripsi di luar block id="top" dikarenakan berada di luar tag <div id="top"> maka tidak mendapat style #top

PreviousPengenalan CSS NextCSS Lanjutan

Last updated 4 years ago

Was this helpful?