Pengertian Dasar Mengenai CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Apa itu CSS ?

A. Pengertian dan Penjelasan CSS

CSS (Cascading Style Sheet) adalah kode yang memberi tahu browser cara memberi gaya (style) konten dokumen HTML dengan menggunakan aturan untuk menjelaskan bagaimana elemen HTML yang berbeda harus ditampilkan.

Kegunaan :

Dapat mengubah tampilan halaman web Anda tanpa mengubah konten apa pun yang mendasarinya.Dapat menghemat banyak pekerjaan, di antaranya dapat mengontrol tata letak beberapa halaman web sekaligus.

Struktur CSS

CSS terdiri dari 2 struktur, yaitu selector dan declaration. Selector adalah sebuah tag html yang digunakan pada CSS agar elemen tersebut dapat dimanipulasi atau ditambahkan style pada CSS, selector dapat berupa tag html itu sendiri, atau bisa juga berupa nilai dari atribut class atau id pada tag html. Declaration terdiri dari 2 bagian, yaitu property dan value.

B. CSS Selector

Terdapat 5 macam selector di CSS :

1. Tag Selector : memilih elemen berdasarkan nama tag.

Contoh :
p {
color: blue;
}

Artinya: Pilih semua elemen <p> lalu atur warna teksnya menjadi biru.

2. Class Selector : memilih elemen berdasarkan nama class yang diberikan. Class Selector dibuat dengan tanda titik di depannya.

Contoh :

Kode CSS
.pink {
color: white;
background: pink;
padding: 5px;
}

Kode HTML
<h3 class = "pink"> Teksnya berwarna pink. </h3>

3. ID Selectors : hampir sama dengan class selectors. Bedanya, ID bersifat unik sehingga hanya boleh digunakan oleh satu elemen saja. ID Selectors dibuat dengan tanda pagar (#) di depannya.

Contoh :

Kode CSS
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;
}

Kode HTML
<header id="header">
<h1>Welcome to my website! </h1>
</header>

4. Attribute Selectors : selektor yang memiliki elemen dengan nilai atribut.

Contoh :
input[type=text] {
background: none;
color: cyan;
padding: 11px;
border: 1px solid cyan;
}

Artinya CSS akan diterapkan pada semua elemen <input> yang memiliki atribut type='text'. Contoh kode HTML: <input type="text" placeholder="ketik sesuatu..." />

5. Universal Selectors : digunakan untuk menyeleksi semua elemen pada jangkauan (scope) tertentu.

Contoh :

* {
color : red;
background : grey;
}

Artinya semua elemen akan memiliki warna red dan background berwarna grey. Beberapa elemen dapat dikenakan 1 rule CSS yang sama.

Contoh :
elemen h1 dan paragraph (p) harus berada di tengah dan menggunakan font arial
h1, p {text-align: center; font-family: Arial;}

CSS Comments
/* This is a comment in a CSS file */

3 Gaya Penulisan CSS

1. Inline style sheet : style diletakkan pada elemen HTML

Contoh :
<h1 style="color:blue; font-size:18px;">Hello world!</h1>

Hasil : Hello world!

2. Internal style sheet : style diletakkan pada file HTML

Contoh :

<head>
<style>
h1 {
color:blue;
font-size:18px;
}
</style>
</head>
<body>
<h1> Hello world! </h1>
</body>

Hasil : Hello world!

3. External style sheet : Stylesheet eksternal disimpan dalam file CSS.

Kode HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Hello world! </h1>
</body>

Kode CSS
h1 {
color:blue;
font-size:18px;
}

Hasil : Hello world!

Conflict CSS?

Aturan :

inline > internal stylesheet> external stylesheet
Yang lebih spesifik yang menang.
Yang terakhir ditulis yang menang. Jika semua aturan sama spesifiknya, aturan terakhir yang ditulis (yang lebih jauh di bawah file) adalah aturan yang akan diterapkan.

Contoh :
h1 {background-color: yellow;}
h1 {background-color: red;}
yang menang : red

4. Menggunakan “ !Important “ sebagai bagian dari deklarasi style akan lebih didahulukan dari semua aturan di level manapun, kecuali jika ada style pada <span> .

Contoh :
<h3 style = "color: green! important;"> Makanan
Ringan dan <span style = "color: blue;"> Minuman
</span> </h3>

Hasil :

C. Text, Font, dan Color di CSS

