CSS Using Tutorial
"Using" Cascading Style Sheet is far easy then it look. You just have to follow some tutorial and tips below, you can easily build your own site by using CSS.
ID & Class | Divisions | Inline Style | Embedded Style | Import Style | External Style | Deeper Tutorial
ID & Class
Before start using CSS, you have to learn more about ID & class. ID and class is for you to identify each element in your document.
ID, is an unique indentifier to an element, which can only use once per page.
Example:
<div id="header">Something to put here<div>
Class, is a indentifier for you to identify many element with similar properties. Using class wisely can help you save space and time and building your page easily.
Example:
<p class="red">Paragraph with red font<p>
<p id="unique">Unique paragraph with unique style<p>
<p class="red">Another paragraph with red font<p>
Divisions
Divisions is an important, and a must in valid xHTML. Old style HTML page mostly designed by using table element, which is already eliminated in Web 2.0. Nowadays, if you want your site have better search ranking and visit by more visitors, you MUST use divisions instead of old school table for layout.
Divisions is a building block of most CSS webpage. There is many ways to use divisions in a webpage, from creating main content area to navigation bar area or even small little footer block. Try using division yourself with CSS and you can know it's no meaning for CSS without divisions.
Divisions tag: <div> </div> (Must have closing tag)
Inline Style
Inline style is easy-to-use style, which you only need to add "style" attribute to tag that you want to have specific style. This is recommended if you only want to add some style to your page. If you looking to add many style within a page, you have to use other ways.
Example: <p style="color: red;">Hello World!</p>
Embedded Style
Embedded style is second ways to add CSS style into your web page. It is recommended to use this if your host not support .css file. If you want to add mass CSS style into a page, this method is not recommend.
To add embedded CSS, add a <style> tag at the header part can do so. Example: <head>
<title>CSS Design</title>
<style type="text/css">p {color: red;}</style>
</head>
Import Style
Import style is for you to import external css file. External css file have extension of .css. To add import style, you can see example below:
<head>
<title>CSS Design</title>
<style type="text/css">@import url(external.css)</style>
</head>
External Style
External style is recommended for most user. You can use this method for many ways. Example:
<head>
<title>CSS Design</title>
<link rel="stylesheet" media="screen"
type="text/css" href="external.css" /></head>
You can also change the "screen" of "media" attributes to "print" and "handheld". Print is for you to design a page to show on your visitors paper after printing it out. using less colour and design at "print" style can help your visitors to save ink. "Handheld" is for you to design a page suitable for mobile to visit your page.
Deeper Tutorial
Before using embedded, import or external style, it is recommended that you apply ID or Class to any element you want to apply style. After apply ID and Class, you can now give properties and settings for them.
After apply ID and class, you can added the code below at appropriate area or your external css file for styling.
Example:
Your HTML file:
<p class="red">Red paragraph in your page.</p>
Your CSS style in embedded area or external file:
<p id="unique">Unique paragraph</p>
<p class="red">Another red paragraph.</p> p.red {
color: #ff0000;
}
p#unique {
color: green;
}
This is what you will get by using code above:
Red paragraph in your page.
Unique paragraph
Another red paragraph.
.(dot) for Class and # for ID
In CSS, use . (dot) for class styling and # for ID styling. Remember this because if you use wrong one, your CSS will not work in your page.
Until here, I believe you already handle basic concept and usage of CSS. You can now click CSS Reference on your left hand side for more properties and usage.