CSS (Cascading Style Sheets) yaiku basa style sheet sing digunakake kanggo njlentrehake presentasi dokumen sing ditulis nganggo basa markup. Iki digunakake kanggo ngontrol tata letak, font, warna, lan aspek visual liyane saka kaca web.
CSS, utawa Cascading Style Sheets, minangka basa coding sing digunakake kanggo gaya lan format kaca web. Iki ngidini desainer web ngontrol tampilan teks, gambar, lan unsur liyane ing situs web, kalebu ukuran, warna, lan posisi ing kaca kasebut. Ing istilah sing luwih gampang, CSS nggawe situs web katon apik lan teratur.
CSS, utawa Cascading Style Sheets, minangka basa pamrograman sing digunakake kanggo njlèntrèhaké presentasi dokumen sing ditulis ing HTML utawa XML. CSS digunakake kanggo nemtokake gaya situs web bebarengan karo HTML lan minangka basa adhedhasar aturan sing ngidini sampeyan nemtokake aturan kanthi nemtokake klompok gaya sing kudu ditrapake kanggo unsur utawa klompok unsur tartamtu ing kaca web sampeyan.
CSS minangka alat sing kuat sing bisa ngontrol tata letak sawetara kaca web bebarengan, ngirit akeh karya. Bisa ngapusi warna teks, kothak, lan unsur liyane kanggo nggawe situs web sing apik lan fungsional. CSS njlèntrèhaké cara unsur kudu ditampilake ing layar, ing kertas, ing wicara, utawa ing media liyane, dadi bagean penting saka pangembangan web.
Apa sampeyan pamula utawa pangembang web sing berpengalaman, ngerti CSS penting banget kanggo nggawe situs web sing apik banget lan ramah pangguna. Ing artikel iki, kita bakal nliti luwih jero babagan apa CSS, cara kerjane, lan macem-macem jinis CSS. Kita uga bakal njelajah sawetara praktik paling apik kanggo nggunakake CSS kanggo nggawe situs web sing nggumunake sing fungsional lan apik banget.
Apa sing diarani CSS?
CSS utawa Cascading Style Sheets minangka basa pamrograman sing digunakake kanggo njlèntrèhaké presentasi dokumen sing ditulis ing HTML utawa XML. Iki digunakake kanggo gaya unsur HTML lan ngontrol tata letak sawetara kaca web bebarengan.
Definition
CSS minangka basa adhedhasar aturan sing nemtokake aturan babagan carane unsur kudu ditampilake ing layar, kertas, wicara, utawa media liyane. Iki ngidini pangembang kanggo misahake presentasi kaca web saka isine, supaya luwih gampang kanggo njaga lan nganyari situs web.
Sajarah
CSS pisanan dikenalaké ing taun 1996 lan wiwit iku ngalami sawetara nganyari lan revisi. Iki dikembangake kanggo ngatasi watesan HTML babagan gaya lan tata letak. Sadurunge CSS, HTML digunakake kanggo nemtokake struktur kaca web lan presentasi. Nanging, iki nggawe angel kanggo ngganti tata letak utawa desain situs web.
pentinge
CSS nduweni peran penting ing pangembangan web amarga ngidini pangembang nggawe situs web sing narik kawigaten lan responsif. Iki ngidini kontrol sing luwih gedhe babagan presentasi situs web lan ngidini pangembang nggawe tampilan lan rasa sing konsisten ing pirang-pirang kaca web.
Kesimpulane, CSS minangka alat penting kanggo pangembang web kanggo nggawe situs web sing narik kawigaten lan responsif. Iki misahake presentasi situs web saka konten lan ngidini pangembang nggawe tampilan lan rasa sing konsisten ing pirang-pirang kaca web.
Dasar CSS
CSS minangka basa gaya sing kuat sing bisa digunakake kanggo ngowahi format tata letak kaca web. Ing bagean iki, kita bakal nyakup sawetara konsep dhasar CSS, kalebu sintaksis, pamilih, properti, lan nilai.
Sintaks
CSS minangka basa adhedhasar aturan sing nggunakake sakumpulan aturan kanggo nemtokake cara unsur HTML kudu ditampilake ing kaca web. Aturan CSS kasusun saka pamilih lan blok deklarasi. Pamilih nuding unsur HTML kanggo gaya, dene blok deklarasi ngemot siji utawa luwih deklarasi sing dipisahake karo titik koma. Saben deklarasi kalebu jeneng properti CSS lan nilai, dipisahake karo titik titik.
Pamilih
Pamilih digunakake kanggo ngarahake unsur HTML tartamtu ing kaca web. Ana sawetara jinis pamilih, kalebu pamilih unsur, pamilih kelas, pamilih ID, lan pamilih atribut. Pamilih unsur ngarahake unsur HTML tartamtu, dene pamilih kelas ngarahake unsur kanthi atribut kelas tartamtu. Pemilih ID target unsur kanthi atribut ID tartamtu, dene pamilih atribut target unsur kanthi atribut tartamtu.
Properties
Properti CSS digunakake kanggo ngontrol tampilan visual unsur HTML ing kaca web. Ana akeh properti CSS sing kasedhiya, kalebu warna, ukuran font, werna latar mburi, lan margin, lan liya-liyane. Properti CSS bisa disetel menyang nilai tartamtu, kayata werna utawa ukuran font, kanggo ngontrol carane unsur ditampilake.
Nilai
Nilai digunakake kanggo nyetel nilai tartamtu saka properti CSS. Contone, properti werna bisa disetel menyang nilai werna tartamtu, kayata abang, ijo, utawa biru. Properti liyane, kayata ukuran font, bisa disetel menyang nilai tartamtu, kayata 12px utawa 16px.
Aturan lan Precedence
Aturan CSS digunakake kanggo nyetel gaya kanggo unsur HTML tartamtu ing kaca web. Nalika sawetara aturan ditrapake kanggo unsur sing padha, aturan kanthi spesifik paling dhuwur lan sing paling anyar ditrapake bakal diutamakake. Ing sawetara kasus, bisa uga kudu nggunakake tembung kunci !penting kanggo ngatasi aturan liyane lan mesthekake yen gaya tartamtu ditrapake.
Kesimpulane, CSS minangka basa gaya sing kuat sing bisa digunakake kanggo ngowahi tata letak kaca web. Kanthi mangerteni dhasar sintaksis, pamilih, properti, lan nilai CSS, sampeyan bisa nggawe kaca web sing apik lan responsif sing gampang dilayari lan narik kawigaten visual.
Versi CSS
CSS wis berkembang sajrone pirang-pirang taun, kanthi versi anyar dikenalake kanggo nyukupi kabutuhan pangembang web sing ganti. Saiki, ana papat versi utama CSS: CSS1, CSS2.1, CSS3, lan CSS4.
CSS1
CSS1 minangka versi pisanan saka CSS, dirilis ing taun 1996. Iki nyedhiyakake pilihan gaya dhasar kayata werna font, ukuran, lan gaya. Uga ngidini nggawe tata letak sing prasaja kanthi nemtokake posisi unsur ing sawijining kaca. CSS1 minangka dandan sing signifikan tinimbang cara nggawe kaca web sadurunge, sing nggunakake tag HTML kanggo nemtokake tampilan unsur.
CSS2.1
CSS2.1 dirilis ing taun 1998 lan nambah sawetara fitur anyar, kalebu dhukungan kanggo jinis media, kayata print lan layar, lan kemampuan kanggo nemtokake urutan unsur sing kudu ditampilake. Iki uga ngenalake konsep pamilih, sing ngidini pangembang ngarahake unsur tartamtu ing sawijining kaca lan ngetrapake gaya kasebut.
CSS3
CSS3 dikenalaké ing taun 1999 lan minangka versi CSS paling anyar. Iki nambahake macem-macem fitur anyar, kalebu dhukungan kanggo animasi, transisi, lan gradien. CSS3 uga ngenalake opsi tata letak anyar kayata flexbox lan grid, sing ngidini tata letak sing luwih rumit bisa digawe kanthi kode sing kurang. CSS3 isih akeh digunakake saiki lan wis dadi standar kanggo pangembangan web modern.
CSS4
CSS4 saiki lagi dikembangake lan samesthine bakal dirilis ing mangsa ngarep. Bakal ngenalake sawetara fitur anyar, kalebu dhukungan kanggo variabel, sing bakal ngidini pangembang nemtokake lan nggunakake maneh nilai ing lembar gaya. CSS4 uga bakal kalebu opsi tata letak anyar, kayata pitakon kontainer, sing bakal ngidini pangembang nggawe desain responsif sing cocog karo ukuran wadah sing diselehake.
Kesimpulane, CSS wis adoh banget wiwit diwiwiti, kanthi versi anyar sing dienalake kanggo nyukupi kabutuhan pangembang web sing ganti. Saben versi wis nambah fitur lan kabisan anyar, nggawe luwih gampang kanggo nggawe tata lan gaya Komplek. Kanthi rilis CSS4 ing cakrawala, masa depan pangembangan web katon cerah, kanthi alat lan pilihan sing luwih kuat sing kasedhiya kanggo pangembang.
CSS lan HTML
CSS lan HTML minangka rong basa kapisah sing digunakake kanggo nggawe kaca web. HTML minangka basa markup sing digunakake kanggo struktur isi ing kaca web, nalika CSS digunakake kanggo gaya lan format isi. Ing bagean iki, kita bakal njelajah carane CSS lan HTML bisa bebarengan kanggo nggawe kaca web visual narik kawigaten.
Elemen HTML
Unsur HTML minangka pamblokiran bangunan kaca web. Iki minangka tag sing nemtokake struktur lan isi kaca web. Unsur HTML bisa digunakake kanggo nggawe judhul, paragraf, dhaptar, gambar, lan liya-liyane. Saben unsur HTML nduweni set properti dhewe sing bisa ditata nganggo CSS.
Basa Markup
HTML minangka basa markup sing nggunakake tag kanggo nemtokake struktur kaca web. Tag digunakake kanggo nyakup isi lan menehi makna. Contone, ing <h1> tag digunakake kanggo nemtokake judhul tingkat paling dhuwur, dene tag <p> tag digunakake kanggo nemtokake paragraf. HTML minangka basa kuat sing bisa digunakake kanggo nggawe kaca web sing rumit.
Links
Tautan minangka bagéyan penting saka sembarang kaca web. Padha ngidini pangguna kanggo navigasi antarane kaca lan ngakses sumber daya eksternal. Link digawe nggunakake <a> tag lan bisa ditata nganggo CSS. Tautan uga bisa digunakake kanggo nggawe tetenger ing kaca web, supaya pangguna bisa cepet menyang bagean tartamtu saka kaca kasebut.
Sakabèhé, CSS lan HTML bisa bebarengan kanggo nggawe kaca web visual narik kawigaten. HTML nemtokake struktur lan isi kaca web, nalika CSS digunakake kanggo gaya lan format isi kasebut. Kanthi nggunakake HTML lan CSS bebarengan, pangembang web bisa nggawe situs web sing apik lan fungsional sing gampang digunakake lan navigasi.
CSS lan Desain Web
CSS nduweni peran penting ing desain web. Iki ngidini pangembang ngontrol tampilan visual kaca web lan njamin konsistensi ing pirang-pirang kaca. Ing bagean iki, kita bakal njelajah kepiye CSS mengaruhi macem-macem aspek desain web, kalebu tata letak, tipografi, warna, lan gambar.
Layout
CSS ngidini pangembang web ngontrol tata letak kaca web. Kanthi nggunakake CSS, pangembang bisa nyetel macem-macem unsur ing kaca web, ngontrol ukuran unsur kasebut, lan mesthekake yen bakal ditampilake kanthi konsisten ing macem-macem piranti. CSS uga ngidini pangembang nggawe desain responsif sing adaptasi karo ukuran layar sing beda-beda, supaya kaca web bisa diakses ing kabeh piranti.
typography
CSS nyedhiyakake pangembang kanthi macem-macem opsi kanggo ngontrol tipografi kaca web. Kanthi CSS, pangembang bisa ngontrol kulawarga font, ukuran font, dhuwur baris, lan spasi huruf teks ing kaca web. Dheweke uga bisa ngontrol keselarasan teks lan jarak antarane unsur sing beda ing kaca web.
Werna
CSS ngidini pangembang ngontrol werna sing digunakake ing kaca web. Kanthi CSS, pangembang bisa nyetel werna latar mburi kaca web, ngganti werna teks, lan ngontrol warna unsur sing beda ing kaca web. CSS uga nyedhiyakake pangembang kanthi kemampuan kanggo nggawe gradien lan efek warna kompleks liyane.
images
CSS ngidini pangembang ngontrol tampilan gambar ing kaca web. Kanthi CSS, pangembang bisa ngontrol ukuran gambar, nyetel posisi gambar ing kaca web, lan ngontrol opacity gambar. CSS uga nyedhiyakake pangembang kanthi kemampuan kanggo nggawe efek gambar sing rumit, kayata gulung bayangan lan wates.
Kesimpulane, CSS minangka alat penting kanggo desain web. Iki ngidini pangembang kanggo ngontrol tata letak, tipografi, warna, lan gambar sing digunakake ing kaca web, kanggo mesthekake yen kaca web katon apik lan bisa diakses ing kabeh piranti.
CSS lan Pangembangan Web
CSS, utawa Cascading Style Sheets, minangka alat penting kanggo pangembang web. Iki ngidini dheweke ngontrol presentasi dokumen HTML lan XML, kalebu tata letak, warna, font, lan liya-liyane.
CSS njaba
CSS eksternal minangka file kapisah sing ngemot kabeh gaya sing digunakake ing situs web. Berkas iki disambung menyang dokumen HTML nggunakake file tag. CSS eksternal minangka cara sing apik kanggo njaga presentasi kapisah saka isi, supaya luwih gampang kanggo njaga lan nganyari situs web. Uga ngidini konsistensi ing pirang-pirang kaca ing situs web.
CSS internal
CSS internal ditetepake ing dokumen HTML nggunakake tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.
CSS Inline
Inline CSS ditetepake ing unsur HTML nggunakake atribut gaya. Iku migunani yen sampeyan pengin nggunakake gaya kanggo unsur tartamtu. Nanging, iku bisa nggawe dokumen HTML cluttered lan hard kanggo maca. Ora dianjurake kanggo nggunakake CSS inline kanggo gaya skala gedhe.
Pitakon Media
Pitakonan media digunakake kanggo ngetrapake gaya beda adhedhasar ukuran layar piranti. Iki ngidini situs web responsif lan adaptasi karo piranti sing beda-beda, kayata telpon, tablet, lan desktop. Pitakonan media bisa ditetepake ing file CSS eksternal utawa ing dokumen HTML.
Kesimpulane, CSS minangka alat penting kanggo pangembang web. Iki ngidini pamisahan presentasi lan konten, dadi luwih gampang kanggo njaga lan nganyari situs web. CSS eksternal dianjurake kanggo gaya skala gedhe, dene CSS internal lan inline migunani kanggo gaya skala cilik. Pitakonan media ngidini situs web dadi responsif lan adaptasi karo piranti sing beda-beda.
Kaluwihan CSS
CSS minangka alat sing kuat sing ngidini pangembang web nggawe kaca web sing apik lan konsisten. Mangkene sawetara kaluwihan nggunakake CSS:
kacepetan
Salah sawijining kaluwihan utama CSS yaiku kacepetan. CSS ngidini pangembang misahake desain lan tata letak kaca web saka isine. Pemisahan iki bisa nyuda wektu loading kaca web kanthi signifikan, amarga browser ora kudu ngundhuh macem-macem lembar gaya kanggo saben kaca. Nanging, browser nyimpen lembar gaya, sing bisa digunakake ing pirang-pirang kaca, nyebabake wektu mbukak kaca luwih cepet.
Konsistensi
CSS mbantu pangembang nggawe desain sing konsisten ing pirang-pirang kaca web. Kanthi nggunakake lembar gaya siji, pangembang bisa mesthekake yen kabeh kaca ing situs web nduweni tampilan lan rasa sing konsisten. Konsistensi iki bisa mbantu nambah pengalaman pangguna, amarga pangguna bakal bisa navigasi situs web kanthi luwih gampang lan nemokake informasi sing dibutuhake kanthi cepet.
maintenance
CSS nggawe luwih gampang kanggo njaga lan nganyari situs web. Kanthi misahake desain lan tata letak situs web saka isi, pangembang bisa nggawe owah-owahan ing desain tanpa mengaruhi isi. Iki tegese yen owah-owahan kudu digawe kanggo desain situs web, bisa ditindakake kanthi cepet lan gampang tanpa kudu nulis ulang kabeh situs web.
CSS uga nggampangake owah-owahan ing tata letak situs web. Kanthi nggunakake CSS, pangembang bisa nggawe gaya sing bisa digunakake maneh sing bisa ditrapake ing pirang-pirang unsur ing kaca web. Iki tegese yen owah-owahan kudu ditindakake ing tata letak kaca web, bisa ditindakake kanthi cepet lan gampang kanthi nganyari lembar gaya CSS.
Kesimpulane, CSS minangka alat sing kuat sing menehi akeh kaluwihan kanggo pangembang web. Kanthi nggunakake CSS, pangembang bisa nggawe kaca web sing apik banget lan konsisten sing mbukak kanthi cepet lan gampang dijaga lan dianyari.
Referensi CSS
Nalika nggarap CSS, penting kanggo duwe referensi sing bisa dipercaya kanggo konsultasi nalika sampeyan nemoni properti utawa sintaks sing ora dingerteni. Untunge, ana akeh sumber daya sing kasedhiya kanggo mbantu sampeyan ngerti lan nggunakake CSS kanthi efektif.
W3C
World Wide Web Consortium (W3C) minangka organisasi utama sing tanggung jawab kanggo ngembangake lan njaga standar web, kalebu CSS. Situs web kasebut nawakake referensi CSS lengkap sing nyakup kabeh aspek basa, saka sintaksis dhasar nganti teknik tata letak sing luwih maju. Referensi kasebut diatur miturut properti lan kalebu conto carane nggunakake saben siji.
Saliyane referensi, situs web W3C uga nyedhiyakake akeh sumber daya liyane kanggo sinau lan nggunakake CSS, kalebu tutorial, spesifikasi, lan praktik paling apik. Yen sampeyan serius babagan nguwasani CSS, situs web W3C minangka sumber daya sing penting.
modul
CSS minangka basa modular, tegese iku digawe saka modul kapisah sing bisa digabungake kanggo nggawe lembar gaya lengkap. Saben modul fokus ing area tartamtu saka CSS, kayata tata letak, tipografi, utawa werna. Kanthi ngilangi CSS dadi modul, luwih gampang dingerteni lan digunakake kanthi efektif.
Situs web W3C nyedhiyakake dhaptar kabeh modul CSS, bebarengan karo pranala menyang spesifikasi. Sawetara modul sing paling penting kalebu:
- CSS Selectors: Nemtokake sintaks kanggo milih unsur ing dokumen.
- Model Kotak CSS: Nerangake carane unsur ditata ing kaca.
- CSS Grid Layout: Nyedhiyakake sistem sing kuat kanggo nggawe tata letak sing rumit.
- CSS Transforms: Ngidini sampeyan ngowahi wujud, ukuran, lan posisi unsur.
- Animasi CSS: Ngidini sampeyan nggawe animasi lan transisi nggunakake CSS.
Kanthi familiarize dhewe karo macem-macem modul CSS, sampeyan bisa dadi pangembang CSS sing luwih trampil lan nggawe desain sing luwih maju lan canggih.
Kesimpulane, duwe referensi CSS sing dipercaya penting banget kanggo pangembang sing nggarap CSS. Situs web W3C nyedhiyakake referensi ekstensif, bebarengan karo akeh sumber daya liyane, kanggo mbantu sampeyan nguasai CSS. Kajaba iku, ngerteni macem-macem modul CSS bisa mbantu nggawe desain sing luwih maju lan canggih.
Animasi CSS
Animasi CSS minangka alat sing kuat sing ngidini pangembang nggawe pengalaman pangguna sing dinamis lan nyenengake ing situs web. Animasi bisa digunakake kanggo narik kawigaten marang unsur tartamtu ing sawijining kaca, menehi umpan balik marang pangguna, utawa mung nambah minat visual.
Kanggo nggawe animasi CSS, sampeyan kudu milih unsur sing pengin dianimasikan lan banjur nemtokake animasi nggunakake properti CSS. Ing animation property digunakake kanggo netepake animasi, lan wis sawetara sub-properti sing ngijini sampeyan kanggo ngontrol wektu, durasi, lan rincian liyane saka animasi.
Siji bab sing penting kanggo dicathet yaiku animasi bisa dadi sumber daya intensif, mula penting kanggo nggunakake kanthi ati-ati lan ati-ati. Animasi kudu nambah pengalaman pangguna, ora nyuda, mula penting kanggo nyoba kanthi tliti lan nimbang kepiye pengaruhe kinerja situs web sampeyan.
Ing ngisor iki sawetara properti CSS utama sing bisa digunakake kanggo nggawe animasi:
animasi-jeneng
Properti iki nemtokake jeneng animasi sing pengin ditrapake kanggo unsur. Sampeyan bisa nemtokake macem-macem animasi lan aplikasi menyang macem-macem unsur ing kaca.
animasi-durasi
Properti iki nemtokake suwene wektu animasi bakal rampung. Sampeyan bisa nemtokake durasi ing detik utawa milidetik.
animasi-timing-fungsi
Properti iki nemtokake fungsi wektu sing bakal digunakake kanggo ngontrol kacepetan animasi. Ana sawetara fungsi wektu sing wis ditemtokake sing bisa digunakake, kayata linear, ease-in, Lan ease-out, utawa sampeyan bisa nggawe fungsi wektu khusus sampeyan dhewe.
animasi-tundha
Properti iki nemtokake jumlah wektu sing bakal ditindakake sadurunge animasi diwiwiti. Iki bisa migunani yen sampeyan pengin stagger wektu sawetara animasi ing kaca.
animasi-pengulangan-count
Properti iki nemtokake kaping pirang-pirang animasi bakal diulang. Sampeyan bisa nemtokake nomer tartamtu saka iterasi, utawa sampeyan bisa nggunakake nilai infinite kanggo nggawe animasi sing puteran tanpa wates.
animasi-arah
Properti iki nemtokake arah sing bakal diputer animasi. Sampeyan bisa nemtokake normal kanggo animasi maju, reverse kanggo animasi mundur, utawa alternate kanggo sulih antarane animasi maju lan mundur.
animasi-isi-mode
Properti iki nemtokake cara unsur sing dianimasi kudu ditata sadurunge lan sawise animasi. Sampeyan bisa nemtokake none supaya gaya unsur ora diganti, forwards kanggo njaga gaya unsur ing mburi animasi, utawa backwards kanggo aplikasi gaya unsur ing wiwitan animasi.
animasi-muter-negara
Properti iki nemtokake manawa animasi lagi diputer utawa ngaso. Sampeyan bisa nggunakake nilai paused kanggo ngaso animasi, utawa running kanggo miwiti utawa nerusake.
Kesimpulane, Animasi CSS minangka alat sing kuat sing bisa digunakake kanggo nggawe pengalaman pangguna sing dinamis lan menarik ing situs web sampeyan. Nanging, penting kanggo nggunakake kanthi ati-ati lan kanthi ati-ati, amarga bisa dadi intensif sumber daya lan mengaruhi kinerja situs web sampeyan. Kanthi mangerteni sifat CSS kunci sing digunakake kanggo nggawe animasi, sampeyan bisa nggawe animasi sing nambah pengalaman pangguna lan nambah minat visual menyang situs web sampeyan.
Waca Liyane
CSS (Cascading Style Sheets) minangka basa sing digunakake kanggo njlèntrèhaké presentasi basa markup kaya HTML lan XML. Iki digunakake kanggo gaya lan tata kaca web kanthi ngganti font, werna, ukuran, lan spasi isi, dibagi dadi pirang-pirang kolom, utawa nambah animasi lan fitur dekoratif liyane. CSS nyimpen akeh karya lan bisa ngontrol tata letak sawetara kaca web bebarengan. (sumber: Dokumen Web MDN, W3Schools)
Katentuan Pangembang Situs Web sing gegandhengan