CSS/Syntax

Introduction

The basic syntax of a CSS style is as follows:

 selector{property:value;}

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

1. 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 */
   

2. By code RGB (red, green, blue). Eg:

   h1{color:rgb(10,60,110);} /* Bluish header 1 */
   

3. By hexadecimal value. Eg:

   p{color:#3300FF;} /* Blue paragraph */
   

Colors examples

1. * {color :blue ;} /* All default elements are blue */
   

2. h1 {color :red ;} /* All size 1 headers are red */
   

3. h1 h2 {color :yellow ;} /* All size 2 headers inside a size 1 paragraph are yellow */
   

4. h2 > strong {color :green ;} /* All terms inside a strong markup, inside a size 2 headers are green */
   

5. h2 + strong {color :green ;} /* All terms inside a strong markup, after a size 2 headers are green */
   

6. p[class] {color :orange ;} /* All elements inside a paragraph markup with a class are orange */
   

   1. p[class="orange"] {color :orange ;} /* All elements inside a paragraph markup including "class=orange" are orange */
      

   2. *[class="orange"] {color :orange ;} /* All elements inside a markup including "class=orange" are orange */
      

7. .myclass {color :pink ;} /* All elements inside a markup including "class=myclass" are pink */
   

   1. p.myclass {color :aqua ;} /* All elements inside a paragraph markup including "class=myclass" are aqua */
      

   2. p .myclass {color :aqua ;} /* All elements inside a paragraph markup, which include "class=myclass" are aqua */
      

   3. .myclass strong {color :aqua ;} /* All elements inside a strong markup, which is inside another which includes "class=myclass" are aqua */
      

8. #style1 {color :purple ;} /* All elements inside a markup including "id=style1" are purple */
   

   1. p#style1 {color :purple ;} /* All elements inside a paragraph markup including "id=style1" are purple */
      

Text styles

1. font-style proposes 3 text styles: normal, italic, and oblique.
2. font-weight influences the font boldness: normal, bold, bolder, lighter. It also accepts the values between 100 and 900 by steps of 100.
3. 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

p#t1 { font-size: 12px; }  /* All elements inside a paragraph markup with "id=t1" are at the size of 12 pixels */
p#t2 { font-size: 1.5em; }
p#t3 { font-size: 175%; }

Lists

1. Unordered (<ul>).

   Its styles are: none, disc, circle, square, url([image]).

   Example : ul {list-style-type:square;}.

2. 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;}