Difference between revisions of "CSS"

(See also)
(Values: Fixed grammar in first sentence, rgb can also be used instead of hex.)
(4 intermediate revisions by 4 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>
#se.le+ct>or{
+
selector{
 
     property        : value;
 
     property        : value;
 
     another-property : value;
 
     another-property : value;
Line 41: Line 41:
 
== 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 49:
 
== Values ==
 
== 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.
+
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.
  
 
== The CSS Box Model ==
 
== The CSS Box Model ==
Line 61: Line 61:
 
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 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 upset 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.
 
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.
Line 71: Line 71:
  
  
''This article is a stub. You can help us by improving it.''
+
{{stub}}

Revision as of 12:57, 21 May 2019

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.

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.

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.

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.

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. Help us out by expanding it.