CSS Home

Selamat datang di Tutorial CSS!

Ini adalah tempat yang sempurna untuk memulai perjalanan Anda dalam mempelajari CSS, bahasa markup standar untuk membuat halaman web.

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan halaman web. Dengan CSS, Anda dapat mengontrol layout, warna, font, dan elemen visual lainnya dalam sebuah halaman web.

Kenapa Anda Harus Mempelajari CSS?

Mempelajari CSS (Cascading Style Sheets) sangat penting bagi siapa saja yang ingin membuat atau mengelola website.

Contoh Sederhana CSS

Berikut adalah contoh dokumen CSS dasar:


        /* Mengatur gaya dasar untuk seluruh halaman */
        body {
            font-family: Arial, sans-serif; /* Jenis huruf */
            background-color: #f4f4f4; /* Warna latar belakang */
            color: #333; /* Warna teks */
            margin: 0;
            padding: 0;
        }
        
        /* Mengatur gaya untuk header */
        header {
            background-color: #4CAF50; /* Warna latar belakang header */
            color: white; /* Warna teks header */
            text-align: center; /* Posisi teks di tengah */
            padding: 10px 0;
        }
        
        /* Mengatur gaya untuk paragraf */
        p {
            margin: 20px; /* Jarak antar paragraf */
        }

Elemen CSS yang Paling Umum

p { color: blue; } : Selektor digunakan untuk memilih elemen HTML yang ingin kita styling.
h1 { font-size: 24px; color: #333; } : Properti dan nilai digunakan untuk mengatur gaya elemen yang dipilih.
.my-class { background-color: yellow; } #my-id { margin: 20px; } : Class dan ID memungkinkan kita untuk memberi gaya khusus pada elemen tertentu.
.box { margin: 10px; padding: 20px; } : Margin mengatur ruang di luar elemen sementara Padding mengatur ruang di dalam elemen.
.bordered { border: 1px solid black; } : Border mengatur garis di sekitar elemen.
body { background-color: #f0f0f0; background-image: url('background.jpg'); } : Background mengatur latar belakang elemen.

Apa yang Akan Anda Pelajari?

Dalam tutorial CSS ini, berikut adalah beberapa hal yang akan kamu pelajari:

Selektor dan Properti CSS: Cara menggunakan selektor untuk memilih elemen HTML yang ingin kamu style dan Memahami berbagai properti CSS dan cara menggunakannya.
Gaya Teks: Mengubah jenis huruf, ukuran, warna, dan gaya teks. Dan penggunaan properti font, text-align, text-decoration, dan lainnya.
Tata Letak dan Posisi: Mengatur margin, padding, border, dan outline. Dan menggunakan properti display dan position untuk mengatur tata letak elemen.
Warna dan Latar belakang: manggunakan warna untuk latar belakang dan teks. dan mengatur gambar latar belakang dan pengulangan gambar.

←Dashboard Next →

CSS Introduction

CSS adalah bahasa yang kita gunakan untuk menata halaman Web.

APA ITU CSS?

CSS adalah singkatan dari Cascading Style Sheets

CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya

CSS menghemat banyak pekerjaan. Ia dapat mengontrol tata letak beberapa halaman web sekaligus

Stylesheet eksternal disimpan dalam file CSS

Mengapa Menggunakan CSS?

CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.

Contoh CSS


            body {
                background-color: lightblue;
              }
              
              h1 {
                color: white;
                text-align: center;
              }
              
              p {
                font-family: verdana;
                font-size: 20px;
              }

CSS Memecahkan Masalah Besar

HTML TIDAK PERNAH dimaksudkan untuk memuat tag untuk memformat halaman web!

HTML diciptakan untuk mendeskripsikan konten halaman web, seperti:


            <h1>Ini adalah judul<h1>
            <p>Ini adalah sebuah paragraf.<p>

Ketika tag seperti <font> dan atribut warna ditambahkan ke spesifikasi HTML 3.2, hal itu memicu mimpi buruk bagi pengembang web. Pengembangan situs web besar, tempat font dan informasi warna ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal. Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) menciptakan CSS. CSS menghapus format gaya dari halaman HTML!

← Previous Next →

CSS Sytanx

Aturan CSS terdiri dari pemilih dan blok deklarasi.

Pemilih menunjuk ke elemen HTML yang ingin Anda beri gaya.

Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua. Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi diapit oleh kurung kurawal.


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

Penjelasan Contoh


            p adalah pemilih dalam CSS (menunjuk ke elemen HTML yang ingin Anda beri gaya)
                color adalah sebuah properti, dan red merupakan nilai properti
                text-align adalah sebuah properti, dan center merupakan nilai properti

← Previous Next →

CSS selectors

CSS Selectors untuk memilih elemen HTML yang ingin Anda beri gaya.

Kita dapat membagi CSS Selectors menjadi lima kategori:

Pemilih sederhana (memilih elemen berdasarkan nama, id, kelas) Pemilih kombinator (memilih elemen berdasarkan hubungan tertentu di antara elemen tersebut) Pemilih kelas semu (memilih elemen berdasarkan status tertentu) Pemilih elemen semu (memilih dan memberi gaya pada bagian suatu elemen) Pemilih atribut (memilih elemen berdasarkan atribut atau nilai atribut)


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

Pemilih ID CSS

Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Id suatu elemen bersifat unik dalam suatu halaman, jadi pemilih id digunakan untuk memilih satu elemen unik! Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen. Aturan CSS di bawah ini akan diterapkan ke elemen HTML dengan id="para1":


            #para1 {
                text-align: center;
                color: red;
              }

