★Introducing CSS
CSS stands for Cascasing Style Sheets. Here's the definition of CSS by Wikipedia:
In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
CSS is used to help readers of web pages to define colors, fonts, layout, and other aspects of document presentation.
» more?
CSS is always placed between the <head> and </head> tags. They will always contain a selector, property and a value and are always in the format of:
SELECTOR {PROPERTY: value}
Basically a style sheet acts like the definition or the parameters of your HTML document. By placing it in the HTML source of a page, every element of that page will follow the parameters outlined by the style sheet (unless specified otherwise). This is very useful to create a standardised look on your page.
★Internal CSS
Internal CSS basically means that you place the entire style sheet code between the <head> and </head> tags in your HTML source of your webpage. This is commonly used when there's only one page on your website, OR when every webpage on your site is to be styled differently.
Here's how to start your code with internal CSS:
<head>
<style type="text/css">
-YOUR STYLE SHEET-
</style>
</head>
...
★External CSS
External style sheets are being used when you have multiple pages on your website that are all bounded to the same CSS codes. Hence instead of painstakingly putting up internal CSS codes for every page, since they're all going to be the same, we can take a short-cut and use a link to an external style sheet. Here's how to do it:
Step 1: Enter your entire CSS code in a Notepad file and save it with a file extension of .css (let's say your file name is my_index.css)
*IMPORTANT: the CSS code in your Notepad file must exclude the <style type="text/css"> and </style> tags
Leave just purely your CSS codes.
Step 2: For each of your webpage that you want to be bounded to this style sheet, add the following code between your <head> and </head> tags:
And there you have it! You're done!