Font di CSS
Ada dua kategori utama font: serif dan sans serif. Font serif memiliki ujung yang lebih bagus dan membuatnya lebih mudah untuk membaca blok teks yang besar. Font Sans Serif ("sans" adalah Bahasa Prancis untuk "tanpa") mudah dibaca jika ukurannya besar. Secara umum, gunakan font sans-serif untuk judul, dan font serif untuk konten teks halaman Anda.

Font-family menentukan sejumlah opsi untuk dicoba oleh browser saat merender halaman. Ini berubah dari khusus ke umum. Jika font pilihan pertama tidak dapat ditampilkan di browser pengguna, font berikutnya yang lebih umum akan dicoba, dan jika font tersebut tidak dapat ditampilkan, font ketiga dan paling umum yang ditunjuk akan digunakan.

Font-style

Font-size

Font-weight

Text di CSS
Sementara atribut font mempengaruhi cara teks muncul/terlihat, atribut teks lebih berkaitan dengan posisi teks pada halaman.

Text-Indent : Menjorokkan teks Anda (atau baris pertama paragraf) dengan jumlah piksel yang ditentukan.

Text-align : teks Anda dapat diratakan ke kiri, kanan, tengah, atau rata. Rata kiri adalah default untuk bahasa yang dibaca dari kiri ke kanan (seperti bahasa Inggris).

Text-decoration : bisa diberi nilai underline, overline, line-through, atau none. Seringkali nilai 'none' diberikan untuk menghapus garis bawah default di bawah tautan.

Contoh :
p {font-family: Arial, Helvetica, sans-serif; dekorasi-teks: line-through;}

Hasil : Feed the cats.

Text-transformation : properti ini digunakan untuk menetapkan text menjadi huruf kapital atau tidak. Properti tersebut dapat diberi nilai uppercase, lowercase, atau capitalize (huruf kapital di awal kata).

Contoh :
p{text-transformation : uppercase;}

Text-shadow : menambah bayangan pada teks. Terdapat 4 nilai yang dapat ditetapkan pada properti text-shadow, di antaranya adalah nilai untuk posisi vertical (px), posisi horizontal (px) , efek blur (px), dan warna bayangan (nama warna, kode rgb, atau kode warna hexadecimal). Pada saat penulisan declaration, tidak semua nilai wajib dimasukkan.

Contoh penulisan :
h1{text-shadow : 2px 2px blue;}

letter-spacing : untuk menetapkan jarak antar huruf pada suatu teks.

Contoh :
h1 {
letter-spacing: 7px;
}
h2 {
letter-spacing: -3px;
}

line-height : untuk menetapkan jarak antar baris.

Contoh :

p.small {
line-height: 1;
}
p.big {
line-height: 2;
}

Color di CSS

1. Nama warna

Kita bisa menspesifikasikan color value suatu elemen dengan 3 cara :

nama warna
nilai warna RGB
nilai warna Hexadecimal (or hex)

Contoh deklarasi menggunakan nama warna :
h1 {
color: blue;
}

2. RGB Values

Contoh deklarasi dengan RGB Values :
h1 {
color: rgb(0,0,255);
}

3. Hexadecimal Values

Contoh deklarasi dengan Hexadecimal Color Values :
h1 {
color: #0000FF;
}

D. Background CSS

CSS Background Properties :

background-color : menentukan warna background suatu elemen

Contoh :
body {
background-color: lightgreen;
}

background-image : menentukan gambar untuk digunakan sebagai background suatu elemen

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

background-repeat : menentukan pengulangan gambar untuk digunakan sebagai background suatu elemen entah itu secara vertikal atau horizontal.

Contoh :
body {
background-image:
url("https://www.flaticon.com/svg/static/icons/svg/977/977258.svg");
background-repeat: repeat-x;
}

background-attachment : menentukan apakah gambar latar belakang harus di-scroll atau sudah fix

Contoh :

background dapat di-scroll

background-position : menentukan posisi awal gambar background

