TOC

The community is working on translating this tutorial into Chinese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Introduction:

Hello, CSS world!

谈完CSS是什么,以及你为什么应该使用它,你兴许很想看看它的运行。如果你是在网页浏览器里面阅读现在这篇文章的,那么你已经可以看到CSS施展它的魔法了,从页眉的颜色、尺寸到代码框、目录、表单和其他的大部分东西,如果以上这些东西有背景,有边框,具有不同的文本大小或者颜色的话,那么恐怕这都要归功于CSS了。但是这些现在理解起来恐怕有些复杂,因此让我们把这些放到更基础的层面来谈论。

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.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!