Back to the topics list

cascading style sheets

Cascading Style Sheets (CSS) sa Web Development

Ang Cascading Style Sheets, o CSS, ay isang wika na nagsasabi sa isang webpage kung paano tumingin. Nagdaragdag ang CSS ng kulay, istilo, at layout sa payak na istraktura ng isang website. Tulad ng pagpili mo ng iyong mga damit upang maging maganda ang pakiramdam at magmukhang maayos, tinutulungan ng CSS ang isang webpage na magbihis at magmukhang kaakit-akit. Sa web development, gumagamit kami ng CSS para baguhin ang kulay, laki, at posisyon ng text at mga kahon sa page. Ipakikilala sa iyo ng araling ito ang mga pangunahing kaalaman sa CSS sa simpleng wika. Malalaman natin kung ano ang CSS, bakit ito mahalaga, at kung paano ito gumagana sa HTML.

Panimula sa CSS

Ang CSS ay kumakatawan sa Cascading Style Sheets. Ito ay isang espesyal na wika na ginagamit sa estilo ng mga webpage. Isipin ang CSS bilang pintura at dekorasyon para sa isang gusali. Ang gusali ay gawa sa HTML, at ginagawang maganda ng CSS. Gamit ang CSS, maaari mong baguhin ang kulay ng background, mga estilo ng font, at espasyo sa paligid ng mga elemento sa iyong webpage. Ang CSS ay isang tool na tumutulong sa mga web designer na gawing mas maganda at mas masaya ang mga website.

Isipin na nagpapakulay ka ng isang guhit. Ang mga linya ng pagguhit ay tulad ng pangunahing istraktura ng isang website. Ang CSS ay tulad ng mga krayola at marker na nagdaragdag ng buhay sa pagguhit. Sa ilang simpleng panuntunan, maaari mong baguhin ang iyong buong drawing mula sa plain hanggang sa makulay!

Bakit Namin Gumagamit ng CSS

Ginagamit ang CSS upang gawing kaakit-akit at madaling gamitin ang mga website. Pinapanatili nitong hiwalay ang istilo sa nilalaman. Nangangahulugan ito na ang mga salita at larawan sa pahina (na ibinigay ng HTML) ay nananatiling pareho, habang kinokontrol ng CSS ang hitsura ng mga ito. Kapag na-update mo ang istilo, hindi mo kailangang baguhin ang nilalaman. Ang paghihiwalay na ito ay tumutulong sa mga web developer na gumana nang mas mabilis at ginagawang mas magandang bisitahin ang mga site.

Isipin ang CSS tulad ng outfit na pipiliin mo. Kung iba ang suot mo, iba ang itsura mo, pero pareho pa rin kayong tao. Binabago ng CSS ang hitsura ng isang website nang hindi binabago ang impormasyon dito. Ginagawa nitong simple ang pag-update ng disenyo ng isang buong website sa pamamagitan ng pag-edit lamang ng isang CSS file.

Paano Gumagana ang CSS

Gumagana ang CSS sa HTML. Ang HTML ay ang pundasyon na nagtatakda kung saan napupunta ang mga bagay sa isang webpage. Pumasok ang CSS upang magdagdag ng mga kulay, font, at istilo. Kapag nag-load ang isang browser ng webpage, bubuo muna ito ng istraktura gamit ang HTML at pagkatapos ay ilalapat ang mga istilong tinukoy sa CSS.

Ang CSS ay isinulat bilang isang hanay ng mga panuntunan. Ang bawat panuntunan ay may dalawang bahagi: isang tagapili at isang bloke ng deklarasyon. Sinasabi ng tagapili sa browser kung aling elemento ng HTML ang i-istilo. Ang bloke ng deklarasyon ay naglalaman ng isa o higit pang mga deklarasyon. Ang bawat deklarasyon ay may ari-arian at halaga. Ang property ang gusto mong baguhin, at ang halaga ang nagsasabi kung paano ito babaguhin.

Halimbawa, para itakda ang kulay ng background ng page sa mapusyaw na asul, maaari kang magsulat ng panuntunang ganito ang hitsura:

 <code>katawan {
    kulay ng background: lightblue;
}</code>

Binabago ng simpleng panuntunang ito ang background ng buong page.

