Jetorbit Web Hosting DomaiNesia

Belajar CSS Dasar

Topik.my.ID – Belajar CSS Dasar sangatlah penting untuk membuat sebuah website menjadi Indah, karena memang CSS ini dapat memberikan anda warna, ukuran, desain yang memang membuat tampilan menjadi indah dan bagus.

Sebelum anda belajar membuat website sederhana akan lebih baik kita belajar html dasar setelah itu anda menggunakan css untuk membuat tampilan lebih menarik dan untuk menjalankan fungsi-fungsi yang diberikan agar bekerja dengan baik selanjutnya kita harus belajar javascripst.

Apa Itu CSS?

CSS merupakan kepanjangan dari Cascading Style Sheet yang mana fungsi Css untuk memberikan style, warna, ukuran dan ke dalam html pada halaman dalam sebuah website

Menurut w3.org, css adalah mekanisme sederhana yang mengatur gaya/style (warna, ukuran, posisi dll) pada halaman sebuah website, sebuah csslah yang akan membuat tampilan sebuah website menjadi menarik

sebelum ada css, bagaiaman cara html membuat tulisan helloworld yang besar dengan warna biru terang, ukuran 6 dan font jenis arial maka mendapatkan codingan yang panjang sekali

 

jangan pernah lakukan seperti itu, dengan menggunakan css maka anda akan mendapatkan sintax yang simpel dengan dibuat ditempat lain yang tidak bercampuran dengan html lainnya

 

Cascading Style Sheet merupakan sebuah aturan yang digunakan untuk menampilkan elemnt atau tag html, kalau html adalah yang menyajikan konten, sedangkan CSS yang mana konten akan ditampilkan, apakah berwarna biru, ukurannya besar dan lainnya sebagainya

Fungsinya CSS sebagai pemisah antara file dengan html yang disajikan tentunya gak tercampur antara file, 1 CSS dapat digunakan untuk banyak halaman html seluruh element akan berubah dan 1 halaman html dapat terlihat jika menggunakan css yang berbeda pula. Merubah website tanpa merubah html dengan menggunakan CSS,

Anatomi CSS

Tidak hanya dalam html yang memiliki anatomi struktur seperti elemen, tag atributnya. Dalam CSS terdapat anatomi seperti selector, property dan value. Adapun strukturnya adalah sebagai berikut

 

Untuk membuat CSS ini harus sesuai dengan struktur dan satu deklarasi seperti diatas misalkan

 

Artinya CSS. Silahkan pilih seluruh elemen yang ada di H1, lalu ubah teks di dalamnya menjadi warna biru, dengan font arial.

Apa Itu Selector?

Selector merupakan sebuah bagian yang digunakan untuk memilih dan memanipulasi elemen spesifik pada html elemen yang kita pilih berdasarkan tag, id clas bahkan pola atau pattern.

Apa Itu Property?

Property dalam CSS itu banyak sekali, anda tidak perlu menghafal satu persatu property tersebut, kita hanya mengambil hal-hal penting saja dala menggunakan property ini seluruhnya ada 350 lebih property anda bisa kunjungi website milik css-tricks.com/almanac

Penempatan CSS

Ada beberapa cara menempakan file CSS pada dokument html yang kita miliki {CSS} atau membuat file terpisah antara file html dengan CSS.

Cara pertama kita bisa menggunakan embed dibagian head pada html dengan menggunakan tag style

 

Lihat Contohnya seperti dibawah ini:

 

 

Cara Kedua yang kita bisa lakukan adalah dengan menggunakan atribut dari html yang namanya style dengan type inline

inline

 

Contohnya sebagai berikut

 

Cara Ketiga dengan menggunakan membuat file terpisah dengan html yang dihubungkan file css dengan tag html link, tagnya link file css mana yang ada pada halaman tersebut

 

Dengan contoh sebagai berikut ini:

Buat Html dan Style CSS yang terpisah dengan contoh sebagai berikut

 

kemudian untuk file CSSnya adalah sebagai berikut

 

Bagiaman cara membuat font Styling?

CSS memisahkan antara font dengan teks, font terkait dengan tulisan dan teks terkait dengan propertu pendukung, mari kita lihat property apa saja yang ada pada font

Font – family: Mengatur jenis font yang akan digunakan
(nama font dan generic family)

 

arial dan verdana adalah nama font sedangkan sans-serif dan serif adalah generic font

nama font tersebut berguna untuk mencari apakah dalam sebuah value ada fontnya, jika dalam komputer server tidak ada font arial maka berganti di font sebelahnya yaitu verdana.

Font – size: Mengatur Ukuran font
Kita bisa memberikan belakang ukurannya piksel = px persen=% dan em

contohnya

 

Nah, jika itu terlalu panjang dalam CSS. Ada sebuah cara atau shorthand yang urutannya harus sesuai, mulai dari font-style, font-variant, font weight, font size, line height, font-family. Namun, dari properti diatas ada yang opsional dan wajib

