Difference between revisions of "CSS"
(→Syntax) |
Happycupcake (talk | contribs) (→Values: Color pickers are an alternative to manual RGB picking.) |
||
| (9 intermediate revisions by 6 users not shown) | |||
| Line 9: | Line 9: | ||
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 | 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 | ||
<pre><nowiki> | <pre><nowiki> | ||
| − | + | selector{ | |
property : value; | property : value; | ||
another-property : value; | another-property : value; | ||
| Line 38: | Line 38: | ||
</nowiki></pre> | </nowiki></pre> | ||
In both cases, the background would be blue. | In both cases, the background would be blue. | ||
| + | |||
| + | In cases where the two selectors are not identical, which rule applies depends on specificity. The full rules for determining specificity of a selector are somewhat complex. In general, however, stricter selectors are more specific and will override less strict selectors. | ||
| + | <pre><nowiki> | ||
| + | html > body{ background: red; } | ||
| + | /* extra code may be here */ | ||
| + | body{ background: blue; } | ||
| + | </nowiki></pre> | ||
| + | In this case, the background will be red, because the first selector is more specific. | ||
== Elements == | == 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, <p>) enclosing the element. For example, this paragraph of text is a p element, as it is enclosed in <p> 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. | + | 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, < p >) enclosing the element. For example, this paragraph of text is a p element, as it is enclosed in <p> 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 == | == Properties == | ||
| Line 49: | Line 57: | ||
== Values == | == Values == | ||
| − | A property always | + | A property always has 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 [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] or RGB; or they can use color picker tools to determine the corresponding RGB values. |
== The CSS Box Model == | == The CSS Box Model == | ||
| Line 61: | Line 69: | ||
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: | 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 | + | 1. Never make the text unreadable, unless it's the intention of the CSS (which might upset people that don't know it's intended to be so). Also don't make CSS that annoys the reader. Never use rapidly flashing colors; this is not only annoying, but it can also cause seizures in people with photosensitive epilepsy. |
| − | 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 | + | 2. Black-on-white is the most preferred style, although white-on-black (reverse video) can save power on the reader's computer, depending on the display technology. Don't make a text with poor contrast with the background, such as red-on-cyan, as it causes some difficulty on reading such text. The [https://www.w3.org/WAI/standards-guidelines/wcag/ Web Content Accessibility Guidelines] includes guidelines for ensuring sufficient contrast ratios, and many browsers have built in tools for checking if your text is sufficiently contrasting. |
== External Links == | == External Links == | ||
| Line 69: | Line 77: | ||
== See also == | == See also == | ||
| − | |||
| − | + | {{stub}} | |
Latest revision as of 21:23, 13 July 2022
| 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
selector{
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.
In cases where the two selectors are not identical, which rule applies depends on specificity. The full rules for determining specificity of a selector are somewhat complex. In general, however, stricter selectors are more specific and will override less strict selectors.
html > body{ background: red; }
/* extra code may be here */
body{ background: blue; }
In this case, the background will be red, because the first selector is more specific.
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, < p >) 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 has 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 or RGB; or they can use color picker tools to determine the corresponding RGB values.
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 upset people that don't know it's intended to be so). Also don't make CSS that annoys the reader. Never use rapidly flashing colors; this is not only annoying, but it can also cause seizures in people with photosensitive epilepsy.
2. Black-on-white is the most preferred style, although white-on-black (reverse video) can save power on the reader's computer, depending on the display technology. Don't make a text with poor contrast with the background, such as red-on-cyan, as it causes some difficulty on reading such text. The Web Content Accessibility Guidelines includes guidelines for ensuring sufficient contrast ratios, and many browsers have built in tools for checking if your text is sufficiently contrasting.
External Links
[1] W3Schools CSS Tutorial
See also
This article is a stub. Help us out by expanding it.