Pangunahing Syntax ng CSS

Ang isang pangunahing panuntunan ng CSS ay sumusunod sa isang simpleng pattern. Ipinapakita nito ang tagapili at isang bloke ng mga katangian at halaga. Ang pattern ay ganito ang hitsura:

 <code>selector {
    ari-arian: halaga;
}</code>

Dito, pinipili ng tagapili kung aling elemento ng HTML ang ita-target. Ang property ang gusto mong baguhin, at ang halaga ay kung paano mo ito gustong baguhin.

Halimbawa, kung gusto mong maging asul ang lahat ng teksto ng talata, sumulat ka:

 <code>p {
    kulay: asul;
}</code>

Sinasabi ng panuntunang ito sa web browser na ang bawat <p> (talata) na elemento ay dapat may asul na teksto.

Mga Tagapili ng CSS

Hinahayaan ka ng mga tagapili ng CSS na piliin kung aling mga elemento sa iyong webpage ang maaapektuhan ng mga panuntunan sa istilo. Mayroong ilang mga uri ng mga tagapili, at ang bawat isa ay gumagana nang medyo naiiba.

• Type Selector: Tina-target ng selector na ito ang lahat ng elemento ng isang partikular na uri. Halimbawa, pinipili ng <code>p {}</code> ang bawat talata sa pahina.
• Tagapili ng Klase: Tina-target nito ang mga elemento na may partikular na katangian ng klase. Sa iyong HTML, nagsusulat ka ng <code><p class="greeting"></code> at sa CSS ay tina-target mo ito ng <code>.greeting {}</code>.
• ID Selector: Ito ay ginagamit para sa isang natatanging elemento sa page. Maaaring may ID attribute ang isang elemento gaya ng <code><h1 id="header"></code>. Sa CSS, maaari mong i-istilo ang elementong iyon gamit ang <code>#header {}</code>.

Ang iba't ibang tagapili na ito ay nagbibigay sa iyo ng maraming kapangyarihan upang mag-istilo ng mga partikular na bahagi ng iyong webpage. Nagbibigay-daan sa iyo ang mga ito na i-target ang mga elemento nang tumpak at magpasya kung ano ang hitsura ng mga ito.

Mga Katangian at Halaga ng CSS

Nagbibigay ang CSS ng maraming iba't ibang katangian na maaari mong gamitin upang i-istilo ang iyong webpage. Hinahayaan ka ng bawat property na baguhin ang isang partikular na aspeto ng hitsura ng isang elemento. Ang ilang mga karaniwang katangian ay:

• kulay: Itinatakda ang kulay ng teksto.
• background-color: Itinatakda ang kulay ng background ng isang elemento.
• font-size: Binabago ang laki ng text.
• margin: Nagdaragdag ng espasyo sa labas ng isang elemento.
• padding: Nagdaragdag ng espasyo sa loob ng isang elemento, sa paligid ng nilalaman.

Ang bawat CSS property ay sinusundan ng isang value. Halimbawa, upang bigyan ang teksto ng pulang kulay, maaari mong isulat ang:

 <code>p {
    kulay: pula;
}</code>

Ginagawa ng simpleng panuntunang ito na ang lahat ng talata ay may pulang teksto. Kinokontrol ng kulay ng property kung paano lumalabas ang text at ang halagang pula ang nagsasabi dito kung anong kulay ang dapat.

Ang Cascade at Inheritance sa CSS

Ang salitang "cascading" sa CSS ay nangangahulugan na ang mga istilo ay maaaring dumaloy mula sa isang panuntunan patungo sa isa pa. Kung maaaring ilapat ang dalawang panuntunan sa parehong elemento, maaaring magpasya ang order kung alin ang mananalo. Ito ay katulad ng pagsasalansan ng mga bloke kung saan ang isang bloke kung minsan ay sumasaklaw sa bahagi ng isa pa.

Ang isang karaniwang panuntunan ay ang mga istilong nakasulat nang direkta sa loob ng isang HTML na elemento (tinatawag na mga inline na istilo) ay mag-o-override sa mga istilo sa iyong CSS file. Ang isa pang panuntunan ay kung ang isang elemento ng magulang ay naka-istilo, ang mga elemento ng bata nito ay maaaring magmana ng istilong iyon maliban kung sasabihin sa kanila kung hindi.

