Rumah Belajar Komputer Privat

Kursus dan belajar komputer ms office, digital marketing, web programming, jaringan, linux, windows server, php, vb.net, mysql, mikrotik, seo, web desain, wordpress, cysco, database, oracle di cileungsi


Postingan Terbaru

Info Kursus Komputer YMII Cileungsi : 0858 8188 5768 (Mas Tris)

Selasa, 28 November 2023

Home / Belajar CSS / belajar html / css / HTML / web desain / web programming / Lanjutan Belajar Web Desain Dengan HTML - MATERI CSS PART 1 UNIVERSITAS SAFIN PATI DAN RUMAH BELAJAR YMII

Lanjutan Belajar Web Desain Dengan HTML - MATERI CSS PART 1 UNIVERSITAS SAFIN PATI DAN RUMAH BELAJAR YMII

on in , , , , ,

Bismillah..

Untuk bisa belajar CSS, sebaiknya sudah menguasai materi HTML Dasar, HTML Form.

Bagi yang belum bisa bisa di tonton di video di bawah ini:

Materi tentang HTML sebelumnya di Blog ini:
- Buat Folder di VSCode dengan nama belajar-css-1

Pengenalan CSS:
  • CSS singkatan dari Cascading Style Sheets
  • HTML digunakan untuk membuat struktur konten web secara semantic, dan CSS digunakan untuk memberi style (gaya) dan layout (tata letak) pada konten HTML
  • Contohnya, kita bisa menggunakan CSS untuk mengubah font, color, size, dan lain-lain pada konten yang sudah kita buat menggunakan HTML
Apa Itu CSS:
  • CSS adalah bahasa yang digunakan untuk mendeskripsikan bagaimana sebuah dokumen yang sudah dibuat menggunakan HTML, ditampilkan ke pengguna
  • Setiap browser biasanya punya standar masing-masing ketika menampilkan dokumen HTML
  • Dengan menggunakan CSS, kita bisa membuat semua browser menampilkan dokumen HTML dengan cara yang sama

paket belajar komputer web desain dengan html, css, bootstrap di Kursus Komputer YMII Cileungsi dan Pati Jawa Tengah

CSS Syntak:

  • CSS adalah bahasa yang berbasis rule/aturan
  • Kita akan mendefinisikan rule/aturan aturan untuk element yang terdapat di dokumen HTML yang kita buat
  • Membuat rule di CSS biasanya dimulai dengan menyebutkan element yang akan dipilih, lalu diikuti dengan kurung kurawal buka, dilanjutkan dengan aturan-aturan yang akan kita gunakan, dan diakhiri dengan kurung kurawal tutup
  • Aturan dalam CSS disebutkan dengan property: value ;
Contoh Kode CSS:

contoh kode css di belajar htmll dan css di kursus komputer ymii cileungsi


Menambah CSS ke HTML:
  • Terdapat tiga cara untuk menambah CSS ke HTML
  • Cara internal, dimana CSS disimpan di file yang sama dengan HTML. Yaitu dengan menggunakan tag style
  • Cara external, dimana CSS disimpan di file yang berbeda dengan HTML. Yaitu menggunakan tag link,
  • Cara inline, dimana CSS disimpan dalam atribut styles pada tag html, ini pernah kita lakukan di kelas HTML, dan cara ini tidak direkomendasikan
Kode CSS Internal:

lanjutan belajar html dengan css

Kode CSS Eksternal 1:
1. Membuat file CSS

kode eksternal CSS

2. Memanggil file CSS di HTML

memanggil file css di html

Komentar di CSS

  • Saat membuat kode CSS, kadang kita ingin menyisipkan komentar
  • Komentar adalah kode yang tidak akan berdampak apapun
  • Untuk membuat komentar kita harus mengawali dengan /* dan diakhiri dengan */
  • Komentar bisa multi baris
Sintak Komentar di CSS

sintak komentar di CSS

ID di CSS

  • Selain menggunakan memilih element menggunakan HTML Tag, kita juga bisa memilih element menggunakan ID di CSS
  • Untuk menggunakan ID, kita perlu menggunakan # diawal nama ID nya
Contoh Sintak ID di CSS

contoh sintak id di css

