Basics of CSS

CSS stands for Cascading Style Sheet.

CSS can set the look of every page on your website.

You can control the font color, font size, background image, background color, link colors, lists, tables, borders, padding, margins, navigation bars, alignment, etc, ALL from one style sheet.

It saves a lot of work.

Below is an Example of the style sheet code.
Where it says Code Here is where you place ALL the codes
to control the look of your website from one style sheet.

<style type="text/css">Code Here</style>

CSS Style Sheet for Links

CSS Style Sheet Example for Links, change colors to whatever colors you want. Place the style code in the head section of your page, and the links in the body section of your page.

a:link {background-color:#3333CC;}
a:visited {background-color:#FFCC33;}
a:hover {background-color:#FF3300;}
a:active {background-color:#3399FF;}

Style Code

<style type="TEXT/CSS">a:link {background-color:#3333CC;}a:visited {background-color:#FFCC33;}a:hover {background-color:#FF3300;}<br />a:active {background-color:#3399FF;}</style>

Links

<a href="http://url.com">Link 1</a><br /><a href="http://www.url.com">Link 2</a><br /><a href="http://www.url.com">Link 3</a><br /><a href="http://www.url.com">Link 4</a><br /><a href="http://www.url.com">Link 5</a><br /><a href="http://www.url.com">Link 6</a>

Here is a great HTML Color Chart

Links To Blogger Tips

---

Set Post as Home Page

---

Hide Post Date

---

Create Tab View

---

Expandable Posts or Read More Hack

---

Yahoo Tab View Widget

---

Make Your Blog Ready For Mobile Phones

---

Recent Post with Thumbnails Widget

---

Cool Blackberry Layout

---

Scroll Box

Scroll Down for Horizontal Photo Scroll Box

Content Here, could be text, photos, etc... Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

<div style="text-align:left; padding:10px; width: 280px; height: 100px; background-color: yellow; border-color: purple; border-width: 1px; border-style: solid; color: #000000; font-size: 14px; font-family: Arial; overflow: auto;">Content Here, could be text, photos, etc...</div>

<div style="overflow:auto; width:400px;"><div style="width:2000px;"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"><img src="imgURL" width="200" height="200"></div><br /></div>

How to Display Raw HTML on Web Page

To display raw html code on a web page, it is best to test on different browsers.
For Internet explorer some characters need to be encoded to their HTML entities.
I use an HTML Encoder on http://www.web2generators.com/

HTML Lists

HTML Lists

(Scroll Down for more List Examples)

Below is a One Column Unordered List

• Item 1
• Item 2
• Item 3

<ul style="list-style: none; "> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>

<ul style="list-style: none; "> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>

Below is an Unordered list without using list-style: none.
If you do not use list-style: none, you will get bullets in front of each item.

• Item 1
• Item 2
• Item 3

<ul> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>


Below is a 2 Column Unordered List using Divs

• Left Item 1
• Left Item 2
• Left Item 3
• Left Item 4
• Left Item 5

• Right Item 1
• Right Item 2
• Right Item 3
• Right Item 4
• Right Item 5

<div style="float: left; width: 50%;"><ul style="list-style: none; "><li>Left Item 1</li><li>Left Item 2</li><li>Left Item 3</li><li>Left Item 4</li><li>Left Item 5</li></ul></div><div style="float: right; width: 50%;"><ul style="list-style: none; "><li>Right Item 1</li><li>Right Item 2</li><li>Right Item 3</li><li>Right Item 4</li><li>Right Item 5</li></ul></div>

Below is a One Column Ordered List using ol instead of ul, which numbers your list items

1. Item 1
2. Item 2
3. Item 3

<ol> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ol>

Align Table Content

Align Content

To align the whole table: <table align="center">rest of table code</table>

To align content in a column cell<td align="left">text</td>

You can also align with a paragraph:<td><P align="right">text</p></td>

<td align="left">Align td column left</td>