← Previous Next →

HOW TO CSS

Saat browser membaca lembar gaya, ia akan memformat dokumen HTML sesuai dengan informasi dalam lembar gaya tersebut.

Tiga Cara Memasukkan CSS:

CSS Eksternal
CSS internal
CSS sebaris

CSS Eksternal

Dengan lembar gaya eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file! Setiap halaman HTML harus menyertakan referensi ke berkas lembar gaya eksternal di dalam elemen , di dalam bagian kepala.


            <!DOCTYPE html>
        <html>
        <head>
            <title>Judul Halaman</title>
        </head>
        <body>
            <h1>Ini adalah heading</h1>
        </body>
        </html>

Gaya CSS


            body {
                background-color: lightblue;
              }
              
              h1 {
                color: navy;
                margin-left: 20px;
              }

CSS Internal

Lembar gaya internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik. Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian kepala.


            <!DOCTYPE html>
        <html>
        <head>
        <style>
             body {
                 background-color: linen;
             }
          
             h1 {
                 color: maroon;
                 margin-left: 40px;
             }
            <title>Judul Halaman</title>
        </head>
        <body>
            <h1>Ini adalah heading</h1>
        </body>
        </html>

CSS Sebaris

Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan gaya sebaris, tambahkan atribut style ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.

COntohnya


            <!DOCTYPE html>
        <html>
        <head>
        <h1 style="color:blue;text-align:center;">This is a heading h1>
        <p style="color:red;">This is a paragraph.p>
        </body>
        </html>

Beberapa Lembar Gaya

Jika beberapa properti telah ditetapkan untuk pemilih (elemen) yang sama dalam lembar gaya yang berbeda, nilai dari lembar gaya terakhir yang dibaca akan digunakan.

Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen <h1>:


            h1 {
                color: navy;
              }

Contoh

Jika gaya internal didefinisikan setelah tautan ke lembar gaya eksternal, elemen <h1> akan berwarna "Navy":


            <head>
                <link rel="stylesheet" type="text/css" href="mystyle.css">
                <style>
                h1 {
                  color: orange;
                }
                <style>
                <head>

← Previous Next →

COMMENTS CSS

Komentar digunakan untuk menjelaskan kode, dan dapat membantu saat Anda mengedit kode sumber di lain waktu. Komentar diabaikan oleh browser. Komentar CSS ditempatkan di dalam <style> elemen, dan dimulai dengan /*dan diakhiri dengan */:

Contoh


            /* This is a single-line comment */
            p {
                color: red;
            }

Anda dapat menambahkan komentar di mana pun Anda inginkan dalam kode:


            p {
                color: red;  /* Set text color to red */
              }