Contoh :
body {
background-image:
url('https://www.flaticon.com/svg/static/icons/svg/977/977258.svg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Baca Juga : Pengertian Dasar Mengenai CSS II

E. Box Model

Box Model adalah cara browser Web melacak tiap elemen HTML.

Setiap elemen terdiri dari 4 area:

elemen / content
padding
border
margin.

Element
Elemen selalu berada dalam persegi, meskipun itu adalah blok teks dengan tepi bergerigi atau gambar transparan yang tidak persegi panjang. Browser web akan menetapkan persegi panjang di sekitar area terkecil yang sebenarnya ditempati konten elemen HTML.

Padding
Padding adalah spasi di luar konten elemen. Kita dapat menyetel masing masing dari empat sisi secara terpisah, dan dapat menyetel nilainya ke 0. Jika kita menyetel warna latar belakang elemen, warna itu juga akan diterapkan ke padding.

Borders
Border adalah area di luar padding. Kebanyakan default lebar border elemen HTML adalah 0 dan tidak terlihat. Kita bisa menetapkan tiap sisi secara terpisah. Kita bisa mengatur warna, pola, bahkan gambar. Ini adalah cara yang keren untuk menambah garis horizontal/vertikal pada elemen di halaman web.

Border memiliki 3 properti utama :

1) Style
Border-style mendeklarasikan jenis border yang akan ditampilkan. Borderstyle dapat memiliki satu, dua, tiga, atau empat nilai yang sesuai dengan batas atas, kanan, bawah, dan kiri kotak.

Contoh :
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;}

Aturan border-style :

Jika border-style diberikan 3 value, value pertama akan diterapkan untuk border atas, value kedua untuk border kanan, dan value ketiga untuk border bawah.
Jika border-style diberikan 2 value, value pertama akan diterapkan untuk border atas dan bawah dan value kedua akan diterapkan untuk border kiri dan kanan.
Jika border-style diberikan 1 value, value tersebut akan diterapkan untuk semua sisi border.
Nilai

Aturan border-style :

Jika border-style diberikan 3 value, value pertama akan diterapkan untuk border atas, value kedua untuk border kanan, dan value ketiga untuk border bawah.
Jika border-style diberikan 2 value, value pertama akan diterapkan untuk border atas dan bawah dan value kedua akan diterapkan untuk border kiri dan kanan.
Jika border-style diberikan 1 value, value tersebut akan diterapkan untuk semua sisi border.\
nilai default dari border-style adalah “none”

2) Width
Border-width mengontrol lebar border dan seperti border-style juga bisa memiliki satu, dua, tiga, atau empat nilai yang sesuai dengan batas atas, kanan, bawah, dan kiri kotak. Width dapat disetel menggunakan unit pengukuran seperti px atau em, atau dengan menggunakan salah satu nilai yang telah ditentukan sebelumnya: thin, medium, thick. Nilai default dari border-width adalah “medium”.

Contoh :
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}

3) Color
Border-color mengontrol warna border dan seperti dua properti border lainnya yang dapat memiliki satu hingga empat nilai yang sesuai dengan empat batas dengan cara yang sama. Border-color dapat diatur dengan menggunakan nama warna, nilai RGB, nilai angka heksadesimal, atau memiliki nilai “transparan”. Nilai default dari border-color adalah warna elemen.

Contoh :
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}

Margin
Margin - spasi yang melingkupi suatu elemen dan terletak di luar border. Margin adalah bagian dari elemen HTML yang berinteraksi satu sama lainnya. Margin atas dan bawah elemen terkadang diciutkan menjadi margin tunggal yang sama dengan margin terbesar dari kedua margin.Ini tidak terjadi pada margin kiri dan kanan. Hanya pada margin atas dan bawah.

Margin Individual Properties :
margin-top, margin-right, margin-bottom, margin-left

Bisa juga menggunakan penulisan declaration yang lebih pendek:
margin : value_top value_right value_buttom value_left;

Contoh :
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}

F. Float CSS

Properti float bisa memiliki salah satu dari nilai berikut :

left
right
none
inherit

Dalam penggunaannya yang paling sederhana, properti float dapat digunakan untuk membungkus teks di sekitar gambar.

G. CSS Alignment

CSS Align-Element : menengahkan elemen.

Contoh :

File CSS
.center {
margin: auto;
width: 50%;
border: 3px solid #73AD21;
padding: 10px;
}

File HTML

<div class="center">
<p><b>Note: </b>margin:auto is here</p>
</div>

CSS Text-Align : menengahkan teks pada suatu elemen.

Contoh :

File CSS
.center {
text-align: center;
border: 3px solid blue;
}

File HTML
<div class="center">
<p>Teks ini berada di tengah.</p>
</div>

CSS Image-Align : menengahkan gambar

Contoh :

File CSS
img {
display: block;
margin-left: auto;
margin-right: auto;
}

File HTML
<p>Untuk membuat posisi gambar berada di tengah, pasang margin left dan right ke auto dan display sebagai block element.</p>

Left and Right-Align : using position

