CSS
| CSS |
| Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements |
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 involves a selector, which indicates what you are styling; and curly braces, to delineate the style from the selector. The curly braces contain a list of property: value pairs, separated by a semicolon. Here's an example
#se.le+ct>or{
property : value;
another-property : value;
/* more properties and values follow */
}
Note that white space, the last semicolon, and comments (text wrapped in /* comment here */), are complete ignored. However, it is good practice to indent your properties and values for readability.
If we typed:
body{
background: red;
}
that would make the background of the body element (aka. the entire page) red. A properties final value is the last value that was set. For instance if we typed:
body{
background: red;
/* extra code may be here */
background: blue;
}
and
body{ background: red; }
/* extra code may be here */
body{ background: blue; }
In both cases, the background would be blue.
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.