Bahkan di tengah baris kode:


            p {
                color: /*red*/blue; 
              }

Komentar juga dapat mencakup beberapa baris:


            /* This is
            a multi-line
            comment */

            p {
                color: red;
            }

Komentar HTML dan CSS

Dari tutorial HTML, Anda mempelajari bahwa Anda dapat menambahkan komentar ke sumber HTML Anda dengan menggunakan &;t;!--...-->sintaksis. Dalam contoh berikut, kami menggunakan kombinasi komentar HTML dan CSS:


            <!DOCTYPE html>
        <html>
        <head>
        <style>
            p {
                 color: red; /* Set text color to red */
            }
            <title>Judul Halaman</title>
        </head>
        <body>
            <h1>Ini adalah heading</h1>
            <!-- These paragraphs will be red -->

            <p> Hello Word! <p>
            <p> This paragraph is styled with CSS. <p>
            <p> CSS comments are not shown in the output <p>
        </body>
        </html>

← Previous Next →

CSS Colors

Warna ditentukan menggunakan nama warna yang telah ditetapkan, atau nilai RGB, HEX, HSL, RGBA, HSLA.

Hello World

Lorem ipsum dolor sit amet, pembentuk adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Dengan sedikit racun, latihan kami yang ullamcorper suscipit lobortis tidak akan keluar dari komodo yang diakibatkannya.


            contoh kodenya:
            <h1 style="background-color:DodgerBlue;">Hello World<h1>
            <p style="background-color:Tomato;">Lorem ipsum...<p>

Warna Teks CSS

Anda dapat mengatur warna teks:

Hello World

Lorem ipsum dolor sit amet, pembentuk adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Dengan sedikit racun, latihan kami yang ullamcorper suscipit lobortis tidak akan keluar dari komodo yang diakibatkannya.


            contoh kodenya:
            <h1 style="color : Tomato;"> Hello world<h1>
            <p style="color : DodgerBlue;">Lorem ipsum....<p>
            <p style="color : MediumSeaGreen;">Ut wisi enim...<p>

Warna Batas CSS

Anda dapat mengatur warna batas:

Hello World


            Contoh kodenya:
            <h1 style="border:2px solid Tomato;">Hello World<h1>
            <h1 style="border:2px solid DodgerBlue;">Hello World<h1>
            <h1 style="border:2px solid Violet;">Hello World<h1>

Nilai Warna CSS

Dalam CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Sama dengan nama warna "Tomat":

Warna merah (255, 99, 71)

#ff6347

hsl (9, 100%, 64%)


            Contoh kodenya:
            <h1 style="background-color:rgb(255, 99, 71);">Warna merah (255, 99, 71)<h1>
            <h1 style="background-color:#ff6347;">#ff6347<h1>
            <h1 style="background-color:hsl(9, 100%, 64%);">hsl (9, 100%, 64%)<h1>

Sama seperti nama warna "Tomat", tetapi 50% transparan:

rgba(255, 99, 71, 0,5)

hsla(9, 100%, 64%, 0,5)


            Contoh kodenya:
            <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0,5)<h1>
            <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0,5)<h1>

← Previous Next →

CSS Backgrounds

Properti latar belakang CSS digunakan untuk menambahkan efek latar belakang untuk elemen.

background-color
background-image
background-repeat
background-attachment
background-position
background(properti singkatan)

Warna latar belakang CSS

Properti background-colormenentukan warna latar belakang suatu elemen.


            Contoh
            Warna latar belakang halaman diatur seperti ini:

            body {
                background-color: lightblue;
            }

Dengan CSS, warna paling sering ditentukan oleh:

nama warna yang valid - seperti "merah"
nilai HEX - seperti "#ff0000"
nilai RGB - seperti "rgb(255,0,0)"

Elemen Lainnya

Anda dapat mengatur warna latar belakang untuk elemen HTML apa pun:


            Contoh
            Di sini, elemen <h1>, <p>, <div> akan memiliki warna latar belakang yang berbeda: 

            h1 {
                background-color: green;
            }

            div {
                background-color: lightblue;
            }

            p {
                background-color: yellow;
            }

Opacity / Transparansi