Halimbawa, kung itinakda mo ang kulay ng text ng isang <div> sa berde, kung gayon ang teksto sa loob ng <div> ay madalas ding lalabas na berde dahil sa pagmamana. Nakakatulong ito na mapanatili ang pare-parehong disenyo sa isang webpage.

Mga Kulay at Font ng CSS

Sa CSS, maaari mong baguhin ang mga kulay sa maraming paraan. Maaari kang gumamit ng mga karaniwang pangalan ng kulay tulad ng pula , asul , at berde . Maaari ka ring gumamit ng mga hexadecimal code gaya ng <code>#FF0000</code> para sa pula, o mga RGB value tulad ng <code>rgb(255, 0, 0)</code>.

Ang mga font ay isa pang mahalagang bahagi ng CSS. Ang isang font ay tulad ng estilo ng sulat-kamay na pinili mo sa isang notebook. Sa CSS, maaari mong baguhin ang pamilya ng font, laki, timbang, at istilo. Halimbawa, kung gusto mong lumabas ang iyong mga talata sa Arial, maaari mong gamitin ang:

 <code>p {
    font-family: Arial, sans-serif;
}</code>

Ang panuntunang ito ay nagsasabi sa browser na ipakita ang teksto sa Arial font kung ito ay magagamit at gumamit ng isa pang katulad na font kung ito ay hindi.

Ang pagpapalit ng mga kulay at font gamit ang CSS ay ginagawang mas madaling basahin ang teksto at mas kawili-wiling tingnan ang iyong webpage.

Modelo ng CSS Box

Ang Modelo ng CSS Box ay isang paraan upang maunawaan kung paano nakaayos ang iba't ibang bahagi ng isang elemento sa isang pahina. Ang bawat elemento ay parang isang kahon. Ang modelo ng kahon ay may apat na bahagi:

• Nilalaman: Ito ang lugar kung nasaan ang iyong teksto at mga larawan.
• Padding: Ito ang espasyo sa paligid ng nilalaman sa loob ng kahon.
• Border: Ito ang linyang umiikot sa padding at content.
• Margin: Ito ang espasyo sa labas ng hangganan na naghihiwalay sa elemento mula sa iba pang elemento.

Isipin ang isang larawan. Ang larawan mismo ang nilalaman. Ang banig na nakapaligid sa litrato ay parang padding. Ang frame na humahawak sa lahat ng ito ay ang hangganan. At ang espasyo sa paligid ng frame ay ang margin. Gamit ang modelong ito, maaari mong tiyakin na ang lahat ng bahagi ng iyong disenyo ay may tamang espasyo at balanse.

CSS Layout at Positioning

Ang CSS ay hindi lamang tungkol sa mga kulay at font; tinutulungan ka rin nitong ayusin ang mga elemento sa isang webpage. Ito ay tinatawag na layout at positioning. Sa CSS, maaari kang magpasya kung saan lalabas ang bawat elemento sa page.

Mayroong ilang mga paraan upang kontrolin ang layout ng isang webpage, kabilang ang:

• Display: Tinutukoy ng property na ito kung paano lumilitaw ang isang elemento sa layout. Halimbawa, pinahihintulutan ng <code>display: block;</code> ang isang elemento na magkaroon ng sarili nitong linya, habang pinapayagan ng <code>display: inline;</code> ang mga elemento na nasa parehong linya.
• Posisyon: Itinatakda ng property na ito ang uri ng paraan ng pagpoposisyon na ginagamit para sa isang elemento. Ang mga halaga ay maaaring static , relative , absolute , o fixed . Halimbawa, ang <code>position: relative;</code> ay naglilipat ng isang elemento na nauugnay sa normal na posisyon nito.
• Flexbox: Ang Flexbox ay isang modernong paraan upang ayusin ang mga item sa mga row o column. Pinapadali nito ang pag-align ng mga elemento.

Ang paggamit ng mga diskarte sa layout na ito ay parang pag-aayos ng mga laruan sa isang istante. Ikaw ang magpapasya kung saan mapupunta ang bawat laruan upang silang lahat ay magkaroon ng sapat na espasyo at magmukhang maayos. Ginagawa nitong mas organisado at kaakit-akit ang iyong webpage.