Untuk Opsional: Italic, normal, bold
Untuk yang wajib: 16px dan helvetica, arial, sans serif

 

Dalam CSS Shorthand, kita urutkan property-propertynya menjadi sebuah value.

Text Styling,

Nah, untuk membuat CSS atau website bisa anda simpan program html anda di https://codepen.io/login untuk menggunakannya tidak perlu registrasi namun disarankan untuk melakukan registrasi supaya file website yang kalian punya akan selalu ada. Ketika anda masuk ada 3 jenis yaitu html, CSS dan javascript. Kelebihanya akan menampilkan sebuah website pada layar sebuah kanan.

untuk memberikan komentar pada CSS anda bisa menggunakan / (slash) bintang * atau langsung bisa menggunakan CTRL + Slash

Anda bisa menggunakan teks dengan properti

/* belajar mengenal teks */

color untuk memberi warna pada tulisan

kita bisa memberikan beberapa tipe warna yaitu red, lightseagreen, royalblue

 

selain itu bisa menggunakan hexadecimal untuk pemberian warna text seperti #ff0000, #20b2aa, #4169el warna dengan hexadecimal ini ada 6 digit, untuk 0 sampai dengan 6 digit ini warnanya hitam, sedangkan untuk f 6 digit warnanya putih.

 

Dan terakhir pemberian warna dengan rgb

r

 

text-indent memberi identasi pada paragraf/teks atau jarak pada sebuah awal paragraf

 

text-decoration mengatur dekorasi pada teks

Untuk teks ini untuk menambahkan underline, overline atau line-through
untuk menghilangkan garis bawah pada link bisa menggunakan css

 

untuk menghilangkan tag <a href=”a”>Link disini</a>

text-transform mengubah jenis huruf menjadi huruf besar, kecil atau kapital.

 

Membuat awal pada tiap-tiap paragraf menjadi huruf besar.

letter-spacing mengatur spasi antar huruf

 

word-spacing mengatur spasi antar kata

 

CSS Background

Anda bisa menggunakan background pada body dan ada 4 elemnt yang harus dipelajari dalam CSS Background ini

1. Background-color: Mengatur warna pada backgroudn

2. Backgrund-image: Mengatur gambar yang digunakan pada background

3. Background-position: Mengatur Pososo gambar pada background

4. Backgorud-repeat: Mengatur Jenis Pengulangan Gambar pada Background

Dari keempat ini bisa anda gunakan semua atau satu saja, kami akan membuat CSS Backround ini dengan menyiapkan indeks.html, style.css dan background untuk gambar

Untuk mencari gambar yang berpola anda bisa mencari di subtlepatern.com yang mana banyak sekali pola-pola yang bisa digunakan untuk background di website

 

Dari Keempat background tadi bisa disingkat dalam shorthand menjadi sebaris saja dengan

 

Misalnya:

 

SELECTOR CSS Basic

Selector merupakan salah satu hal yang digunakan oleh CSS untuk mengenali sebuah elemen html yang akan diberikan style. Nah, apa saja yang bisa digunakan dalam teks selector ini. Ada beberapa yang bisa digunakan yaitu elemen html seperti yang telah kita buat sebelumnya, dan kita juga bisa menggunakan selector sendiri dengan menggunakan
id/class
Dan yang paling belum kita bahas adalah complexx xelector

 

CSS Element HTML

Nah, untuk memberikan warna yang sama pada selector anda cukup menuliskan satu selctor saja dengan menggunakan separator atau gruping dengan mengggunakan “koma”

 

Jika kita ingin memberikan elemnt pada Ul dan OL yang UL dengan warna yang berbeda dengan UL warna orange, dan OL dengan warna merah kita tidak bisa menggunakan

 

yang berubah bukanlah ul, namun yang berubah a didalamnya, jika kita tulis a maka

 

semua warna a berubah menjadi merah, namun jika kita ingin membedakan warna a menggunakan sparator spasi untuk membedakan warna. Spasi itu namanya didalam yang ada di dalam Li atau yang ada di dalam UL contohnya

 

Sehingga a yang didalam ul berwarna orange

 

Dan a yang ada dalam ol berwarna merah

NB, Jika ada warna yang sama bisa menggunakan koma dan jika ada warna yang lebih spesifik anda bisa gunakan spasi

Selector Class dan id

Jika kita hendak merubah warna pada sebuah paragraf tentunya, kita tidak bisa menggunakan selector html yang bisa kita gunakan adalah dengan menggunakan selctor id dan selector class

contoh pada html indeksnya sebagai berikut (tuliskan di dalam atributnya)

 

untuk id kita menggunakan tanda pagar pada css

 

contoh css dari paragrafnya adalah sebagai berikut

 