Contoh :

File CSS
.right { position absolute; right: 0px; width: 300px;
border: 3px solid #73AD21; padding: 10px;}

File HTML
<h2>Right Align</h2>
<p>contoh untuk merata-kanankan elemen dengan property position:</p>
<div class="right">
<p>teks ini berada di kanan.</p>
</div>

Left and Right-Align : using float

Contoh :

File CSS
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 15px;
}

File HTML
<h2>Right Align</h2>
<div class="right">
<p>I'm right and I'm in the right place </p>
</div>

The Clearfix Hack

Contoh :

File CSS :
div { border: 3px solid #4CAF50; padding: 5px;}
.img1 { float: right;}
.clearfix { overflow: auto;}
.img2 { float: right;}

File HTML:

<div>
<img class="img1" src=https://www.flaticon.com/svg/static/icons/svg/3435/3435908.svg alt="Pineapple" width="170" height="170">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src=https://www.flaticon.com/svg/static/icons/svg/3435/3435908.svg alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

Center Vertically - Using padding

Contoh :

File CSS
.center {
padding: 70px 0;
border: 3px solid green;
}

File HTML
<div class="center">
<p>Berada di tengah secara vertikal.</p>
</div>

Center Vertically - Using line-height

Contoh :

File CSS
.center{
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}.
center p{
line-height: 1.5;
display: inline-block;
vertical-align:middle;
}

File HTML
<div class="center”>
<p> I am vertically and horizontally centered.</p>
</div>

Center vertically - using position & transform

Contoh :

File CSS
.center {
height: 200px;
position: relative;
border: 3px solid green;
}.
center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Center Vertically - Using Flexbox :

Contoh :

File CSS
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}

File HTML
<div class="center">
<p>Di tengah secara vertikal & horizontal</p>
</div>

H. Inline, Block, Inline-Block Display

Dibandingkan dengan display: inline, perbedaan utama dari display: inline-block adalah dapat mengatur lebar dan tinggi suatu elemen. Selain itu, dengan display: inline-block margin/padding atas dan bawah didahulukan tetapi dengan display:

inline tidak. Dibandingkan dengan display: block, perbedaan utama display: inlineblock adalah tidak menambahkan jeda baris, jadi elemen dapat terletak bersebelahan dengan elemen lainnya.

display: inline

Contoh :
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid green;
background-color: lightgreen;
}

display: inline-block

Contoh :
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid green;
background-color: lightgreen;
}

display: block

Contoh :
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid green;
background-color: lightgreen;
}

I. Link State

Link dapat diberi style dengan properti CSS apa pun (misal : Color, font-family, background, dll.). Selain itu, link dapat diberi style berbeda bergantung pada keadaannya.

Empat status link adalah:

a:link - link normal yang belum dikunjungi
a:visited - link yang telah dikunjungi penggunaa
a:hover - link saat pengguna mengarahkan mouse ke atasnya
a:active - link saat diklik

Contoh styling link :
/* unvisited link */
a:link {
color: red;
}

J. Button Styling

Mewarnai background button : gunakan properti background-color
Mengubah ukuran button : gunakan properti font-size
Mengubah padding button : gunakan properti padding
Menambahkan sudut membulat ke tombol : gunakan property border-radius
Mewarnai border button : gunakan properti border
Menambahkan style saat mouse diarahkan : gunakan selector :hover
Menentukan kecepatan efek “hover : gunakan properti transitionduration
Menambahkan bayangan pada button : gunakan properti boxshadow
Mengubah panjang button : gunakan properti width
Mengelompokkan button : gunakan float:left
Mengelompokkan button secara vertikal : gunakan display:block
dan lain-lain

K. Navigation Menu Styling

Seperti halnya button, styling navigation menu dapat dilakukan seperti styling pada button.

Contoh kode CSS list link vertical navigation :
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

Untuk menu vertikal : gunakan “display:block”
Untuk menu horizontal : gunakan “display:inline”

l. CSS Position

Properti position menentukan jenis metode pemosisian yang digunakan untuk elemen tanpa mempengaruhi posisi elemen-elemen di sekitarnya.

Terdapat 5 value untuk properti position :

1. Static
Elemen HTML diposisikan static secara default. Elemen yang diposisikan static tidak terpengaruh oleh properti top, down, left, dan right.

Contoh :

File CSS
div.static {
position: static;
border: 3px solid #73AD21;
}