Properti ini opacitymenentukan opasitas/transparansi suatu elemen. Nilainya dapat berkisar dari 0,0 - 1,0. Semakin rendah nilainya, semakin transparan:


            div {
                background-color: green;
                opacity: 0.3;
              }

Catatan: Saat menggunakan opacityproperti untuk menambahkan transparansi pada latar belakang suatu elemen, semua elemen turunannya mewarisi transparansi yang sama. Hal ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca.

Transparansi menggunakan RGBA

Jika Anda tidak ingin menerapkan opasitas pada elemen anak, seperti pada contoh di atas, gunakan nilai warna RGBA. Anda telah mempelajari dari Bab Warna CSS , bahwa Anda dapat menggunakan RGB sebagai nilai warna. Selain RGB, Anda dapat menggunakan nilai warna RGB dengan saluran alfa (RGB A ) - yang menentukan opasitas untuk suatu warna. Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha ). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram). Tip: Anda akan mempelajari lebih lanjut tentang Warna RGBA di Bab Warna CSS kami.


            div {
                background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
              }

Gambar Latar Belakang CSS

Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang suatu elemen. Secara default, gambar diulang sehingga menutupi seluruh elemen.


            Contoh
            Mengatur gambar latar belakang untuk suatu halaman: 

            body {
                background-image: url("paper.gif");
            }


            Contoh
            Contoh ini menunjukkan kombinasi teks dan gambar latar yang buruk . Teksnya sulit dibaca: 

            body {
                background-image: url("bgdesert.jpg");
            }

Latar belakang CSS-ulangi

Secara default, background-imageproperti mengulang gambar baik secara horizontal maupun vertikal. Beberapa gambar sebaiknya diulang hanya secara horizontal atau vertikal, atau akan terlihat aneh, seperti ini:


            Contoh
            body {
                background-image: url("gradient_bg.png");
            }

Jika gambar di atas hanya diulang secara horizontal ( background-repeat: repeat-x;), latar belakang akan terlihat lebih baik:


            Contoh:
            body {
                background-image: url("gradient_bg.png");
                background-repeat: repeat-x;
              }

CSS background-repeat: tidak-diulang

Menampilkan gambar latar belakang hanya satu kali juga ditentukan oleh background-repeat properti:


            Contoh
            Tampilkan gambar latar belakang hanya satu kali:
            body {
                background-image: url("img_tree.png");
                background-repeat: no-repeat;
              }

Latar belakang CSS-posisi

Properti ini background-positiondigunakan untuk menentukan posisi gambar latar belakang.


           Contoh
           Posisikan gambar latar belakang di sudut kanan atas:
            body {
                background-image: url("img_tree.png");
                background-repeat: no-repeat;
                background-position: right top;
              }

Latar belakang CSS-lampiran

Properti ini background-attachmentmenentukan apakah gambar latar belakang harus digulir atau tetap (tidak akan digulir bersama bagian halaman lainnya):


            Contoh
            Tentukan bahwa gambar latar belakang harus tetap:
            body {
                background-image: url("img_tree.png");
                background-repeat: no-repeat;
                background-position: right top;
                background-attachment: fixed;
              }

Contoh

Tentukan bahwa gambar latar belakang harus bergulir bersama dengan sisa halaman:


            body {
                background-image: url("img_tree.png");
                background-repeat: no-repeat;
                background-position: right top;
                background-attachment: scroll;
              }

← Previous Next →

CSS Borders

Properti border CSS memungkinkan Anda menentukan gaya, lebar, dan warna border elemen.

Gaya Batas CSS

Properti border-stylemenentukan jenis batas yang akan ditampilkan.

dotted- Menentukan batas putus-putus
dashed- Menentukan batas putus-putus
solid- Menentukan batas solid
double- Menentukan batas ganda
groove- Menentukan batas beralur 3D. Efeknya bergantung pada nilai warna batas
ridge- Menentukan batas bergelombang 3D. Efeknya bergantung pada nilai warna batas
inset- Menentukan batas sisipan 3D. Efeknya bergantung pada nilai warna batas
outset- Menentukan batas awal 3D. Efeknya bergantung pada nilai warna batas
none- Tidak menentukan batas
hidden- Menentukan batas tersembunyi