CLASS di CSS

  • Kadang ada kasus kita ingin menambahkan style CSS ke beberapa element tag yang jenisnya berbeda
  • Jika kita harus buat aturan nya per tag, maka akan menyulitkan ketika banyak sekali
  • Di HTML, semua tag bisa memiliki atribut class, dan di CSS, kita bisa menambahkan aturan ke class dengan menggunakan awalan . (titik)

CONTOH SINTAK CLASS DI CSS

contoh sintak class di CSS


MULTIPLE CLASS

Nilai dari atribut class bisa menggunakan beberapa nilai, caranya kita bisa tambahkan pemisah menggunakan spasi



CONTOH SINTAK DI MULTIPLE CLASS

penggunaan multiple class di css

SELECTOR

  • Sebelumnya kita sudah tahu cara memilih elemen yang akan ditambahkan aturan di CSS, yaitu menggunakan tag, #id atau .class
  • Memilih elemen di CSS dinamakan Selector
  • Ada banyak jenis Selector, dan kita akan bahas tiap selector di materi masing-masing
  • Di materi ini kita akan bahas tentang simple selector
SIMPLE SELECTOR

Simple selector adalah selector untuk memilih elemen berdasarkan nama (tag), #id atau .class
Jika kita ingin membuat selector untuk beberapa element, kita bisa gunakan , (koma) sebagai pemisah

TYPE SELECTOR

Type Selector melakukan seleksi element berdasarkan tag html

tipe selector pada css

ID SELECTOR

ID Selector melakukan seleksi element berdasarkan ID
https://css-tricks.com/almanac/selectors/i/id/

contoh id selector di css


CLASS SELECTOR

Class Selector melakukan seleksi element berdasarkan nama class
https://css-tricks.com/almanac/selectors/c/class/ 

class selector di css

SELECTOR LIST

Selector list melakukan seleksi beberapa element sekaligus, menggunakan pemisah , (koma)
Gambar disamping artinya kita melakukan seleksi element untuk tag h1, h2, dan ID title

selector list di css


COMBINATOR SELECTOR
  • Combinator adalah sesuatu yang menjelaskan relasi antar selector
  • Terdapat 4 selector untuk combinator
  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)
DESCENDANT SELECTOR

Descendant Selector adalah selector untuk memilih element anak dari element yang dipilih
Gambar sebelah artinya kita memilih semua tag p yang terdapat di dalam elemen div

DESCENDANT SELECTOR DI CSS

praktek descendant selector di css


CHILD SELECTOR



ADJACENT SIBLING SELECTOR

  • Adjacent Sibling Selector digunakan untuk memilih element setelah element yang dipilih
  • Sibling (saudara) element harus memiliki parent element yang sama
  • Gambar disamping artinya memilih element p yang diletakkan setelah element div dimana p dan div memiliki parent yang sama
  • https://css-tricks.com/almanac/selectors/a/adjacent-sibling/





GENERAL SIBLING SELECTOR

  • General Sibling Selector digunakan untuk memilih seluruh element saudara dari element yang dipilih, dimana harus memiliki parent element yang sama
  • Contoh gambar disamping adalah memilih semua element p dari saudara element div, dimana div dan parent harus memiliki parent yang sama
  • https://css-tricks.com/almanac/selectors/g/general-sibling/ 

 

ATTRIBUTE SELECTORS
  • CSS juga mendukung selector menggunakan atribut yang terdapat di tag HTML
  • Terdapat banyak cara untuk menggunakan Attribute Selector

CSS [ATTRIBUTE] SELECTOR


 
CSS [ATTRIBUTE="VALUE"] SELECTOR



CSS [ATTRIBUTE~="VALUE"] SELECTOR





CSS [ATTRIBUTE | = "VALUE"] SELECTOR




CSS [ATTRIBUTE^="VALUE"] SELECTOR




CSS [ATTRIBUTE$="VALUE"] SELECTOR




CSS [ATTRIBUTE*="VALUE"] SELECTOR




ATTRIBUTE SELECTOR TANPA TAG




COLOR

HTML COLOR NAME
  • Sebelumnya kita pernah menggunakan color red, selain red, HTML mendukung banyak nama color
  • Kita bisa liat dihalaman web ini untuk daftar warna apa saja yang didukung oleh HTML
  • https://htmlcolorcodes.com/color-names/
