# CSS/Syntax
## Introduction

The basic syntax of a CSS style is as follows:
The selector defines what HTML elements will be selected with the style. The property is the property being altered by the style. The value is how the elements are altered.
On the Mediawiki sites like this one, the Mediawiki:Common.css allows a CSS collective customization, and the monobook.css an individual one per profile. Consequently it's possible to experiment the following code inside.
To verify whether the intended elements are selected, consider temporarily hiding them using { display: none; } or { visibility: hidden; }, the latter of which hides them without removing their surface space from the page.

## Basic Selectors

| Rank | Code | Name | Function |
| 1 | * | Universal selector | selects all elements |
| 2 | E | Type selectors | selects all E elements |
| 3 | E F | Descendant selectors | selects all F elements inside E elements |
| 4 | E > F | Child selectors | selects all F elements directly nested inside E elements |
| 5 | E + F | Brother selectors | selects all F elements directly after E elements |
| 6 | E[F] | Markup selectors | selects all elements inside a E markup with an F property |
| 7 | .myclass | Class selectors | selects all elements with class="myclass" |
| 8 | #myid | Identifier selectors, they have to be unique | selects all elements with id="myid" |

## Colors

* By name, there are 16 named colours: aqua, black, blue, fushia, gray, green, lime, maroon, navy, purple, red, silver, teal, white, yellow. Eg: body{background-color:blue;}. /* Blue background color */
* By code RGB (red, green, blue). Eg: h1{color:rgb(10,60,110);} /* Bluish header 1 */
* By hexadecimal value. Eg: p{color:#3300FF;} /* Blue paragraph */

### Colors examples

* * {color :blue ;} /* All default elements are blue */
* h1 {color :red ;} /* All size 1 headers are red */
* h1 h2 {color :yellow ;} /* All size 2 headers inside a size 1 paragraph are yellow */
* h2 > strong {color :green ;} /* All terms inside a strong markup, inside a size 2 headers are green */
* h2 + strong {color :green ;} /* All terms inside a strong markup, after a size 2 headers are green */
* p[class] {color :orange ;} /* All elements inside a paragraph markup with a class are orange */
** p[class="orange"] {color :orange ;} /* All elements inside a paragraph markup including "class=orange" are orange */
** *[class="orange"] {color :orange ;} /* All elements inside a markup including "class=orange" are orange */
* .myclass {color :pink ;} /* All elements inside a markup including "class=myclass" are pink */
** p.myclass {color :aqua ;} /* All elements inside a paragraph markup including "class=myclass" are aqua */
** p .myclass {color :aqua ;} /* All elements inside a paragraph markup, which include "class=myclass" are aqua */
** .myclass strong {color :aqua ;} /* All elements inside a strong markup, which is inside another which includes "class=myclass" are aqua */
* #style1 {color :purple ;} /* All elements inside a markup including "id=style1" are purple */
** p#style1 {color :purple ;} /* All elements inside a paragraph markup including "id=style1" are purple */

## Text styles

* font-style proposes 3 text styles: normal, italic, and oblique.
* font-weight influences the font boldness: normal, bold, bolder, lighter. It also accepts the values between 100 and 900 by steps of 100.
* font-size : its units can be: cm, mm, in (inches), pt (1 point = 1/72 inches), pc (1 picas = 12 points), em (emphasize), ex (minuscule), px (pixels), %.

### Text examples
## Lists

* Unordered (<ul>).
    Its styles are: none, disc, circle, square, url([image]).
    Example : ul {list-style-type:square;}.
* Ordered (<ol>).
    list-style-type includes: none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, url([image]).
    Example : ol {list-style-type:upper-roman;}