Ano ang isang CSS file?
Ang CSS (Cascading Style Sheets) ay mga file na naglalarawan kung paano ipinapakita ang mga elemento ng HTML sa screen, papel, atbp. Sa HTML, maaari kang magkaroon ng alinman sa mga naka-embed na istilo o maaaring tukuyin ang mga istilo sa isang panlabas na stylesheet. Para sa pag-embed ng mga istilo, ginagamit ang mga tag na <style></style>. Ang mga panlabas na stylesheet ay iniimbak sa mga file na may extension na .css. Gamit ang panlabas na CSS, maaari mo itong isama sa maramihang mga pahina ng HTML upang i-update ang estilo ng mga pahinang iyon. Kahit na ang isang CSS file ay maaaring gamitin sa istilo ng isang kumpletong website.
Maikling Kasaysayan
Inilabas ang CSS1 noong 1996 kasama si Bert Bos bilang co-author. Ang CSS Working Group ay nagsimulang magtrabaho sa mga isyu na hindi natugunan sa CSS1. Nagresulta ito sa paglikha ng CSS2 noong Nobyembre 1997 na na-publish bilang isang rekomendasyon ng W3C noong ika-12 ng Mayo 1998. Nagdagdag ang bersyon na ito ng suporta para sa mga device na partikular sa media tulad ng mga printer, nada-download na mga font, talahanayan, at pagpoposisyon ng elemento. Noong Hunyo 1999, CSS3 ang naging rekomendasyon ng W3C. Hinati nito ang dokumentasyon sa mga module kung saan ang bawat module ay may mga feature ng extension na tinukoy sa CSS2.
Paano gamitin ang mga CSS file
Upang gumamit ng CSS file, isama mo ito sa head section ng HTML na dokumento. Ginagamit mo ang link tag upang isama ang file tulad ng ipinapakita sa ibaba.
<link rel="stylesheet" type="text/css" href="main.css"/>
ang href attribute ng link tag ay naglalaman ng path sa CSS file. Sa paggawa nito, ang mga naaangkop na istilo na nakapaloob sa kasamang CSS file ay inilalapat sa HTML na dokumento.
CSS Syntax
Ang isang panuntunan ng CSS ay binubuo ng dalawang bahagi, isang tagapili at isang deklarasyon. Ang isang tagapili ay tumuturo sa isang elemento sa HTML na dokumento. Maaari itong maging isang tag ng elemento, pangalan ng klase, pangalan ng id, maraming tag na nagpapakita ng hierarchy, atbp. Ang isang deklarasyon ay naglalaman ng kahulugan ng istilo na binubuo ng pag-aari at halaga. Tinutukoy ng property ang property ng elemento na gusto mong baguhin at tinutukoy ng value ang bagong value nito. Ang bawat panuntunan ng CSS ay maaaring magkaroon ng maraming deklarasyon. Ang sumusunod ay isang halimbawa ng panuntunan ng CSS.
h1{
font-weight: 700;
color: forestgreen;
}
Sa halimbawa sa itaas, mayroon kaming h1 bilang isang tagapili na pumipili sa lahat ng h1 na tag sa HTML na dokumento. Ang panuntunan ay may dalawang deklarasyon, isa para sa font-weight at ang isa para sa kulay. Ang font-weight at color ay mga property at 700 at forestgreen ang kanilang mga value ayon sa pagkakabanggit.
Halimbawa ng Paggamit ng CSS
Ang sumusunod ay nagpapakita ng halimbawang HTML na dokumento at ang stylesheet na ginamit sa istilo nito. Ang paghahambing na imahe ay idinagdag din upang ihambing ang mga naka-istilo at payak na HTML na mga dokumento
HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css" type="text/css">
<title>CSS Test</title>
</head>
<body>
<div class="content-wrapper">
<h1>Test document to test <span class="highlight">CSS</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
perferendis
sed aut!</p>
<h2>List of items</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
CSS Stylesheet
body{
background-color: lightblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
padding: 10px 30px;
}
p{
text-align: justify;
}
h1{
text-align: center;
}
.highlight{
font-weight: 700;
color: forestgreen;
}
h1, h2{
font-weight: 400;
}
ul li{
list-style-type: square;
margin-bottom: 10px;
margin-left: 50px;
}
Paghahambing ng Output
Ang kaliwang bahagi ng larawan ay nagpapakita ng HTML na dokumento nang walang mga istilong inilapat at ang kanang bahagi ay nagpapakita ng HTML na dokumento na may mga istilong inilapat.