KODE : COLOR NAME
 


HEX, RGB DAN HSL
KODE : COLOR

 


TEXT
  • CSS bisa digunakan untuk mengubah properties atau format untuk text
  • Contoh sebelumnya kita sudah menggunakan color untuk mengubah warna text
  • Selain color, masih banyak yang bisa kita ubah dari properties atau format untuk text

TEXT ALIGNMENT
TEXT DECORATION

TEXT TRANSFORMATION

TEXT SPACING

TEXT SHADOW

REFERENSI

FONT
  • Saat membuat tulisan, biasanya Web Browser akan menggunakan default font nya, tiap Web Browser memiliki default Font masing-masing
  • Saat membuat web, baiknya kita menggunakan font yang sama sehingga tampilan web kita konsisten
  • Kita bisa mengatur Font di halaman HTML menggunakan CSS dengan property font
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font

FONT FAMILY

FONT STYLE

FONT SIZE

GOOGLE FONT
  • Salah satu penyedia font gratis yang bisa kita gunakan adalah Google Font
  • Kisa bisa mencari font di Google Font, lalu menggunakan CSS untuk menambahkan font yang kita mau di halaman Web yang kita mau
  • https://fonts.google.com/
KODE : GOOGLE FONT


BACKGROUND

BACKGROUND COLOR
  • Background yang paling sederhana Background Color, yaitu mengubah background element menjadi color 
  • Sama seperti property color, background color juga mendukung format color HEX, RGB dan HSL
  • Kita bisa menggunakan property background-color untuk mengubah background menggunakan color
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

BOX MODEL
  • Saat menggunakan CSS, terdapat konsep bernama Box Model
  • Biasanya digunakan ketika kita ingin mengatur tata letak / layout pada element
  • Setiap element di HTML, memiliki Box yang terdiri dari content, padding, border dan margin

GAMBARAN BOX MODEL
  • Content adalah isi dari element
  • Padding adalah arena transparan antara content dan border
  • Border adalah kotak yang mengelilingi content
  • Margin adalah arena transparan paling luar setelah border

SIZE

PADDING

MARGIN

DEBUG DENGAN BROWSER
  • Salah satu cara saat kita ingin melihat Box Model pada halaman HTML yaitu dengan menggunakan Web Browser
  • Tiap Web Browser biasanya ada fitur untuk melihat detail dari informasi halaman HTML yang sedang dibuka
  • Contohnya di Google Chrome, kita bisa klik kanan element yang ingin kita lihat, lalu pilih menu Inspect Element

MIN DAN MAX SIZE
  • Saat menambahkan size pada element, kadang kita ingin menentukan minimal atau maksimal dari size element, hal ini untuk menjaga element tidak terlalu kecil atau tidak terlalu besar
  • Kita juga bisa mengaturnya menggunakan property di CSS
MIN SIZE
MAX SIZE

BORDER
BORDER DETAIL
BORDER RADIUS

OUTLINE

BACKGROUND IMAGE

GRADIENT

OPACITY

VALUE DAN UNIT
  • Saat kita menggunakan CSS, kita sering sekali menggunakan berbagai jenis value, dari mulai number, text, color name, rgb, image, dan lain-lain
  • Semua standarisasi dari CSS Value dan Unit sudah ditetapkan di spesifikasi berikut :
  • https://drafts.csswg.org/css-values/
LENGTH

WRITING MODE

OVERFLOW

PSEUDO-ELEMENTS SELECTOR
  • Pseudo-elements Selector adalah kata kunci untuk menambah selector ke bagian tertentu dari element yang terseleksi
  • Saat memilih pseudo-elements, kita harus gunakan pemisah tanda :: (titik dua sebanyak dua kali)
  • Ada banyak pseudo-elements, kita bisa lihat detailnya di halaman dokumentasinya :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements 
PSEUDO-CLASSES SELECTOR
  • Pseudo-classes Selector adalah kata kunci yang ditambahkan ke selector yang merepresentasikan state / keadaan tertentu dari element yang diseleksi
  • Untuk menambahkan pseudo-classes, kita bisa gunakan : (titik dua)
  • Kita bisa lihat daftar pseudo-classes yang tersedia di halaman dokumentasinya :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

