L?KE
11-06-2007, 08:41 AM
/* Simple CSS Tutorial
By Slud of Habbo UK */
In order to use CSS, you must have a basic knowledge of xhtml/html.
What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style anything in a html document, so as not to clog up all your code.
Eg. instead of having to type bgcolor="red" into 'td 'every element, with css you can write td { background: red; },
and every single 'td' in the document will have a red background color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Making a style rule
RED = Selector
BLUE = Property
GREEN = Value
Selector { Property: Value; } To write a style rule:
1] Replace 'Selector' with the element you want to format. These generally tend to be html tags.
eg. li, body, table, a etc.
2] Type { to start the declaration.
3] Replace 'Property' with the CSS property that formats the element as you'd like. Some of these include: background-color (NOTE: Not 'bgcolor' as in html), height, width, border etc.
4] Replace 'Value' with a unit or option available for that property. For example for 'background-color' you may wish to put '#80000'. And for height you woudln't put '#800000', you'd put a unit like '500px'.
5] Repeat 3-4 to add more rules. If you are using more than one rule, they must be separated by a semicolon - ;.
Note: You may add spaces or tabs in the code to make it more readable, as long as the semicolon remains at the end of each style rule.
6] When you're done put a } at the end.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2. Adding Comments
To add a comment to a style sheet, simply put '/*' at the beginning and '*/' at the end of your comment.
Example:
/* this makes the background red */
body {
background-color: red;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3. Values
Some properties only accept certain predefined values, some only accept numbers or percentages, some only accept colours, and some accept a mixture of all three.
Predfeined Values
Some properties only accept certain values.
Example:
WON'T WORK
body {
background-color: 5px;
}
WILL WORK
body {
background-color: red;
}
Lengths and percentages
Pixels - Px - 1 Pixel on the monitor.
Percent - % - Part of one bigger thing. 75% = 3/4
Em - em - Font size of current element. 2em = Twice font size.
Inches - in - Inche, r/l measurement.
Centimetres - cm - Centimetre, r/l measurement.
Millimeters - mm - Millimetre, r/l measurement.
Points - pt - 1pt = 1/72in
Pica - pc - 1pc = 12pt
URLS
Some properties require you to specify the url of another file or image.
Type url("file.ext") where file is the file name, and ext is the extension. 'url' is required.
Note: No space between 'url' and '('
Colors (Colour in english, but this is american.)
There are three ways to specify a color in CSS. We'll use the color 'maroon' here.
1. RGB value -
body { background-color: rgb(128, 0, 0); }2. Hexadecimal value -
body { background-color: #800000; } (# is required).
3. Colour name -
body { background-color: maroon; }~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. Adding the style sheet to your document.
Method 1.
Put the style sheet in the head of your document:
<html>
<head>
<style type="text/css">
a {
color: blue;
}
</style>
</head>
</html>
Method 2.
Write the css in a seperate file and save it with the extension '.css'. (Example - style.css)
then link to it in the head section.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
</html>
NOTE: In XHTML, the ' />' is required and the style sheet must be in the same directory as the html document for the example above to work.
Also..
To create two different style sheets, and let the visitor choose.. create one as before:
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
The visitor can choose the stylesheet from the 'view' section of your browsers menu, however currently, only Firefox and opera support this.
#####
Alternate way
<html>
<head>
<style>
@import url("style.css");
</style>
</head>
</html>
This method is used to hide rules from buggy browsers like Netscape 4.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5. Styling elements locally
To style an element in a html document add style="#" in the elment and replace # with your style rule.
Example:
...
<body>
<img src="mypic.png" alt="mypic" width="100" height="100" style="border:5px solid #000000;" />
</body>
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. Selecting elements.
1. By name.
As stated before selectors are usually the tags found in the html.
To style all elements of one kind, simply use that tag as the selector.
Exmaple: I want all my h5 headers green.
(Note: CSS from now on is shown internally, but for faster loading of your page, external is recommended.)
<html>
<head>
<style type="text/css">
h5 {
color: green
}
</style>
</head>
<body>
<h5>This is green!</h5><br />
<h4>This is not!</h4>
</body>
</html>
2. By ID or Class
In html/xhtml you can label elements with a 'class' or 'id'.
To name an element that appears once in your page and is unique we use 'id' in the html, and '#' in the css.
To name an element that appears more then once or in a group we use 'class' in the html, and '.' in the css.
To style an element with an id or class we do the following:
<html>
<head>
<style type="text/css">
div#unique {
background: red;
}
div.group {
background: green;
}
</style>
</head>
<body>
<div id="unique">
This div has a red background!
</div>
<div class="group">
This div has a green background!
</div>
<div class="group">
This div also has a green background!
</div>
</body>
</html>
3. Part of an element
We can select the first line, or the first letter of an element using the following method.
<html>
<head>
<style type="text/css">
p:first-letter {
color: green;
}
p:first-line {
color: red;
}
</style>
</head>
<body>
<p>This line is going to be green!<br />
This line is not!</p>
</body>
</html>
Also, the 'T' on this would have been green, as we specified in the stylesheet.
NOTE: To style two or more elements the same, and save yourself some typing, just put two elements at the beginning of the style rule and separate them with a comma:
h1, h2 {
color: #ff0000;
}
~~~~~~~~~~~~~~~~~~~~~~~~~
7. Simple CSS formatting
> Font family
Specifying the font of your element is easy, but what if the person viewing your site doesn't have that font? Specify another as a back-up, and if they don't have that, you can put a generic font such as 'sans-serif' or 'serif'.
p {
font-family: arial, helvetica, sans-serif;
}
Where arial is the preferred font, helvetica is the 2nd choice, and sans-serif is the generic font.
> Italics
Making text italic is very simple and saves you adding <em> or <i> to your html.
p {
font-style: italic;
}
> Bold
As with italics you can also make your text bold.
p {
font-weight: bold;
}
Instead of 'bold' you can also use 'lighter', 'bolder', or type a multiple of 100, between 100 and 900 (100, 200, 300, 400, 500, 600, 700, 800, 900), where 400 is normal, and 700 is bold.
> Font size
You can specify the size of your text, rather than continually adding '<font size="#"'.
p {
font-size: 12px;
}
You don't have to use 'px', any of the units listed in section 3 work along with:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
> Font color
Same as specifying the color of anything.
p {
color: red;
}
> Aligning
Text
To align text simply use the property 'text-align' with the three predefined values: left, right and center. Note: Center not centre.
Floating
to float an object use the property 'float' with either left or right. This will cause the element to align in direction you chose, and anything next to that will wrap around the opposite side.
> Font variant and decoration
To utilise smallcaps use the property 'font-variant', with value 'small-caps'.
To underline text use the property 'text-decoration', with the value 'underline'.
To overline text use the property 'text-decoration', with the value 'overline'.
To put a line through text use the property 'text-decoration', with the value 'line-through'.
To get rid of text-decoration, use the value 'none'.
<html>
<body>
<!-- NOTE: I'm using local styling here -->
<p style="font-variant:small-caps;">This paragraph is in small caps!</p>
<p style="text-decoration:underline;">This paragraph is underlined!</p>
<p style="text-decoration:overline;">This paragraph is overlined!</p>
<p style="text-decoration:line-through;">This paragraph has a line through it!</p>
<p style="text-decoration:none;">This paragraph is normal</p>
</body>
</html>
> Border
To add a border to any object simply use the 'border' property, with a value including a width (eg 2px), a colour (eg yellow), and a style (none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit).
<html>
<head>
<style type="text/css">
td {
border: 5px double red;
}
</style>
</head>
<body>
<table>
<tr>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
</tr>
</table>
</body>
</html>
You can also style each side seperately.
- border-top: 1px green ridge;
- border-right: 4px red groove;
- border-bottom: 150px orange inset;
- border-left: 60px blue outset;
> Padding
Unfortunately when you add a border to something it will go as high and wide as the content (unless you've specified a height for it), but if you don't want to give it a height, just want some room around your content, you apply padding to element.
Example:
<html>
<head>
<style type="text/css">
td {
border: 5px double red;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
</tr>
</table>
</body>
</html>
The padding can be different for seperate sides however. You can use :-
- padding-left: 10px
- padding-right 10px
- padding-top: 10px
- padding-bottom 10px
- padding: 10px 10px 10px 10px
(where red=top blue=right green=bottom orange=left)
> Margin
Margin is used in exactly the same way as padding, except that it controls the distance form the elements to things around it.
Eg. you wanted td's 10px apart.
<style type="text/css">
td {
margin: 10px;
}
</style>
As with padding the following properties can be used :-
- margin-left: 10px
- margin-right 10px
- margin-top: 10px
- margin-bottom 10px
- margin: 10px 10px 10px 10px
(where red=top blue=right green=bottom orange=left)
/* That is it for now! This was only a simple CSS tutorial, but I will be writing a new one, a bit more advanced then this.
Hope you liked it, comments welcome :) */
Thread Moved by Nick. (Forum Super Moderator): Fantastic tutorial, well done!
By Slud of Habbo UK */
In order to use CSS, you must have a basic knowledge of xhtml/html.
What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style anything in a html document, so as not to clog up all your code.
Eg. instead of having to type bgcolor="red" into 'td 'every element, with css you can write td { background: red; },
and every single 'td' in the document will have a red background color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Making a style rule
RED = Selector
BLUE = Property
GREEN = Value
Selector { Property: Value; } To write a style rule:
1] Replace 'Selector' with the element you want to format. These generally tend to be html tags.
eg. li, body, table, a etc.
2] Type { to start the declaration.
3] Replace 'Property' with the CSS property that formats the element as you'd like. Some of these include: background-color (NOTE: Not 'bgcolor' as in html), height, width, border etc.
4] Replace 'Value' with a unit or option available for that property. For example for 'background-color' you may wish to put '#80000'. And for height you woudln't put '#800000', you'd put a unit like '500px'.
5] Repeat 3-4 to add more rules. If you are using more than one rule, they must be separated by a semicolon - ;.
Note: You may add spaces or tabs in the code to make it more readable, as long as the semicolon remains at the end of each style rule.
6] When you're done put a } at the end.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2. Adding Comments
To add a comment to a style sheet, simply put '/*' at the beginning and '*/' at the end of your comment.
Example:
/* this makes the background red */
body {
background-color: red;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3. Values
Some properties only accept certain predefined values, some only accept numbers or percentages, some only accept colours, and some accept a mixture of all three.
Predfeined Values
Some properties only accept certain values.
Example:
WON'T WORK
body {
background-color: 5px;
}
WILL WORK
body {
background-color: red;
}
Lengths and percentages
Pixels - Px - 1 Pixel on the monitor.
Percent - % - Part of one bigger thing. 75% = 3/4
Em - em - Font size of current element. 2em = Twice font size.
Inches - in - Inche, r/l measurement.
Centimetres - cm - Centimetre, r/l measurement.
Millimeters - mm - Millimetre, r/l measurement.
Points - pt - 1pt = 1/72in
Pica - pc - 1pc = 12pt
URLS
Some properties require you to specify the url of another file or image.
Type url("file.ext") where file is the file name, and ext is the extension. 'url' is required.
Note: No space between 'url' and '('
Colors (Colour in english, but this is american.)
There are three ways to specify a color in CSS. We'll use the color 'maroon' here.
1. RGB value -
body { background-color: rgb(128, 0, 0); }2. Hexadecimal value -
body { background-color: #800000; } (# is required).
3. Colour name -
body { background-color: maroon; }~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. Adding the style sheet to your document.
Method 1.
Put the style sheet in the head of your document:
<html>
<head>
<style type="text/css">
a {
color: blue;
}
</style>
</head>
</html>
Method 2.
Write the css in a seperate file and save it with the extension '.css'. (Example - style.css)
then link to it in the head section.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
</html>
NOTE: In XHTML, the ' />' is required and the style sheet must be in the same directory as the html document for the example above to work.
Also..
To create two different style sheets, and let the visitor choose.. create one as before:
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
The visitor can choose the stylesheet from the 'view' section of your browsers menu, however currently, only Firefox and opera support this.
#####
Alternate way
<html>
<head>
<style>
@import url("style.css");
</style>
</head>
</html>
This method is used to hide rules from buggy browsers like Netscape 4.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5. Styling elements locally
To style an element in a html document add style="#" in the elment and replace # with your style rule.
Example:
...
<body>
<img src="mypic.png" alt="mypic" width="100" height="100" style="border:5px solid #000000;" />
</body>
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. Selecting elements.
1. By name.
As stated before selectors are usually the tags found in the html.
To style all elements of one kind, simply use that tag as the selector.
Exmaple: I want all my h5 headers green.
(Note: CSS from now on is shown internally, but for faster loading of your page, external is recommended.)
<html>
<head>
<style type="text/css">
h5 {
color: green
}
</style>
</head>
<body>
<h5>This is green!</h5><br />
<h4>This is not!</h4>
</body>
</html>
2. By ID or Class
In html/xhtml you can label elements with a 'class' or 'id'.
To name an element that appears once in your page and is unique we use 'id' in the html, and '#' in the css.
To name an element that appears more then once or in a group we use 'class' in the html, and '.' in the css.
To style an element with an id or class we do the following:
<html>
<head>
<style type="text/css">
div#unique {
background: red;
}
div.group {
background: green;
}
</style>
</head>
<body>
<div id="unique">
This div has a red background!
</div>
<div class="group">
This div has a green background!
</div>
<div class="group">
This div also has a green background!
</div>
</body>
</html>
3. Part of an element
We can select the first line, or the first letter of an element using the following method.
<html>
<head>
<style type="text/css">
p:first-letter {
color: green;
}
p:first-line {
color: red;
}
</style>
</head>
<body>
<p>This line is going to be green!<br />
This line is not!</p>
</body>
</html>
Also, the 'T' on this would have been green, as we specified in the stylesheet.
NOTE: To style two or more elements the same, and save yourself some typing, just put two elements at the beginning of the style rule and separate them with a comma:
h1, h2 {
color: #ff0000;
}
~~~~~~~~~~~~~~~~~~~~~~~~~
7. Simple CSS formatting
> Font family
Specifying the font of your element is easy, but what if the person viewing your site doesn't have that font? Specify another as a back-up, and if they don't have that, you can put a generic font such as 'sans-serif' or 'serif'.
p {
font-family: arial, helvetica, sans-serif;
}
Where arial is the preferred font, helvetica is the 2nd choice, and sans-serif is the generic font.
> Italics
Making text italic is very simple and saves you adding <em> or <i> to your html.
p {
font-style: italic;
}
> Bold
As with italics you can also make your text bold.
p {
font-weight: bold;
}
Instead of 'bold' you can also use 'lighter', 'bolder', or type a multiple of 100, between 100 and 900 (100, 200, 300, 400, 500, 600, 700, 800, 900), where 400 is normal, and 700 is bold.
> Font size
You can specify the size of your text, rather than continually adding '<font size="#"'.
p {
font-size: 12px;
}
You don't have to use 'px', any of the units listed in section 3 work along with:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
> Font color
Same as specifying the color of anything.
p {
color: red;
}
> Aligning
Text
To align text simply use the property 'text-align' with the three predefined values: left, right and center. Note: Center not centre.
Floating
to float an object use the property 'float' with either left or right. This will cause the element to align in direction you chose, and anything next to that will wrap around the opposite side.
> Font variant and decoration
To utilise smallcaps use the property 'font-variant', with value 'small-caps'.
To underline text use the property 'text-decoration', with the value 'underline'.
To overline text use the property 'text-decoration', with the value 'overline'.
To put a line through text use the property 'text-decoration', with the value 'line-through'.
To get rid of text-decoration, use the value 'none'.
<html>
<body>
<!-- NOTE: I'm using local styling here -->
<p style="font-variant:small-caps;">This paragraph is in small caps!</p>
<p style="text-decoration:underline;">This paragraph is underlined!</p>
<p style="text-decoration:overline;">This paragraph is overlined!</p>
<p style="text-decoration:line-through;">This paragraph has a line through it!</p>
<p style="text-decoration:none;">This paragraph is normal</p>
</body>
</html>
> Border
To add a border to any object simply use the 'border' property, with a value including a width (eg 2px), a colour (eg yellow), and a style (none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit).
<html>
<head>
<style type="text/css">
td {
border: 5px double red;
}
</style>
</head>
<body>
<table>
<tr>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
<td>This TD has a 5px double border!</td>
</tr>
</table>
</body>
</html>
You can also style each side seperately.
- border-top: 1px green ridge;
- border-right: 4px red groove;
- border-bottom: 150px orange inset;
- border-left: 60px blue outset;
> Padding
Unfortunately when you add a border to something it will go as high and wide as the content (unless you've specified a height for it), but if you don't want to give it a height, just want some room around your content, you apply padding to element.
Example:
<html>
<head>
<style type="text/css">
td {
border: 5px double red;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
<td>This TD has a 5px double border, and the content is 10px from the edge!</td>
</tr>
</table>
</body>
</html>
The padding can be different for seperate sides however. You can use :-
- padding-left: 10px
- padding-right 10px
- padding-top: 10px
- padding-bottom 10px
- padding: 10px 10px 10px 10px
(where red=top blue=right green=bottom orange=left)
> Margin
Margin is used in exactly the same way as padding, except that it controls the distance form the elements to things around it.
Eg. you wanted td's 10px apart.
<style type="text/css">
td {
margin: 10px;
}
</style>
As with padding the following properties can be used :-
- margin-left: 10px
- margin-right 10px
- margin-top: 10px
- margin-bottom 10px
- margin: 10px 10px 10px 10px
(where red=top blue=right green=bottom orange=left)
/* That is it for now! This was only a simple CSS tutorial, but I will be writing a new one, a bit more advanced then this.
Hope you liked it, comments welcome :) */
Thread Moved by Nick. (Forum Super Moderator): Fantastic tutorial, well done!