Difference between revisions of "CSS Tutorial"
m (→External Links) |
|||
| Line 1: | Line 1: | ||
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. | 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 | + | Rephrased by some AoPS user, CSS is a language that a webpage can be styled with. |
In Art of Problem Solving, CSS of AoPS user's blogs can be modified by the respective owner. | In Art of Problem Solving, CSS of AoPS user's blogs can be modified by the respective owner. | ||
| Line 39: | Line 39: | ||
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 [http://en.wikipedia.org/wiki/hexadecimal hexadecimal numbers]. | 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 [http://en.wikipedia.org/wiki/hexadecimal hexadecimal numbers]. | ||
| + | |||
| + | == The CSS Box Model == | ||
| + | |||
| + | Elements can be set to be displayed as a block, or box. Most elements are like this by default. Some exceptions are text, links, images, and other elements that modify text. Any element that is a block has a content (modified by the properties width and height), what is in the element, a padding, a space around the content with the same background as the content, a border which goes around the padding, and a margin that is transparent and goes around the border. Elements also have an outline, a less well known property similar to border, except it doesn't take up space (the margin doesn't expand to go around it.) | ||
== A Good CSS == | == A Good CSS == | ||
| Line 46: | Line 50: | ||
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. | 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. | + | 2. Black-on-white is the most preferred style, although white-on-black (reverse video) 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 == | == External Links == | ||
Revision as of 22:47, 8 January 2012
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 that a webpage can be styled with.
In Art of Problem Solving, CSS of AoPS user's blogs can be modified by the respective owner.
Contents
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: yellow;
}
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.
The CSS Box Model
Elements can be set to be displayed as a block, or box. Most elements are like this by default. Some exceptions are text, links, images, and other elements that modify text. Any element that is a block has a content (modified by the properties width and height), what is in the element, a padding, a space around the content with the same background as the content, a border which goes around the padding, and a margin that is transparent and goes around the border. Elements also have an outline, a less well known property similar to border, except it doesn't take up space (the margin doesn't expand to go around it.)
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 (reverse video) 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] W3Schools CSS Tutorial
See also
This article is a stub. You can help us by improving it.
