< CSS

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.

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;}
This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.