1. Apa Itu CSS?

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mendeskripsikan tampilan atau presentasi dari dokumen markup seperti HTML. CSS merupakan stylesheet language yang memungkinkan kita mengatur warna, font, layout, dan berbagai aspek visual dari halaman web.

Dengan CSS, kita dapat memisahkan konten (HTML) dari presentasi (styling), sehingga kode lebih terorganisir dan mudah di-maintain. Satu file CSS dapat digunakan untuk banyak halaman HTML, membuat proses pengembangan lebih efisien.

💡 Mengapa CSS Penting?
CSS memungkinkan kita mengontrol tampilan seluruh website hanya dengan mengubah satu file, membuat website responsive, dan menciptakan desain yang menarik tanpa mengubah struktur HTML.

2. Tiga Cara Menggunakan CSS

Ada tiga metode untuk menerapkan CSS pada dokumen HTML. Masing-masing memiliki kelebihan dan kekurangan tersendiri.

Metode 1: Inline Style (Via Atribut Style)

Inline style adalah cara paling langsung untuk menerapkan CSS, yaitu dengan menambahkan atribut style langsung pada elemen HTML.

                
                    <p style="color: red;">
                        this content will be in red
                    </p>

Hasil

this content will be in red

⚠️ Catatan:
Inline style tidak disarankan untuk project besar karena sulit di-maintain dan tidak dapat di-reuse. Gunakan hanya untuk styling cepat atau override style tertentu.

Metode 2: Internal CSS (Via Tag Style)

Internal CSS ditempatkan di dalam tag <style> pada bagian <head> dokumen HTML.

                
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title></title>
                        <style>
                            p {
                                color: red;
                                font-size: 20pt;
                            }
                        </style>
                    </head>
                    <body>
                        <p>
                            this content will be in red and font-size is 20pt
                        </p>
                    </body>
                    </html>
                
            

Perhatikan bahwa kita memanggil nama tag, diikuti dengan kurung kurawal dan style di dalamnya. Setiap style harus diakhiri dengan titik koma (semicolon). Dengan metode ini, semua tag paragraph akan memiliki font merah dengan ukuran 20pt.

Metode 3: External CSS (Via File Terpisah)

External CSS adalah metode yang paling disarankan. CSS ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan ke HTML menggunakan tag <link>.

Keuntungan menggunakan external CSS:

Dapat menambahkan banyak style tanpa membuat HTML berantakan
Satu file CSS dapat digunakan untuk banyak halaman HTML
Lebih mudah di-maintain dan di-update
Browser dapat meng-cache file CSS untuk loading lebih cepat

index.html

                        
                            <!DOCTYPE html>
                            <html lang="en">
                            <head>
                                <title></title>
                                <link href="style.css"
                                      rel="stylesheet"/>
                            </head>
                            <body>
                                <p>
                                    Web Programming is
                                    <span>fun</span>!
                                </p>
                            </body>
                            </html>
                        
                    

style.css

                        
                            /* style.css */
                            /* I am a comment :D */
                            
                            p {
                                text-decoration: underline;
                                color: purple;
                            }
                            
                            span {
                                text-transform: uppercase;
                            }
                        
                    

Hasil

Web Programming is fun!

3. Anatomi CSS

Untuk memahami CSS dengan baik, penting untuk mengetahui komponen-komponen yang membentuk sebuah rule CSS.

p {
color: red;
}

Selector Property Property Value

Penjelasan komponen CSS:

Selector - Target elemen HTML yang akan di-style (contoh: p, h1, div)
Property - Aspek yang ingin diubah (contoh: color, font-size, background)
Property Value - Nilai yang diberikan pada property (contoh: red, 20px, #ffffff)
Declaration - Kombinasi property dan value (contoh: color: red;)

💡 Penting:
Setiap declaration harus diakhiri dengan titik koma (;). Lupa menambahkan titik koma adalah kesalahan umum yang sering menyebabkan CSS tidak bekerja.

4. Jenis-Jenis Selector CSS

Selector adalah cara untuk menargetkan elemen HTML yang ingin kita style. Ada beberapa jenis selector yang bisa digunakan:

Type Selector (Element Selector)

Menargetkan elemen berdasarkan nama tag HTML.

                
                    /* Semua paragraph akan berwarna merah */
                    p {
                        color: red;
                    }

Multiple Selectors

Menerapkan style yang sama ke beberapa elemen sekaligus dengan memisahkan selector menggunakan koma.

                
                    /* p, h1, dan div akan berwarna merah */
                    p, h1, div {
                        color: red;
                    }

Attribute Selector

Menargetkan elemen berdasarkan atribut HTML seperti id, name, atau atribut lainnya.

HTML

                        
                            <p id="myParagraph">
                                this content will be in blue
                            </p>
                            
                            <div name="myDiv">
                                This is a content of a div
                            </div>
                        
                    

CSS

                        
                            p[id=myParagraph] {
                                color: blue;
                            }
                            
                            div[name=myDiv] {
                                color: red;
                                font-weight: bold;
                            }
                        
                    

Apa yang Terjadi Jika Property Tidak Dikenal?

Jika kita menggunakan property atau value yang tidak valid, CSS akan mengabaikannya dan tidak ada error yang terjadi. Dokumen tetap akan ditampilkan dengan normal.

                
                    /* Property "hohoho" tidak dikenal, akan diabaikan */
                    p, h1, div {
                        hohoho: red;
                    }

5. ID Selector

ID Selector digunakan untuk menargetkan elemen dengan id tertentu. Gunakan tanda pagar (#) sebelum nama id.

                
                    /* Menargetkan elemen dengan id="myParagraph" */
                    #myParagraph {
                        color: blue;
                    }

💡 Catatan tentang ID:
ID bersifat unik dalam satu halaman HTML. Satu ID hanya boleh digunakan untuk satu elemen. Jika ingin menerapkan style ke beberapa elemen, gunakan class.

6. Class Selector

Class selector digunakan untuk menargetkan elemen dengan class tertentu. Gunakan tanda titik (.) sebelum nama class. Class dapat digunakan berkali-kali pada banyak elemen.

HTML

                        
                            <div class="myClass">
                                what color am I?
                            </div>

CSS

                        
                            .myClass {
                                color: white;
                                background-color: black;
                            }

Hasil

White on Black

Selector dengan Class Spesifik

Kita juga bisa menggabungkan type selector dengan class untuk styling yang lebih spesifik.

                
                    /* Hanya paragraph dengan class="myClass" yang berwarna merah */
                    p.myClass {
                        color: red;
                    }

7. CSS Combinator

Combinator adalah cara untuk menghubungkan beberapa selector berdasarkan hubungan antar elemen di DOM (Document Object Model).

Adjacent Sibling Combinator (+)

Menargetkan elemen yang berada tepat setelah elemen tertentu (sibling/saudara yang berdekatan).

HTML

                        
                            <h1>This is a heading</h1>
                            <p>This is a paragraph</p>
                            <p>This is another paragraph</p>

CSS

                        
                            /* Paragraph pertama setelah h1 */
                            h1 + p {
                                color: red;
                            }

Hasil

This is a heading

This is a paragraph

This is another paragraph

Descendant Combinator (spasi)

Menargetkan elemen yang berada di dalam elemen tertentu (child/keturunan).

HTML

                        
                            <ul>
                                <li>John</li>
                                <li>Jane</li>
                                <li><em>Tom</em></li>
                            </ul>
                        
                    

CSS

                        
                            /* em yang ada di dalam li */
                            li em {
                                background-color: green;
                            }

Hasil

John
Jane
Tom

8. Pseudo-class untuk Styling Link

Pseudo-class digunakan untuk mendefinisikan state khusus dari sebuah elemen. Untuk hyperlink, ada empat state yang bisa di-style:

:link - Link normal yang belum dikunjungi
:visited - Link yang sudah dikunjungi
:hover - Saat cursor berada di atas link
:active - Saat link diklik

HTML

                        
                            <a href="https://example.com"
                               target="_blank">
                                Visit Example
                            </a>

CSS

                        
                            a:link {
                                color: green;
                            }
                            
                            a:visited {
                                color: black;
                            }
                            
                            a:hover {
                                background-color: red;
                            }
                            
                            a:active {
                                color: yellow;
                            }
                        
                    

⚠️ Urutan Penting!
Pseudo-class untuk link harus ditulis dalam urutan: :link, :visited, :hover, :active (LVHA). Urutan yang salah dapat menyebabkan style tidak bekerja dengan benar.

9. Inheritance dan Cascade

Cascade (Penimpaan Style)

Cascade adalah aturan di mana jika ada selector yang sama dengan deklarasi yang sama, maka yang terakhir ditulis yang akan digunakan.

CSS

                        
                            p {
                                color: blue;
                            }
                            
                            p {
                                color: red; /* Yang ini dipakai */
                            }
                        
                    

Hasil

                        
                            Teks akan berwarna MERAH
                            karena rule terakhir
                            yang menang

Inheritance (Pewarisan Style)

Inheritance adalah konsep di mana style yang diterapkan pada elemen parent akan diwariskan ke elemen child di dalamnya.

HTML

                        
                            <body>
                                <p>
                                    Because the body is blue,
                                    the paragraph inherits
                                    the blue color except
                                    <span>this part</span>
                                </p>
                            </body>
                        
                    

CSS

                        
                            body {
                                color: blue;
                            }
                            
                            span {
                                color: red;
                            }
                        
                    

Hasil

Because the body is blue, the paragraph inherits the blue color except this part

10. Text Decoration Properties

Text decoration digunakan untuk menambahkan dekorasi pada teks seperti garis bawah, garis atas, atau garis tengah.

Property	Deskripsi	Nilai yang Mungkin
text-decoration-line	Menentukan jenis garis dekorasi	none, underline, overline, line-through, blink
text-decoration-color	Menentukan warna garis dekorasi	Nilai warna (red, #ff0000, rgb())
text-decoration-style	Menentukan style garis dekorasi	solid, double, dotted, dashed, wavy
text-decoration-thickness	Menentukan ketebalan garis	auto, from-font, angka, persentase

                
                    span {
                        text-decoration-line: underline;
                        text-decoration-style: wavy;
                        text-decoration-color: green;
                        text-decoration-thickness: 1px;
                    }
                
            

Hasil

CSS is also Fun

11. Text Properties

CSS menyediakan banyak property untuk mengontrol tampilan teks. Berikut adalah property-property yang sering digunakan:

Property	Deskripsi	Nilai yang Mungkin
color	Mengatur warna teks	Nilai warna
direction	Mengatur arah teks	ltr, rtl
line-height	Mengatur jarak antar baris	normal, angka, panjang, persentase
letter-spacing	Mengatur jarak antar huruf	normal, panjang
text-align	Mengatur perataan teks	left, right, center, justify
text-indent	Mengatur indentasi baris pertama	panjang, persentase
text-shadow	Menambahkan bayangan pada teks	color, x-value, y-value, blur
text-transform	Mengubah kapitalisasi teks	none, capitalize, uppercase, lowercase
word-spacing	Mengatur jarak antar kata	normal, panjang
white-space	Mengatur penanganan whitespace	normal, nowrap, pre, pre-wrap, pre-line

Contoh Penggunaan Text Properties

CSS

                        
                            h1 {
                                color: pink;
                                word-spacing: 50px;
                            }
                            
                            h2 {
                                color: #B31F6D;
                                letter-spacing: -2px;
                            }
                            
                            p {
                                color: rgb(0, 0, 255);
                                letter-spacing: 0.2cm;
                                direction: rtl;
                            }
                        
                    

HTML

                        
                            <h1>Welcome to Computing</h1>
                            
                            <h2>Web Programming</h2>
                            
                            <p>Let's work with HTML
                            and CSS</p>

Contoh Text Shadow dan Transform

                
                    h1.headline {
                        text-align: center;
                        text-transform: capitalize;
                        text-shadow: #f4ed30 10px 5px 1px;
                    }
                    
                    p {
                        text-indent: 10%;
                        line-height: 30px;
                    }
                    
                    div {
                        width: 100px;
                        white-space: break-spaces;
                    }
                
            

Hasil text-shadow

headline news in computing

Format Warna dalam CSS

CSS mendukung berbagai format warna:

Nama Warna - red, blue, green, pink, dll.
Hexadecimal - #ff0000, #B31F6D, #000
RGB - rgb(255, 0, 0), rgb(0, 0, 255)
RGBA - rgba(255, 0, 0, 0.5) dengan transparansi
HSL - hsl(0, 100%, 50%)

12. CSS Shorthand

CSS Shorthand memungkinkan kita menulis beberapa property dalam satu baris, membuat kode lebih ringkas dan mudah dibaca.

Contoh Text Decoration Shorthand

Cara Panjang

                        
                            span {
                                text-decoration-line: underline;
                                text-decoration-style: wavy;
                                text-decoration-color: green;
                                text-decoration-thickness: 1px;
                            }
                        
                    

Shorthand

                        
                            span {
                                text-decoration:
                                    underline wavy green 1px;
                            }

Shorthand Umum Lainnya

Property	Shorthand	Komponen
margin	margin: 10px 20px 10px 20px;	top, right, bottom, left
padding	padding: 10px 20px;	top/bottom, left/right
border	border: 1px solid black;	width, style, color
background	background: #fff url() no-repeat;	color, image, repeat, position
font	font: bold 16px Arial;	style, weight, size, family

✅ Tips:
Gunakan shorthand untuk membuat kode CSS lebih ringkas dan mudah dibaca. Namun, pastikan Anda memahami urutan value yang benar untuk setiap shorthand property.

Kesimpulan

CSS (Cascading Style Sheet) adalah bahasa styling yang powerful untuk mengontrol tampilan halaman web. Dengan memahami konsep dasar seperti selector, property, value, serta prinsip inheritance dan cascade, Anda dapat membuat website yang menarik dan profesional.

Poin-poin penting yang perlu diingat:

Gunakan external CSS untuk project yang lebih besar
Pahami perbedaan antara ID selector (#) dan class selector (.)
Manfaatkan combinator untuk styling yang lebih spesifik
Gunakan pseudo-class untuk interactive states
Terapkan shorthand untuk kode yang lebih ringkas

Praktikkan setiap contoh kode dalam tutorial ini dan jangan takut untuk bereksperimen. Ingat: "Sky is the only limit" dalam berkreasi dengan CSS!

Sintaks Logis

Cari Blog Ini

Panduan Lengkap Belajar CSS: Dari Selector Dasar hingga Styling Teks Profesional

1. Apa Itu CSS?

2. Tiga Cara Menggunakan CSS

Metode 1: Inline Style (Via Atribut Style)

Metode 2: Internal CSS (Via Tag Style)

Metode 3: External CSS (Via File Terpisah)

3. Anatomi CSS

4. Jenis-Jenis Selector CSS

Type Selector (Element Selector)

Multiple Selectors

Attribute Selector

Apa yang Terjadi Jika Property Tidak Dikenal?

5. ID Selector

6. Class Selector

Selector dengan Class Spesifik

7. CSS Combinator

Adjacent Sibling Combinator (+)

This is a heading

Descendant Combinator (spasi)

8. Pseudo-class untuk Styling Link

9. Inheritance dan Cascade

Cascade (Penimpaan Style)

Inheritance (Pewarisan Style)

10. Text Decoration Properties

11. Text Properties

Contoh Penggunaan Text Properties

Contoh Text Shadow dan Transform

headline news in computing

Format Warna dalam CSS

12. CSS Shorthand

Contoh Text Decoration Shorthand

Shorthand Umum Lainnya

Kesimpulan

Komentar

Posting Komentar