CSS/Syntax
Appearance
< 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]- 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
[edit | edit source]* {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
[edit | edit source]- 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
[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]- 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;}