2. Relative
Elemen ini diposisikan relatif terhadap posisi normalnya, memiliki akses terhadap properti left, top, right, dan bottom. Penggunaan properti left, top, right, dan bottom dapat membuat posisi elemen menjauh dari posisi normalnya.

Penggunaan properti relative tidak akan berpengaruh terhadap posisi elemen-elemen di sekitarnya karena ruang yang sebelumnya ditempati elemen tersebut dianggap ada, sehingga tidak akan ada penyesuaian posisi yang disebabkan celah yang ditinggalkan oleh elemen dengan property position:relative.

Contoh :

File HTML
<div class="relative">
Elemen dengan position: relative;
</div>

File CSS
div.relative {
position: relative;
left: 100px;
border: 3px solid red;
}

3. Fixed
Sebuah elemen dengan position:fixed diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama meskipun halaman di-scroll. Properti top, right, bottom, dan left digunakan untuk memposisikan elemen. Elemen tetap tidak meninggalkan ruang di halaman tempat biasanya ditempatkan.

Contoh :

File HTML
<div class="fixed">
Elemen ini menerapkan position: fixed;
</div>

File CSS
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid red;
}

4. Absolute
Ketika elemen menggunakan position:absolute (menggunakan properti top, left, right, dan bottom), maka ruang yang sebelumnya ditempati elemen tersebut dianggap tidak ada, sehingga berpengaruh terhadap elemen yang ada di sekitarnya.

Posisi elemen akan relatif terhadap elemen parent-nya. selama elemen parent-nya berada di posisi non-static. Jika elemen diposisikan absolute tidak punya parent, maka elemen menggunakan <body> document sebagai parent-nya dan bergerak bersama saat scroll halaman.

Contoh :

File HTML
<div class="relative">Elemen ini menerapkan position: relative;
<div class="absolute">Elemen ini menerapkan position: absolute;</div>
</div>

File CSS

5. Sticky
Elemen dengan Position : sticky beralih antara relative dan fixed, bergantung pada posisi scroll. Elemen menerapkan position : relative hingga posisi offset tertentu terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position : fixed).

Contoh :
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: lightblue;
border: 2px solid #4CAF50;
}

M. CSS Form

Styling Input Fields

Gunakan properti width untuk menentukan lebar input.

Beberapa contoh input :

input[type=text]
input[type=password]
input[type=number]
dan lain-lain.

Contoh :

File CSS
input {
width: 100%;
}

Padded Inputs
Gunakan property padding untuk menambah ruang di dalam text field.

Contoh :

File CSS
input[type=text] {
width: 100%;
padding: 20px 40px;
margin: 8px 0;
box-sizing: border-box;
}

Bordered Inputs
Gunakan properti border untuk mengubah border, ukuran, dan warna. Gunakan properti border-radius untuk menambahkan sudut yang membulat.

Contoh File CSS :
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
}

Colored Inputs
Gunakan properti background-color untuk menambahkan warna background pada input, dan properti color untuk mengubah warna teks.

Contoh :

Text CSS
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #4caf50;
color: white;
}

Focused Inputs
Secara default, beberapa browser akan menambahkan outline berwarna biru di sekitar input saat input diklik. Kita bisa menyingkirkannya dengan menambahkan outline: none; ke kode css input. Gunakan selector :focus untuk melakukan sesuatu dengan input saat input diklik.

Contoh :

File CSS

Input with Icon/Image
Gunakan properti background-image dan posisikan dengan properti backgroundposition jika ingin memasukkan ikon ke dalam input. Tambahkan padding di sebelah kiri untuk meletakkan ikon.

Contoh :

File CSS

Animated Search Input
Gunakan properti transition untuk menganimasikan panjang kolom input saat difokuskan (diklik).

Contoh :

File CSS

Styling Textareas
Supaya textarea tidak dapat dibuat ukuran baru, maka ditambahkan properti resize dengan nilai “none” pada elemen textarea.

Contoh :

File CSS

Contoh :

File CSS

File HTML

Styling Input Buttons

Contoh :

File CSS

File HTML
<input type="submit" value="Submit">

Responsive Form
Setelah membuat file HTML dan CSS untuk form, untuk membuat form menjadi responsive.

Contoh :

Tambahkan kode CSS berikut
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}

Sumber Referensi :

Buku : D. Kiang and M. Kiang, "Intro Web Dev HTML CSS", 2018.
Website : W3Schools | W3Schools

Pengertian Dasar Mengenai CSS

Komentar

Formulir Kontak