Properti border-styledapat memiliki satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri).


            p.dotted {border-style: dotted;}
            p.dashed {border-style: dashed;}
            p.solid {border-style: solid;}
            p.double {border-style: double;}
            p.groove {border-style: groove;}
            p.ridge {border-style: ridge;}
            p.inset {border-style: inset;}
            p.outset {border-style: outset;}
            p.none {border-style: none;}
            p.hidden {border-style: hidden;}
            p.mix {border-style: dotted dashed solid double;}

← Previous Next →

Margin CSS

Margin digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.

Properti CSS margindigunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan. Dengan CSS, Anda memiliki kendali penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Margin - Sisi Individu

CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen:

margin-top
margin-right
margin-bottom
margin-left

Semua properti margin dapat memiliki nilai berikut:

otomatis - browser menghitung margin

panjang - menentukan margin dalam px, pt, cm, dll.

% - menentukan margin dalam % dari lebar elemen yang berisi

inherit - menentukan bahwa margin harus diwarisi dari elemen induk


            Contoh
            Tetapkan margin yang berbeda untuk keempat sisi elemen <p>:
            p {
                margin-top: 100px;
                margin-bottom: 100px;
                margin-right: 150px;
                margin-left: 80px;
              }

Margin - Properti Singkatan

Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti margin dalam satu properti. Properti ini marginadalah properti singkatan untuk properti margin individual berikut:

margin-top
margin-right
margin-bottom
margin-left

Jadi beginilah cara kerjanya:

margin atas adalah 25px
margin kanan 50px
margin bawah 75px
margin kiri 100px


            Contoh
            Gunakan properti singkat margin dengan empat nilai:
            p {
                margin: 25px 50px 75px 100px;
              }

margin atas adalah 25px
margin kanan dan kiri adalah 50px
margin bawah 75px


            Contoh 
            gunakan properti singkatan margin dengan tiga nilai:
            p {
                margin: 25px 50px 75px;
              }

margin atas dan bawah adalah 25px
margin kanan dan kiri adalah 50px


            Contoh 
            gunakan properti singkatan margin dengan dua nilai:
            p {
                margin: 25px 50px;
              }

margin: 25 piksel
semua empat margin berukuran 25px


            Contoh 
            gunakan properti singkatan margin dengan satu nilai:
            p {
                margin: 25px;
              }

Nilai Otomatis

Anda dapat mengatur properti margin untuk automemusatkan elemen secara horizontal di dalam wadahnya. Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan.


            Contoh 
            Gunakan margin: otomatis:
            div {
                width: 300px;
                margin: auto;
                border: 1px solid red;
              }

Nilai Warisan

Contoh ini memungkinkan margin kiri elemen <p class="ex1"> diwarisi dari elemen induk (<div>):


            Contoh
            Penggunaan nilai warisan:
            div {
                border: 1px solid red;
                margin-left: 100px;
              }
              
              p.ex1 {
                margin-left: inherit;
              }

← Previous Next →

Padding CSS

Padding digunakan untuk membuat ruang di sekitar konten elemen, di dalam batas yang ditentukan.

Properti CSS paddingdigunakan untuk menghasilkan spasi di sekitar konten elemen, di dalam batas yang ditentukan. Dengan CSS, Anda memiliki kendali penuh atas padding. Ada properti untuk mengatur padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Bantalan - Sisi Individual

CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:

padding-top
padding-right
padding-bottom
padding-left

Semua properti padding dapat memiliki nilai berikut:

panjang - menentukan bantalan dalam px, pt, cm, dll.
% - menentukan padding dalam % dari lebar elemen yang memuatnya
inherit - menentukan bahwa padding harus diwarisi dari elemen induk


            Contoh
            Tetapkan bantalan yang berbeda untuk keempat sisi elemen <div>:
            div {
                padding-top: 50px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 80px;
              }

Padding - Properti Singkatan

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti padding dalam satu properti.

Properti ini paddingadalah properti singkatan untuk properti padding individual berikut:

padding-top
padding-right
padding-bottom
padding-left

Jadi beginilah cara kerjanya:

Jika padding properti memiliki empat nilai:

bantalan: 25 piksel 50 piksel 75 piksel 100 piksel;

padding atas adalah 25px
padding kanan adalah 50px
bantalan bawah adalah 75px
padding kiri adalah 100px


            Contoh 
            Gunakan properti singkatan padding dengan empat nilai:
            div {
                padding: 25px 50px 75px 100px;
              }

Jika padding properti memiliki Tiga nilai:

bantalan: 25 piksel 50 piksel 75 piksel;

padding atas adalah 25px
bantalan kanan dan kiri berukuran 50px
bantalan bawah adalah 75px


            Contoh 
            Gunakan properti singkatan padding dengan Tiga nilai:
            div {
                padding: 25px 50px 75px;
              }

Jika padding properti memiliki Dua nilai:

bantalan: 25 piksel 50 piksel;

padding atas dan bawah adalah 25px
bantalan kanan dan kiri berukuran 50px


            Contoh 
            Gunakan properti singkatan padding dengan Dua nilai:
            div {
                padding: 25px 50px;
              }

Jika padding properti memiliki Satu nilai:

bantalan: 25 piksel;

keempat padding berukuran 25px


            Contoh 
            Gunakan properti singkatan padding dengan Satu nilai:
            div {
                padding: 25px;
              }

Padding dan Lebar Elemen

Properti CSS widthmenentukan lebar area konten elemen. Area konten adalah bagian di dalam padding, border, dan margin elemen ( model kotak ). Jadi, jika suatu elemen memiliki lebar tertentu, padding yang ditambahkan ke elemen tersebut akan ditambahkan ke lebar total elemen tersebut. Ini sering kali merupakan hasil yang tidak diinginkan.


            Contoh
            Di sini, elemen <div> diberi lebar 300px. Namun, lebar sebenarnya dari elemen <div> adalah 350px (300px + 25px padding kiri + 25px padding kanan):
            div {
                width: 300px;
                padding: 25px;
              }

Untuk mempertahankan lebar pada 300px, berapa pun jumlah padding, Anda dapat menggunakan box-sizingproperti. Hal ini menyebabkan elemen mempertahankan lebar sebenarnya; jika Anda menambah padding, ruang konten yang tersedia akan berkurang.


            Contoh
            Gunakan properti box-sizing untuk menjaga lebar pada 300px, berapa pun jumlah paddingnya:
            div {
                width: 300px;
                padding: 25px;
                box-sizing: border-box;
              }

← Previous Next →

Box Model CSS

Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak. Model kotak CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Model ini terdiri dari: konten, padding, border, dan margin.

Penjelasan bagian-bagiannya:

Konten - Konten kotak, tempat teks dan gambar muncul
Padding - Membersihkan area di sekitar konten. Padding bersifat transparan
Border - Batas yang mengelilingi padding dan konten
Margin - Membersihkan area di luar batas. Margin transparan

Model kotak memungkinkan kita untuk menambahkan batas di sekitar elemen dan menentukan ruang antar elemen.


            Contoh
            div {
                width: 300px;
                border: 15px solid green;
                padding: 50px;
                margin: 20px;
              }

Lebar dan Tinggi Elemen

Untuk mengatur lebar dan tinggi elemen dengan benar di semua browser, Anda perlu mengetahui cara kerja model kotak.

Saat Anda mengatur properti lebar dan tinggi elemen dengan CSS, Anda cukup mengatur lebar dan tinggi area konten . Untuk menghitung lebar dan tinggi total elemen, Anda juga harus menyertakan padding dan border.


            Contoh
            elemen <div> ini akan memeiliki lebar total 350px dan tinggi total 80px:
            div {
                width: 320px;
                height: 50px;
                padding: 10px;
                border: 5px solid gray;
                margin: 0;
              }


            Berikut perhitungannya:
            320px (lebar area konten)
            + 20px (padding kiri + padding kanan)
            + 10px (batas kiri + batas kanan)
            = 350px (lebar total)

            50px (tinggi area konten)
            + 20px (padding atas + padding bawah)
            + 10px (batas atas + batas bawah)
            = 80px (tinggi total)