Halimbawa CSS Code

Narito ang isang halimbawa kung paano gumagana ang HTML at CSS nang magkasama. Ang sample na code na ito ay nagpapakita ng isang simpleng webpage na may ilang estilo:

 <code><!DOCTYPE html>
<html>
<ulo>
  <style>
    katawan {
      kulay ng background: mapusyaw na asul;
    }
    h1 {
      kulay: navy;
      laki ng font: 24px;
    }
    p {
      kulay: berde;
      laki ng font: 18px;
    }
  </style>
</head>
<katawan>
  <h1>Aking Unang Webpage</h1>
  <p>Ito ay isang simpleng webpage na naka-istilo gamit ang CSS.</p>
</body>
</html></code>

Lumilikha ang code na ito ng isang webpage na may mapusyaw na asul na kulay ng background. Ang teksto ng header ay navy at ang teksto ng talata ay berde. Ipinapakita ng CSS sa loob ng tag na <code><style></code> kung paano isinusulat at inilalapat ang mga panuntunan.

Paano I-link ang CSS sa HTML

Maaari kang magdagdag ng CSS sa iyong HTML sa tatlong pangunahing paraan. Ang bawat pamamaraan ay may sariling paggamit depende sa sitwasyon:

• Inline na CSS: Direktang isinulat ang CSS sa isang HTML na elemento gamit ang attribute na <code>style</code>. Halimbawa: Binabago ng <code><p style="color: blue;">Hello</p></code> ang kulay ng text ng isang talata sa asul.
• Panloob na CSS: Ang mga panuntunan ng CSS ay nakasulat sa loob ng isang tag na <code><style></code> sa head section ng iyong HTML na dokumento. Ang pamamaraang ito ay kapaki-pakinabang kapag nagtatrabaho ka sa isang webpage.
• Panlabas na CSS: Ang mga panuntunan ng CSS ay inilalagay sa isang hiwalay na file, karaniwang pinangalanang <code>style.css</code>. Ili-link mo ang CSS file sa iyong HTML gamit ang tag na <code><link></code>. Halimbawa: <code><link rel="stylesheet" href="style.css"></code> Pinapadali nitong ilapat ang parehong istilo sa maraming page.

Ang panlabas na paraan ay ang pinakakaraniwan sa propesyonal na web development dahil pinapanatili nitong maayos ang HTML at hinahayaan kang mag-update ng mga istilo sa maraming page nang sabay-sabay.

Mga Benepisyo ng Paggamit ng CSS

Malaking tulong ang CSS sa maraming paraan. Narito ang ilang benepisyo ng paggamit ng CSS sa web development:

• Paghihiwalay ng Nilalaman at Estilo: Hawak ng HTML ang nilalaman at istraktura, habang pinamamahalaan ng CSS ang hitsura at disenyo. Ang paghihiwalay na ito ay nagpapadali sa pag-update ng iyong website.
• Reusability: Kapag gumawa ka ng CSS rule, magagamit mo ito sa maraming elemento sa iba't ibang page. Ito ay nakakatipid ng oras at pinapanatili ang lahat ng bagay na pare-pareho.
• Pinahusay na Pagganap ng Website: Sa CSS sa magkahiwalay na mga file, ang mga browser ay makakapag-load ng mga istilo nang mabilis at mas mabilis na maipakita ang iyong webpage.
• Pare-parehong Disenyo: Tumutulong ang CSS na matiyak na magkatulad ang hitsura ng bawat pahina sa iyong website. Lumilikha ito ng mas magandang karanasan para sa mga user dahil madali nilang mauunawaan at ma-navigate ang iyong site.
• Madaling Pagpapanatili: Kapag kailangan mong baguhin ang isang istilo, kailangan mo lang mag-update ng isang CSS file kaysa sa maraming HTML file. Ginagawa nitong mas simple ang pamamahala ng isang website.

Ang paggamit ng CSS ay parang pagkakaroon ng isang espesyal na toolbox. Ang bawat tool sa toolbox ay tumutulong sa iyo na mapabuti ang hitsura ng iyong webpage nang madali. Habang nagsasanay ka, makikita mo kung gaano kalakas ang CSS sa paggawa ng mga website na maganda at madaling gamitin.

