Hello, CSS world!

After discussing what CSS is and why you should use it, you're probably eager to see it in action. If you're reading this in your webbrowser, then you can already see CSS doing its magic - from header colors and sizes to code sample boxes, menus, lists and pretty much anything else - if it has a background, a border, a different text size or color, then it's likely the thanks to CSS. However, that might be a bit too complex to comprehend at the moment, so let's bring it down to a much more basic level.

Throughout the history of programming, every tutorial with respect for itself has started with a "Hello, world!" example, with the sole purpose of showing the most basic way to bring the text "Hello, world!" to the user's screen. This could however easily be accomplished in pure HTML, without the use of any CSS, so we'll spice it up just a bit with a different color:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

That's it - we just wrote our first CSS rule, targeted toward the H1 tag and used it to change the text color, using the color property and a color value called DeepSkyBlue. You can check the result by pasting the code into your editor or simply by clicking the test button above the code sample.

सारांश

जैसा कि आप देख सकते हैं कि सी.एस.एस. बहुत सरल भाषा है। यदि आपको यह उदाहरण समझ में नही आया है तो घबराने की कोई जरूरत नहीं है। अगले अध्याय में हम इस पर विचार करेंंगे कि ऊपर उदाहरण में जो सी.एस.एस. कोड है उसका वास्तविक अर्थ क्या है और यह इस तरह से क्यों लिखा गया है।