Untuk class kita menggunakan tanda titik pada css

 

contoh css dari paragrafnya adalah sebagai berikut

 

Apa perbedaan antara dua selector ini? Kita bisa melihat teorinya sebagai berikut

Sebuah element html hanya boleh memiliki 1 id
setiap halaman hanya boleh memiliki 1 elemn dengan id tersebut
Dapat digunakan sebaga penanda halaman untuk link
Digunakan juga untuk javascrip
Sebaiknya tidak digunakan untuk CSS lebih baik gunakan class.

Jikalau untuk yang clas, maka satu elemen bisa menggunakan lebih dari satu clas contohnya berikut:

 

untuk CSSnya adalah sebagai berikut:

 

Dan untuk cetak tebal yang diatas pada CSS ini bisa digunakan untuk berulang kali contohnya pada html berikut:

 

Nah, untuk membuat selector pengkhususan pada paragaraf bisa anda lakukan perintah sebagai berikut

 

CSS tolong carikan saya paragraf tapi yang memiliki class cetak tebal jadi selain paragraf tidak akan dikenai cetak tebal

Pseudo Class CSS

Pseudo Class merupakan kelas semu yang dimiliki oleh sebuah elemen html yang membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut. Kenapa disebut dengan class semu? karena aktif pada keadaan tertentu saja dan pseudo class dibagi menjadi beberapa keadaan tertentu yang berhubungan dengan

Untuk menjalankan Sudo Class maka kata kuncinya adalah :Pseudo Class apa

contoh

 

Style defaulte pada sebuah link (a yang memiliki href)

 

: Hover

Style ketika kursor mouse berada diatas sebuah link/elemen

 

: active

Style ketika sebuah link di-klik (keadaan aktif)

 

: visited

Style ketika sebuah link sudah pernah dikunjungi sebelumnya menggunakan browser yang sama

 

Menggunakan tipe pertama yang aktif dengan menggunakan link

Untuk tipe kedua yaitu Pseudo Class yang berhubungan dengan posisi element

:firs-child

Memilih elemen pertama dari sebuah parent (elemen pembungkusnya)

 

css tolong saya carikan a yang ada di dalam li tapi yang merupakan anak pertama, lalu a di dalamnya kita ganti warnanya jadi hijau

:last-child

memilih elemen terakhir dari sebuah parent (elemen Pembungkusnya)

 

Maka yang berwarna hijau adalah yang terakhir:
css tolong saya carikan a yang ada di dalam li tapi yang merupakan anak pertama, lalu a di dalamnya kita ganti warnanya jadi hijau

:nth_child (n)

Memilih elemn ke-n dari sebuah paren (elemen Pembungkusnya.)
n Bisa berarti urutan 1,2 atau pula 2n, 3n+2, 4n-1 atau ganjil dan genap even dan odd
(even): genap (odd): ganjil

 

anda bisa tambahkan urutan yang nomor mana yang mau diganti pada urutannya seleteh element tersebut

 

Css tolong carikan saya Li yang didalamnya a dengan angka ganjil, saat saya hover maka warnanya merah

Pseudo-class yang berhubungan dengan posisi elemen (2)

: first-of-type

Memilih elemn pertama dari sebuah jenis/tipe tag

:last-of-type

memilih elemen terakhir dari sebuah jenis/tipe tag

Pewarisan pada CSS (Inheritance)

Pewarisan pada css ini sangatlah sederhana, pewarisan ini merupakan sebuah elemen yang mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parentnya

Properti yang diwariskan adalah

Color
font
letter-spacing
line height
list-style
text-align
text-indent
text-transform
visibility
white-space

contohnya sebagai berikut, yang mana jika bodynya semua dikasih color darkgrey maka yang a tidak berubah karena tidak mewarisinya untuk merubahnya anda harus menggunakan pewarisan dalam css

 

Maka colornya akan mengikuti orang tuanya menjadi darkgray

CSS Specificity

CSS Specificity merupakan setiap deklarasi CSS (selector) yang memiliki berat yang berbeda. Berat tersebut menentukan sebera spesifik sebuah elemen dapat dipilih oleh selector.

Setiap selector yang dibuat membuat berat yang berbeda dan sebera spesifik dari selector tersebut.

 

Overide, jika anda membuat css yang sama maka yang akan diambil adalah selector yang terakhir

 

jika kita mendahulukan id terlebih dahulu maka akan lebih spesifik dari yang lain.

Inline, Id, Class, Element

jika anda tidak bisa menghitungnya anda bisa ke url http://specificity.keegan.st sebagai kalkultaro dalam menghitung specificity yang akan adukan antara id, class, element yang bisa anda tulis di selector yang akan anda bandingkan.

Semoga dengan Belajar CSS Dasar diatas menjadi bahan refrensi bagi anda yang ingin belajar css untuk pemula terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

DomaiNesia