Jump to content

CSS/Syntax

From Wikiversity
< CSS

Introduction

[edit | edit source]

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

[edit | edit source]
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

[edit | edit source]
  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

[edit | edit source]
  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

[edit | edit source]
  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

[edit | edit source]
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

[edit | edit source]
  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;}