Lebar total suatu elemen harus dihitung seperti ini:

Lebar elemen total = lebar + padding kiri + padding kanan + border kiri + border kanan

Tinggi total suatu elemen harus dihitung seperti ini:

Tinggi elemen total = tinggi + bantalan atas + bantalan bawah + batas atas + batas bawah


           Catatan:
            Properti margin juga memengaruhi total ruang yang akan ditempati kotak di halaman, 
            tetapi margin tidak termasuk dalam ukuran kotak yang sebenarnya. 
            Lebar dan tinggi total kotak berhenti di tepi kotak.

← Previous Next →

Outline CSS

Garis luar adalah garis yang digambar di luar batas elemen.

CSS memiliki properti garis besar berikut:

outline-style
outline-color
outline-width
outline-offset
outline


            Catatan: Outline berbeda dengan borders ! 
            Tidak seperti border, outline digambar di luar border elemen, 
            dan mungkin tumpang tindih dengan konten lainnya. Selain itu, 
            outline BUKAN bagian dari dimensi elemen. 
            lebar dan tinggi total elemen tidak terpengaruh oleh lebar outline.

Gaya Garis Besar CSS

Properti outline-stylemenentukan gaya garis besar, dan dapat memiliki salah satu nilai berikut:

dotted- Menentukan garis putus-putus
dashed- Menentukan garis putus-putus
solid- Menentukan garis besar yang solid
double- Menentukan garis ganda
groove- Menentukan garis alur 3D
ridge- Menentukan garis lengkung 3D
inset- Menentukan garis sisipan 3D
outset- Menentukan garis besar awal 3D
none- Tidak menentukan garis besar
hidden- Menentukan garis tersembunyi

Contoh berikut menunjukkan outline-stylenilai-nilai yang berbeda:


            p.dotted {outline-style: dotted;}
            p.dashed {outline-style: dashed;}
            p.solid {outline-style: solid;}
            p.double {outline-style: double;}
            p.groove {outline-style: groove;}
            p.ridge {outline-style: ridge;}
            p.inset {outline-style: inset;}
            p.outset {outline-style: outset;}

Tidak ada properti kerangka lainnya (yang akan Anda pelajari lebih lanjut di bab berikutnya) yang akan memiliki EFEK APAPUN kecuali outline-styleproperti tersebut ditetapkan!

← Previous Next →

Font CSS

Memilih font yang tepat untuk situs web Anda itu penting!

Memilih font yang tepat memiliki dampak besar pada pengalaman pembaca di situs web.

Font yang tepat dapat menciptakan identitas yang kuat untuk merek Anda.

Menggunakan font yang mudah dibaca itu penting. Font memberikan nilai tambah pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang tepat untuk font tersebut.

Dalam CSS ada lima keluarga font generik:

Font serif memiliki goresan kecil di tepi setiap huruf. Font ini menciptakan kesan formal dan elegan.
Font sans-serif memiliki garis-garis yang bersih (tanpa goresan kecil). Font ini menciptakan tampilan yang modern dan minimalis.
Font monospace - di sini semua huruf memiliki lebar tetap yang sama. Font ini menciptakan tampilan mekanis.
Font kursif meniru tulisan tangan manusia.
Font fantasi merupakan font yang bersifat dekoratif/menyenangkan.

Semua nama font yang berbeda tergolong dalam salah satu keluarga font generik.

Perbedaan Antara Font Serif dan Sans-serif

Pada layar komputer, font sans-serif dianggap lebih mudah dibaca daripada font serif.

Beberapa Contoh Font

Times New Roman
Georgia
Garamond

Arial
Verdana
Helvetica

Courier New
Lucida Console
Monaco

Brush Script MT
Lucida Handwriting

Copperplate
Papyrus

Properti font-family CSS

Dalam CSS, kita menggunakan font-familyproperti untuk menentukan fonta suatu teks.

