Dreyanz Art: CSS

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website.

Kalau kamu sudah mengenal HTML, nah itulah salah satu contoh bahasa mereka. HTML atau Hypertext Mark Up Language tergolong sebagai bahasa pemrograman yang paling standar dan lazim digunakan dalam pembuatan halaman web. HTML ini istilahnya ada di “balik layar” tampilan halaman web yang kamu akses. Tatanan sebuah situs web akan berantakan tanpa adanya bahasa pemrograman seperti HTML.
Jika kalian belum tahu apa itu HTML kalian bisa baca disini.

CSS dan HTML

Lalu, apa hubungannya HTML dengan CSS? Keduanya sangat berhubungan erat. CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik. CSS akan membantu para web designer untuk mengubah tampilan teks (baik dari bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML.

Keberadaan CSS bisa terlihat dengan adanya atribut warna teks. Di sini CSS memberi perintah berupa teks berwarna biru melalui tag dengan atribut class=”warna”. Jadi setiap tag muncul, teks yang mengikutinya akan berwarna biru. Pun demikian saat kamu ingin mengganti warnanya. Tinggal mengganti CSS pada tag -->
Setelah memahami hubungan antara CSS dengan HTML, mari lanjutkan belajar CSS ke poin selanjutnya yaitu tentang fungsi.

Belajar CSS lebih mudah dengan mengetahui fungsinya

Sebenarnya untuk fungsi CSS kamu sudah bisa mengetahuinya dari penjelasan sebelumnya. Pada dasarnya, CSS berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website. CSS dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat diubah sehingga tampilan laman website pun menjadi terlihat lebih menarik dan efisien.

Peran CSS

Dari sini kamu bisa menyimpulkan bahwa peran CSS untuk website sangatlah penting. Tanpa adanya CSS, tampilan website akan membosankan atau bahkan membutuhkan waktu lama untuk loading. Bayangkan saja kamu hanya bisa bergantung pada HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” tapi kamu juga butuh waktu lebih lama karena harus berulang kali mengetikkan perintah. Untuk lebih mengethui tentang property CSS bisa kalian lihat disini Kumpulan Property Yang Digunakan Pada CSS Beserta Fungsinya

Source

Kumpulan Property Yang Digunakan Pada CSS Beserta Fungsinya

Jika kalian tidak tahu apa itu CSS sebaiknya kalian pahami terlebih dahulu disini Pengertian CSS dan Fungsinya .karena belajar bukan hanya dari perakteknya saja tapi kalian harus tahu juga pengertianya dan apa maksud tujuan tersebut. Jika sudah paham boleh langsung kalian peraktekanya langsung diproject kalian.

Aturan Penulisan CSS

Syntax CSS dibagi dalam 3 bagian :

selector {property : value;}

selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah (color, font-size, dll)
Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}

Contoh property dan values pada background

Property	Values	Keterangan
Background-image	Url	Alamat gambar yang sudah di uploud
Background-repeat	Repeat	Gambar diulang dalam halaman
	Repeat-y	Gambar diulang dalam sumbu y
	Repeat-x	Gambar diulang dalam sumbu x
	no-Repeat	Gambar tidak diulang hanya muncul 1 gambar

Contoh property dan values pada font

Property	Values	Keterangan
font-family	Arial;	Jenis font adalah arial
Font-size	small;	kecil
	medium;	menengah
	large;	besar
	12px;	besar 12 pixel (Bisa diganti 12pt)
Font-style	Normal;	Font normal
Font-style	Italic;	Font miring
Font-weight	Normal;	Ketebalan font normal
	Bold;	Font Tebal
	100-900	Ketebalan font dengan nilai dari 100-900

Contoh Property Dan Value pada Text

Property	Values	Keterangan
Text-decoration	none;	Menampilkan text asli
	Underline;	Menampilkan Text bergaris bawah
	Overline;	Menampilkan text bergaris atas
	line-through;	Menampilkan text tercoret
	blink;	Menampilkan text berkedip
Text-transform	uppercase;	Menampilkan text huruf besar
Text-align	left;	Text rata kiri
	right;	Text rata kanan
	center;	Text rata tengah
	justify;	Text rata kanan kiri

Contoh Selector Pada Link

Selector	Keterangan
a:link	Keadaan awal link
a:hover	Keadaan link saat dikenai mouse
a:active	Keadaan link saat di klik
a:visited	Keadaan link setelah dikunjungi

Contoh property dan value pada position

Property	Values	Keterangan
Position	Static;	Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen
	Absolute;	Unsur diposisikan relatif terhadap posisi pertama (tidak statis)
	Fixed;	Unsur diposisikan relatif terhadap jendela browser
	Relative;	elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen
	Inherit;	Nilai dari properti posisi diwariskan dari elemen induk

Contoh Property dan Value pada Border

Property	Values	Keterangan
Border	1px solid #000;	ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom;
	2px dotted #ff0000;
	3px double blue;
	5px groove #3300ff;
	5px ridge #3300ff;
	5px inset #3300ff;
	5px outset #3300ff;

Contoh property dan value pada border-radius

Property	Values	Keterangan
Border-radius	10px;	Garis melemgkung disemua sisi dengan ukuran 10px
border-top-left-radius	2em 0.5em;	Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda
border-top-right-radius	3em 2.5em;	Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda
border-bottom-right-radius	1em 2em;	Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda
border-bottom-left-radius	2em 1em;	Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda
border-bottom-left-radius	2em;	Garis melengkung pada sisi bawah dan kiri dengan ukuran sama

Margin dan Padding

Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.

Contoh property dan value pada margin dan padding

Property	Values	Keterangan
margin	10px 5px 0px 5px;	atas 5, kanan 5, bawah 0, kiri 10
margin-top	10px;	karak atas 10px
margin-right	5px;	jarak kanan 5px
margin-bottom	2em;	jarak bawah 2em
margin-left	3em;	jarak kiri 3en
padding	2em;	atas, kanan, kiri dan bawah 2em

Contoh property dan value pada display

Property	Values	Keterangan
DISPLAY	None;	Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut
	Block;	Berfungsi untuk memberi blok baru atau baris baru seperti kode dan
	Inline;	Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut
	Inline-block;	jika layar tidak muat maka secara otomatis membuat baris baru.

Source