CSS Tutorial

Revision as of 22:28, 18 November 2011 by Thkim1011 (talk | contribs)

According to Wikipedia, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.

Rephrased by some AoPS user, CSS is a language where a webpage can be styled with.

In Art of Problem Solving, CSS of AoPS user's blogs can be modified by the respective owner.

Syntax

The syntax of CSS is as follows:

element {

property: value;

...

}

The above is repeated for as many elements as necessary.

For example, to change the background color of a page into yellow, one would type:

body {

background-color: #FFFF00;

}

Elements

In webpages, each individual item--a paragraph of text, a button, a text box, a link, even invisible things that exist in a webpage--is called an element. In HTML, an element is identified by the existence of a pair of texts called tags written enclosed in comparison operators (for example,

) enclosing the element. For example, this paragraph of text is a p element, as it is enclosed in

tags. This p element is a child of a much larger element that covers this entire page, called the <body> element. But it's still contained in the largest element in a HTML page, the <html> element.

Properties

An element has various properties attached to it. For example, in the example above, the body element has the property background-color, which determines the background color of the body element. Other properties includes color, text-align, font-family, margin, et cetera.

Values

A property always have a value. In this case, the original value of the background-color property of the body element is white, as this page is white. By changing it to the color #FFFF00 (yellow), the page, if it contains that snippet of CSS code, will have a yellow background color.

To determine the value of a color-related property, one can simply use their English names as the values. However, to make more diverse colors, one has to be acquainted with hexadecimal numbers.

A Good CSS

A CSS can be said good by someone and yet bad by someone else. So it's up to someone to make their own CSS. However, a few guidelines of making a CSS:

1. Never make the text unreadable, unless it's the intention of the CSS (which might upsets people that don't know it's intended to be so). Also don't make CSS that annoys the reader.

2. Black-on-white is the most preferred style, although white-on-black can save power on the reader's computer. Don't make a text that has a very contrasting color with its background, like red-on-cyan, as it causes some difficulty on reading such text.

External Links

[1]

See also


This article is a stub. You can help us by improving it.