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.

Summary

As you can probably see, CSS is a fairly simple language, but fear not if you didn't quite understand our first example. In the next chapter, we'll discuss what the above CSS code actually means and why it's written the way it is.