this is just C&P from my post on ihackerpro so if that's a problem let me know and i'll re-write it k?
I'm sorry but this is a rather long tutorial, i know because i typed it all and my ipod resprung so i have to do it again. the whole point of this is 1. no one made one so figured i would and 2. i wanna see if i learned it well enough to explain it to other people. so tell me what you think and enjoy
CSS stands for cascading style sheets. it can to be applied to html docs. in 3 different ways -
in-line - where it's physically in the html tags using the style attribute. ex.
<p style="color: red">text</p>
this will make that specific paragraph red.
internal - Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. this might look like:
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour...
external - External styles are used for the whole, multiple-page website. There is a separate CSS file.
to hook it to the html document use this:
say it we saved a file as web.css, it would be:
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
(i'm sorry for using html as an example but they go hand in hand so it's hard not too haha)
you know how html has tags? well CSS has selectors. selectors are the names given to styles in internal and external style sheets.
for each selector there are properties, the properties go in curly brackets. properties simply take the form of a word such as color, font-weight or background-color.
A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate the properties.
body {
font-size: 0.8em;
color: navy;
}
This will apply the given values to the font-size and color properties to the body selector.
So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.
lengths and percentages
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.
em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
px (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.
o k the next thing i wanted to cover is colors, it's pretty self explanatory but there's some things i thought you should know:
red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00
There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
transparent is also a valid value.
Colours can be applied by using color and background-color (note that this must be the American English 'color' and not 'colour').
A blue background and yellow text could look like this:
h1 {
color: yellow;
background-color: blue;
}
You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the page and everything in it.
font-family - This is the font itself, such as Times New Roman, Arial, or Verdana. the font you choose has to be on the users computer but don't worry! if the font you chose isn't on there computer if you use a comma you can choose more than one so you have a back up. the computer will just run down the list until it has one. now there are "safe" fonts which most computers have like times new roman, arial and verdana. here is an example:
font-family: arial, helvetica
font-size is self explainatory.
font-weight - This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many browsers shake their heads and say "I don't think so", it's safer to stick with bold and normal.
font-style -This states whether the text is italic or not. It can be font-style: italic or font-style: normal.
text-decoration - This states whether the text is underlined or not. This can be:
text-decoration: overline, which places a line above the text.
text-decoration: line-through, strike-through, which puts a line through the text.
text-decoration: underline should only be used for links because users generally expect underlined text to be links.
This property is usually used to decorate links, such as specifying no underline with text-decoration: none.
text-transform - This will change the case of the text.
text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none I'll leave for you to work out.
letter-spacing and word-spacing are self explainatory.
line-height sets the height of sentences and paragraphs.
The text-align property will align the text inside an element to left, right, center or justify.
text-indent - indents the first line of a paragraph.
margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.
Finally, border-color sets the colour.