Properti font-familyharus memuat beberapa nama font sebagai sistem "fallback", untuk memastikan kompatibilitas maksimum antara browser/sistem operasi. Mulailah dengan font yang Anda inginkan, dan akhiri dengan keluarga generik (agar browser dapat memilih font yang serupa dalam keluarga generik, jika tidak ada font lain yang tersedia). Nama-nama font harus dipisahkan dengan koma.


            Contoh
            Tentukan beberapa font berbeda untuk tiga paragraf:
            .p1 {
                font-family: "Times New Roman", Times, serif;
              }
              
              .p2 {
                font-family: Arial, Helvetica, sans-serif;
              }
              
              .p3 {
                font-family: "Lucida Console", "Courier New", monospace;
              }

← Previous Next →

CSS Tables

Tampilan tabel HTML dapat ditingkatkan dengan CSS:

Perusahaan	Kontak	Negara
Alfreds Futterkiste	Maria Anders	Jerman
Berglunds membeli dengan cepat	Christina Berglund	Swedia
Pusat perbelanjaan Moctezuma	Fransisco Chang	Meksiko
Ernst Handel	Roland Mendel	Austria
Perdagangan Pulau	Helen Bennet	Inggris
Raja Essen	Philip Cramer	Jerman
Gudang Anggur Bacchus yang Tertawa	Yoshi Tannamuri	Kanada
Toko Makanan Riuniti	Giovanni Rovelli	Italia

Batas Tabel

Untuk menentukan batas Tabel dalam CSS, gunakan border properti.

Contoh berikut menentukan batas solid untuk elemen <table>, <th>, dan <td>


            table, th, td {
                border: 1px solid;
              }

Tabel Lebar Penuh

Tabel di atas mungkin tampak kecil dalam beberapa kasus. Jika Anda memerlukan tabel yang dapat menutupi seluruh layar (lebar penuh), tambahkan width: 100%ke elemen <table>:


            table {
                width: 100%;
              }

Tutup Batas Tabel

Properti ini border-collapsemengatur apakah batas tabel harus diciutkan menjadi satu batas:


            table {
                border-collapse: collapse;
              }

← Previous

CSS Tutorial

CSS Home

Selamat datang di Tutorial CSS!

Apa itu CSS?

Kenapa Anda Harus Mempelajari CSS?

Contoh Sederhana CSS

Elemen CSS yang Paling Umum

Apa yang Akan Anda Pelajari?

CSS Introduction

APA ITU CSS?

Mengapa Menggunakan CSS?

Contoh CSS

CSS Memecahkan Masalah Besar

CSS Sytanx

Aturan CSS terdiri dari pemilih dan blok deklarasi.

Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Penjelasan Contoh

CSS selectors

CSS Selectors untuk memilih elemen HTML yang ingin Anda beri gaya.

Kita dapat membagi CSS Selectors menjadi lima kategori:

Pemilih ID CSS

HOW TO CSS

Tiga Cara Memasukkan CSS:

CSS Eksternal

Gaya CSS

CSS Internal

CSS Sebaris

Beberapa Lembar Gaya

Contoh

COMMENTS CSS

Komentar HTML dan CSS

CSS Colors

Hello World

Warna Teks CSS

Hello World

Warna Batas CSS

Hello World

Hello World

Hello World

Nilai Warna CSS

Warna merah (255, 99, 71)

#ff6347

hsl (9, 100%, 64%)

rgba(255, 99, 71, 0,5)

hsla(9, 100%, 64%, 0,5)

CSS Backgrounds

Warna latar belakang CSS

Elemen Lainnya

Opacity / Transparansi

Transparansi menggunakan RGBA

Gambar Latar Belakang CSS

Latar belakang CSS-ulangi

CSS background-repeat: tidak-diulang

Latar belakang CSS-posisi

Latar belakang CSS-lampiran

Contoh

CSS Borders

Margin CSS

Margin - Sisi Individu

Margin - Properti Singkatan

Nilai Otomatis

Nilai Warisan

Padding CSS

Bantalan - Sisi Individual

Padding - Properti Singkatan

Padding dan Lebar Elemen

Box Model CSS

Lebar dan Tinggi Elemen

Outline CSS

Gaya Garis Besar CSS

Font CSS

Perbedaan Antara Font Serif dan Sans-serif

Properti font-family CSS

CSS Tables

Batas Tabel

Tabel Lebar Penuh

Tutup Batas Tabel