Fandom

Petit Computer Wiki

CSS Tutorial

914pages on
this wiki
Add New Page
Comments3 Share

This is a tutorial on Cascading Style Sheets(CSS). With CSS you can edit your {{#NewWindowLink:http://community.wikia.com/index.php?title=Special:MyPage/global.css%7CSpecial:MyPage/global.css}} and it will affect every wikia site you go on. So for example you can change the font you want to use with the following properties:

  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

I'll talk about each of them and how to use them.

font-family - Use this to change which fonts you are using, Example:

*{font-family:Arial,"Times New Roman",sans-serif;}

The * means it will affect the whole page, if for example you only wanted to affect paragraphs, you would do: p{}, or for headers: h1,h2,h3,h4,h5,h6{}.
Inside the {}, is where all the properties go, font-family is our only property in this case.
The : sets the values for that property, while the ; is the end of that property.
The values for the font-family property in this case are: Arial, Times New Roman, and sans-serif.
Note that any fonts with spaces between the name must be between double quotes "", they are optional if there are no spaces.

font-size - Use this to change the size of the font, Example:

*{font-size:16px;}

This is pretty self explanatory, it sets the font size of everything to 16px, the size can be specified in any of the following units:

  • px - Pixel
  • pt - Point 1pt = 1/72inch
  • pc - Pica 1pc = 12pt
  • em - Em 1em = Current font size
  • ex - 1ex = The height of the lowercase "x" in the current font
  • mm - Milimeter
  • cm - Centimeter
  • in - Inch
  • % - Percentage

font-style - Use this to change the style of a font, Example:

*{font-style:italic;}

This makes the font

italicized

, valid values are:
  • normal
  • italic
  • oblique
  • inherit - Gets the style from the parent element

font-variant - Use this to change the variant of the font, Example:

*{font-variant:small-caps;}

This will make the font in

Small Caps

, valid values are:
  • normal
  • small-caps
  • inherit

font-weight - Use this for changing the weight of the font, Example:

*{font-weight:bold;}

This will make

bold

text, valid values are:
  • normal
  • bold
  • bolder
  • lighter
  • number - 400=Normal 700=Bold
  • inherit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.