Ano nga ba ang “inline style” at ano ang puwedeng makamit sa tulong nito sa pag gawa ng webpage? Ito na rin ang pag kakataon ko upang maipasok sa pagtuturo ng pahapyaw ang pag gamit ng CSS. Sa simpleng paliwanag, ang CSS ay kaugnay ng HTML, ito ay katulong ng HTML sa aspeto ng disenyo, kulay at iba pa.
Kung ihahalintulad natin sa pag basa ng diaryo, hindi ba’t mas nakaka anyayang basahin kung may nakikitang kulay? halimbawa, may mga highlight na salita na may kulay, may border at iba pa. Hindi nalilimitahan dito ang kayang gawin ng CSS, ngunit sa mga ganitong bagay o pag uumpisa tayo mag sisimula.
Maihahalintulad din sa sining
Gaya ng pag kulay sa pisikal na mundo, ganito din ang sayang dala ng pag gamit ng CSS para sa akin. Dito ko kasi nasusubok ang pagiging malikhain ng aking isip, naihahayag mo din dito ang iyong mga imahinasyon habang ikaw ay nag bubuo ng webpage. Importante na mag aral din ng iba’t ibang kumbinasyon ng kulay sapagkat kung mali at hindi maayos ang kulay na ginamit, ito ay maaaring makasakit sa mata at magdahilan na umalis ang iyong mga tagapagbasa ng website.
Mga tatalakayin
- Body background color
- Font size / color & alignment
Magumpisa nang humanda, at gaya ng mga naunang pagtuturo ay ihanda na ang notepad para sa mga ibabahagi kong codes.
Inline Style 1 – “background-color” property
Ang tungkulin nito ay kulayan ang background ng isang elemento ng HTML, ang ihahalimbawa ko ay ang body tag.
<html>
<head>
<title>Ang pag gamit ng inline style</title>
</head>
<body style="background-color:red;">
</body>
</html>
Subukin ang code sa itaas at pansinin na magiging kulay pula ang iyong webpage! gagamit ka nga din pala ng attribute na style=”” at diyan mo ipapaloob ang properties ng CSS na aking tinuturo. Palitan lamang ng ibang kulay ang halimbawa sa itaas sa nais mong kalabasan.
Inline Style 2 – “font-size” property
Ito naman ay para sa laki ng letra ng iyong webpage na ginagawa.
<html>
<head>
<title>Ang pag gamit ng inline style</title>
</head>
<body style="background-color:red;">
<p style="font-size:14px;">Maliit</p>
<p style="font-size:22px;">Katamtaman</p>
<p style="font-size:34px;">Malaki</p>
</body>
</html>
Resulta:
Maliit
Katamtaman
Malaki
Pansinin ang px sa tabi ng numero sa pag saad ng laki ng letra, ito ay kailangan, kaya’t huwag itong kalilimutan.
Inline Style 3 – “color” property
Para sa kulay ng letra…
<html>
<head>
<title>Ang pag gamit ng inline style</title>
</head>
<body style="background-color:red;">
<p style="color:red;">Pula</p>
<p style="color:green;">Berde</p>
<p style="color:pink;">Kulay-rosas</p>
</body>
</html>
Resulta:
Pula
Berde
Kulay-rosas
Inline Style 4 – “text-align” property
Kaliwa, gitna o kanan, ito ang mga puwedeng gamitin mo sa pag lagay ng pangungusap.
<html>
<head>
<title>Ang pag gamit ng inline style</title>
</head>
<body style="background-color:red;">
<p style="text-align:left;">Kaliwa</p>
<p style="text-align:center;">Gitna</p>
<p style="text-align:right;">Kanan</p>
</body>
</html>
Resulta:
Kaliwa
Gitna
Kanan
Konklusyon
Hindi lamang nalilimitahan sa iisang property ang puwede mong magamit sa isang elemento ng HTML, puwede mo itong pag sama samahin. Halimbawa laki at kulay, basta kailangan ay may “;“na tagapaghiwalay sa bawat property.
<p style="color:blue;font-size:25px;">Halimbawang Teksto</p>
Resulta:
Halimbawang Teksto
Huwag matakot mag eksperimento, dahil dito ka mas matututo. Tandaan na maging matiyaga sa pagko-code, mag research at mag aral palagi, naparakaming iba pa na maaari mong magamit na CSS properties. Manatiling tumutok para sa mga susunod ko pang pagtuturo.
Facebook Comments