11-06-2011, 03:46 PM
1. External Style Sheets
Using external style sheets instead of internal or inline style sheets will keep your HTML page very clean.
I recommend everyone uses external in all of their work.
It allows you to change the whole website's appearance just by changing one file. Each page that you want the style on must contain the <link> tag inside of the heading.
Example:
In order for the above to work, you need an actual style.css file.
in the file you put content similar to this:
The above is the actual background for Hackforums, minus the bg.png.
Then we would but this in the HTML doc
2. Internal/Inline Style Sheets
Internal or Inline style sheets should only be used when you want a certain page to have a certain design.
The page containing internal style sheets must be within the <head> tags and use the style tags.
Example:
Inline style sheets can also be used like this:
OR
3. Multiple Style Sheets
Multiple style sheets can cascade into one.
I don't recommend using these unless you have an abnormally sized CSS file.
Let's do an example of using Multiple SS's
style1.css contents
style2.css contents
Then in the HTML doc, you would need this in the head tags:
Using that would make your body's style the same as
OR
Ending
Thanks for reading my tutorial on the different types of Cascading Style Sheets.
Constructive criticism on my work is appreciated.
Using external style sheets instead of internal or inline style sheets will keep your HTML page very clean.
I recommend everyone uses external in all of their work.
It allows you to change the whole website's appearance just by changing one file. Each page that you want the style on must contain the <link> tag inside of the heading.
Example:
PHP Code:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
In order for the above to work, you need an actual style.css file.
in the file you put content similar to this:
PHP Code:
body {background: #333333;color: #ccc;text-align: center;line-height: 1.4;font-family: Verdana, Arial, Sans-Serif;font-size: 13px;font-style: none;}
The above is the actual background for Hackforums, minus the bg.png.
Then we would but this in the HTML doc
PHP Code:
<body>This text will be centered and be a purple-ish color.</body>
2. Internal/Inline Style Sheets
Internal or Inline style sheets should only be used when you want a certain page to have a certain design.
The page containing internal style sheets must be within the <head> tags and use the style tags.
Example:
PHP Code:
<head>
<style type="text/css">
body {
background: #333333;
color: #ccc;
text-align: center;
line-height: 1.4;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
font-style: none;
}
</style>
</head>
Inline style sheets can also be used like this:
PHP Code:
<p style="color:#873348;text-align: center;">This text will be centered and be a purple-ish color.</p>
OR
PHP Code:
<body>This text will be centered and be a purple-ish color.</body>
3. Multiple Style Sheets
Multiple style sheets can cascade into one.
I don't recommend using these unless you have an abnormally sized CSS file.
Let's do an example of using Multiple SS's
style1.css contents
Quote:body {
color: #873348;
}
style2.css contents
Quote:body {
text-align: center;
}
Then in the HTML doc, you would need this in the head tags:
Quote:<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
This text will be centered and be a purple-ish color.
</body>
Using that would make your body's style the same as
PHP Code:
<p style="color:#873348;text-align: center;">This text will be centered and be a purple-ish color.</p>
OR
PHP Code:
<style type="text/css">
body {
color:#873348;
text-align: center;
}
</style>
Ending
Thanks for reading my tutorial on the different types of Cascading Style Sheets.
Constructive criticism on my work is appreciated.