Help:CSS at Wikiversity

No manual

 * Currently there is no manual for CSS (style sheets) for the pages of Wikiversity. Therefore, I am trying to rough out a list of what is possible. Once this is done, it will need a complete rewrite to get it into a useable form for instructors.Robert Elliott


 * More info on CSS can be found at http://www.w3schools.com/css/css_units.asp and http://www.w3schools.com/css/css_reference.asp

CSS at Wikiversity CSS at Wikiversity

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" CSS coding in simple HTML paragraphs
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Gold; background-color:LightYellow;" |



The paragraph
A new paragraph is created with two carriage returns, not one.

Break also creates a paragraph.

Other paragraph formatting can be done with the ":" and ";" symbols at the beginning of a line (even without two carriage returns.)

Another option is to use HTML paragraphs with CSS coding.

This text does not have any style applied to it.

This text does not have any style applied to it.

The limitation of this format is it creates only a single paragraph and ignores multiple carriage returns in a row.

This text has the font-size style applied to it, making it 20pt.

creates

This text has the font-size style applied to it, making it 20pt.

The only way to get multiple paragraphs is by using the break symbol

This text has the font-size style applied to it, making it 20pt. This looks like a single paragraph when I write it but separate in the final output.

This text has the font-size style applied to it, making it 20pt. This looks like a single paragraph when I write it but separate in the final output.

Therefore, you have to be careful how you use this.
 * }

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" CSS coding that I find useful
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Gold; background-color:LightYellow;" |



Simple paragraphs
Big colorful heads

Big colorful heads

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" Codes for paragraphs
 * }
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Sienna; background-color:Cornsilk;" |



Style Sheet formatting
style="width:200px"

This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

 style="width: 60%"

This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

 style="background-color: Red"

<p style = "background-color: Red">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="margin-left: 2cm"

<p style = "margin-left: 2cm">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="background-color: Red"

<p style = "background-color: Red">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="font: 8pt/16pt georgia; margin-top: 100px; text-align: justify;"

<p style = "font: 8pt/16pt georgia; 	margin-top: 100px; 	text-align: justify;">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="position:relative; left:100px; top:15px"

<p style = "position:relative; left:100px; top:15px">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="font-style: italic"

<p style = "font-style: italic">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="marging-left:4em"

<p style = "marging-left:4em">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.

<p style = "font-size:16pt; background-color: Gold; margin-left: 1cm"> style="text-indent:8em"

<p style = "text-indent:8em">This text which has been typed to look like two paragraphs. This paragraph has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text. I used the break funtion to create the second paragraph which also has lots of text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text and text.
 * style="margin-left: auto; margin-right: auto"
 * style="color: white;"

font-family - Sets the typeface. font-size - Sets the font size. font-weight - Sets the thickness the text will be, values like bold and normal. font-style - Sets the style of the text, common values are normal and italic. font-variant - Modifies the text, e.g. small-caps. line-height - Sets the spacing between the baselines of adjacent lines of text.

<p style = "font-size: 14pt;font-family: georgia; text-align: center">Coding

<p style = "font-size: 14pt;font-family: georgia; text-align: center">Coding
 * }

Simple Table
Here is a simple table created with pipes

Which looks like this

The coding
These are not style sheet styles so I don't know what to call them:


 * border=1
 * cellspacing=0
 * cellpadding=5

Making improvements
We can expand on this by adding color and a fixed width

Adding width to the entire table
The basic rule is to add CSS items which affect the entire table in the first line. In this example, I added style="width:200px" to create the width for the entire table

{| border=1 cellspacing=0 cellpadding=5 style="width:200px"

Adding color individual boxes
The basic rule is to add CSS items which affect the entire table in the first line. In this example, I added bgcolor="#ccff99"" plus an extra pipe (vertical line) to create the color for the first box in the table

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" <div style="border-bottom:1px solid Sienna; background-color:Wheat; padding:0.2em 0.5em 0.2em 0.5em; font-size:130%; font-weight:bold;">Codes for tables
 * bgcolor="#ccff99" | This
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Sienna; background-color:Cornsilk;" |



Basic formatting

 * border=1
 * cellspacing=0
 * cellpadding=5
 * bordercolor="yellow"

Style Sheet formatting

 * style="width:200px"
 * style="width: 99%"
 * style="background-color: inherit"
 * style="margin-left: auto; margin-right: auto"
 * style="color: white;"
 * }

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" <div style="border-bottom:1px solid Gold; background-color:#ffffaa; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">Codes for items in tables
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Gold; background-color:LightYellow;" |

Basic formatting

 * bgcolor=Red
 * colspan="2"
 * rowspan="3"

Style Sheet formatting

 * style="width: 200px"
 * style="background-color: #ffffa0"
 * style="border: 1px solid #777777"
 * style="border: 1px #cccccc solid;"
 * style="-moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px"
 * style="height: 60px"
 * style="vertical-align: top"
 * style="text-align: center;"


 * }

{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100%" <div style="border-bottom:1px solid Gold; background-color:#ffffaa; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">DIV coding
 * colspan="1" style="width:100%; vertical-align:top; border:1px solid Gold; background-color:LightYellow;" |

I do not know what a DIV is but it works for some things Robert Elliott

Basic formatting
<div style="border-bottom:1px solid Gold; background-color:#ffffaa; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">Title


 * }

<p style = "font-size: 20pt">This text has the font-size style applied to it, making it 20pt.