LINK

LIST
  • Saat membuat daftar, kita sering menggunakan element list
  • CSS memiliki beberapa property yang bisa digunakan untuk mengubah List
CSS LIST

TABLE
  • Saat kita membuat element Table di HTML, kita akan banyak menggunakan Box Model
TABLE BORDER
TABLE SIZE

TABLE ALIGNMENT

FORM

CONTENT

COUNTER

FILTER

IMPORT
  • Sebelumnya, kita sudah tahu untuk menambahkan kode CSS dari external file, kita bisa menggunakan tag link
  • CSS juga memiliki kemampuan untuk mengambil kode CSS dari luar menggunakan At-Rule, dimana harus ditempatkan dibagian atas kode CSS
  • Kita bisa mengambil kode CSS dari external menggunakan rule @import
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@import

CASCADE
  • Saat kita menggunakan CSS, kita harus tahu konsep bernama Cascade
  • Cascade adalah logika bagaimana web browser mengumpulkan property CSS dari berbagai sumber sebelum diterapkan ke element yang dipilih
  • Web browser akan mengambil sumber property CSS dari tiga sumber, yaitu User Agent, Author dan User
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

USER AGENT STYLESHEET
  • User Agent atau browser, biasanya memiliki nilai awal untuk stylesheet
  • Tiap User Agent biasanya berbeda, oleh karena itu saat membuat CSS kita harus hati-hati dengan nilai awal User Agent, karena bisa berbeda untuk tiap browser
  • Salah satu contoh yang banyak dilakukan oleh programmer web adalah, melakukan reset ke nilai kosong
  • Contohnya seperti ini : https://github.com/necolas/normalize.css/blob/master/normalize.css

AUTHOR STYLESHEET
  • Saat membuat web, kadang biasanya kita tidak langsung membuat file CSS, biasanya kita akan menggunakan stylesheet buatan orang lain, contoh yang populer adalah Bootstrap atau TailwindCSS
  • https://getbootstrap.com/
  • https://tailwindcss.com/ 
  • Biasanya User akan melakukan import atau link untuk Author Stylesheet

USER STYLESHEET
  • User stylesheet adalah yang kita buat sendiri, biasanya dibuat untuk mengubah stylesheet yang sudah digunakan baik itu dari User Agent atau Author

CASCADE ORDER
  • Saat kita menggunakan sumber-sumber tadi untuk membuat CSS, Web Browser akan menggabungkan semua property CSS untuk element menggunakan urutan sebagai berikut
    • User Agent Stylesheet
    • Author Stylesheet
    • User Stylesheet
  • Jika ternyata kita membuat aturan yang sama di CSS, maka urutan posisi yang paling akhir yang akan digunakan

!IMPORTANT
  • Saat kita membuat aturan CSS, semua aturan akan mendapatkan prioritas normal
  • Jika kita ingin membuat sebuah aturan menjadi sangat penting, sehingga tidak boleh digantikan setelahnya oleh aturan lain, maka kita bisa menambahkan !important pada aturan tersebut
  • https://developer.mozilla.org/en-US/docs/Web/CSS/important

MASALAH DENGAN !IMPORTANT
  • Menggunakan !important sangat tidak flexible, karena artinya kita tidak bisa mengubah propertinya lagi
  • Alternatif lain yang lebih flexible adalah menggunakan @layer

@LAYER
  • @layer adalah fitur di dalam CSS Cascade, dimana kita bisa membuat layer (seperti tumpukan), dimana posisi layer bisa diurutkan sesuai dengan yang kita mau
  • Dengan menggunakan @layer, kita bisa menentukan mana yang lebih penting dan mana yang tidak begitu penting dengan mengubah posisi layer
  • Dengan begitu, kita bisa mengubah-ubah posisi, tanpa harus menggunakan !important lagi
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

MATERI SELANJUTNYA
  • CSS Layout
  • Javascript







Author Image

About Admin
Belajar, Bekerja, Berbagi, Beribadah...IT Consultan, Programmer, Analyst System, Network Enginer, Kursus dan Private Komputer, Internet Provider...info lebih lanjut ke trisno@tachyon.net.id

Related Posts:
at
Labels: , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)