CSS sa Tunay na Mundo

Ang bawat website na binibisita mo ay gumagamit ng CSS sa ilang paraan. Mula sa iyong mga paboritong cartoon site hanggang sa mga pahina ng proyekto ng paaralan, tumutulong ang CSS na lumikha ng isang masaya at madaling basahin na layout. Kapag nakakita ka ng makulay na webpage na may maayos na espasyo at malinaw na text, ito ay CSS sa trabaho.

Isaalang-alang ang disenyo ng mga sikat na website tulad ng para sa mga laro, cartoon, o mga online na kwento. Ang maingat na paggamit ng mga kulay, font, at mga layout ay nakakatulong na gawing kapana-panabik at nakakaengganyo ang mga website na ito. Ginagamit din ang CSS sa mga app at mobile site, na tinitiyak na maganda ang hitsura ng content sa parehong malalaking screen at maliliit na telepono.

Sa pang-araw-araw na buhay, ang CSS ay katulad ng dekorasyon ng isang silid. Maaari kang pumili ng tema para sa iyong silid, magsabit ng mga makukulay na larawan, at ayusin nang maayos ang iyong mga kasangkapan. Ganoon din ang ginagawa ng CSS para sa mga website. Nagdudulot ito ng kaayusan at kagandahan sa digital space, ginagawa itong kaaya-aya para sa mga bisita.

Buod ng Mga Pangunahing Punto

Narito ang mga pangunahing punto na natutunan namin tungkol sa CSS:

• Kahulugan: Ang CSS ay nangangahulugang Cascading Style Sheets at ginagamit ito sa pag-istilo ng mga webpage.
• Tungkulin sa Web Development: Ginagawa ng CSS ang mga website na magmukhang kaakit-akit sa pamamagitan ng pagdaragdag ng mga kulay, font, at layout.
• Pangunahing Syntax: Gumagamit ang isang panuntunan ng CSS ng isang selector at isang bloke ng deklarasyon kung saan nakatakda ang mga property na may mga value.
• Mga Tagapili: Ang mga tagapili ng uri, klase, at id ay tumutulong sa pag-target ng mga partikular na elemento ng HTML.
• Mga Property at Value: Gumagamit ang CSS ng mga katangian tulad ng kulay, kulay ng background, at margin upang kontrolin ang iba't ibang aspeto ng disenyo ng webpage.
• Cascade at Inheritance: Maaaring i-override ng mga panuntunan ang isa't isa, at maipapasa ang mga istilo mula sa mga elemento ng magulang hanggang sa mga elemento ng bata.
• Modelo ng Kahon: Ang bawat elemento ng HTML ay itinuturing bilang isang kahon na may nilalaman, padding, hangganan, at margin.
• Mga Layout at Positioning: Nagbibigay ang CSS ng mga paraan upang ayusin ang mga elemento sa page gamit ang mga katangian tulad ng display, posisyon, at Flexbox.
• Mga Paraan sa Paglalapat ng CSS: Maaaring ilapat ang CSS nang inline, panloob sa head section, o panlabas sa pamamagitan ng hiwalay na stylesheet.
• Mga Benepisyo: Pinaghihiwalay ng CSS ang nilalaman mula sa presentasyon, pinapagana ang muling paggamit, at tinitiyak ang pare-parehong disenyo sa mga webpage.

Ang CSS ay isang mahalagang bahagi ng web development, na ginagawang maganda at madaling i-navigate ang mga site. Habang nag-e-explore ka pa at sinusubukang bumuo ng sarili mong mga webpage, tandaan na ang CSS ang iyong tool para sa pagpapahayag ng pagkamalikhain. Magsaya sa pag-eksperimento sa mga kulay, font, at mga layout, dahil ang bawat maliit na pagbabago ay nagdaragdag sa magic ng isang mahusay na disenyong website.

Panatilihin ang pagsasanay at pagmamasid sa iyong mga paboritong website. Pansinin kung paano ginagamit ang iba't ibang istilo upang makuha ang iyong atensyon at lumikha ng isang kaaya-ayang karanasan. Sa paglipas ng panahon, makikita mo kung gaano kalakas ang CSS sa pagbabago ng mga simpleng istruktura ng HTML tungo sa mga webpage na biswal na nakakaengganyo.