CSS Course

For Beginners

By Dr. Andrew Williams

http://ezseonews.com

http://ezseonewstutorials.com

http://keywordresearchlab.com

Version 1.0

IMPORTANT I am unable to answer individual questions on CSS. If you have any CSS problems, I suggest you search Google for answers as this tutorial will give you enough confidence to go out on your own, in your CSS adventure. If you cannot find an answer, you can send me an email, and although I may not reply directly to you, I may answer your questions in my newsletter.

LEGAL STUFF

Names of people, trademarks, company names, brand names & service marks are the property of their respective owners and are used in editorial commentary as permitted under constitutional law. Andrew Williams has made his best efforts to produce a high quality & informative document. He makes no representation or warranties of any kind with regards to completeness or accuracy of the information within the book. The entire contents are ideas, thoughts & opinions expressed solely by the author after years of research into the workings of the search engines. The author and publisher shall in no event be held liable for any loss or other damages caused by the use and misuse of or inability to use any or all of the information described in this book. By using the information in this book, you agree to do so entirely at your own risk. The contents of this document are protected by world wide copyright treaties and may not be reprinted, copied, redistributed, transmitted, hosted, displayed or stored electronically without express written permission of Andrew J Williams. All rights reserved World Wide.

2007 Andrew J. Williams

Contents RECOMMENDED CSS EDITORS 1

1. INTRODUCTION 2

2. TABLE-LESS PAGE LAYOUTS 6

3. CSS BASICS 9

4. USING TOPSTYLE LITE FOR EDITING STYLE SHEETS 14

5. PSEUDO CLASSES 21

6. PSEUDO-ELEMENTS 28

7. THE “FLOAT” PROPERTY 33

8. IDS AND CLASSES 37

8.1. ID SELECTORS 39

8.2. CLASS SELECTORS 40

9. LENGTH UNITS 43

9.1. EX 46

9.2. PX 46

9.3. PERCENTAGE 46

9.4. EM 47

10. DIVS 49

11. CREATING A SIMPLE 2 COLUMN LAYOUT 52

12. A 2 COLUMN LAYOUT WITH FOOTER 56

13. A SIMPLE 3 COLUMN LAYOUT 63

14. THE BOX MODEL 66

15. POSITIONING BOXES USING ABSOLUTE POSITIONING 69

16. 2 COLUMN POSITIONED LAYOUT 73

17. COLUMN POSITIONED LAYOUT 78

18. CREATING A BASIC MENU USING CSS 82

18.1. CREATING A MENU FROM AN UNORDERED LIST 83

19. MENU EYE CANDY 87

20. CREATING HORIZONTAL MENUS USING LISTS 91

21. GET YOUR OFFER SEEN WITH THIS CSS TECHNIQUE 94

22. PLAYING WITH BACKGROUND IMAGES 96

23. USING AN IMAGE AS THE BULLET OF A LIST. 98 SUMMARY 99

1

Recommended CSS Editors

A good free CSS editor to get you started can be found on the Topstyle

site. The tool is called Topstyle Lite, and you can get it here:

http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdV

iew=lite

The full version of this tool adds a lot more features-

Topstyle:

http://www.bradsoft.com/

Another excellent CSS tool, is rapid CSS. This tool is cheaper than

Topstyle, and has a very similar toolset.

Rapid CSS

http://www.blumentals.net/rapidcss/

2

1. Introduction

Simply put, CSS (Cascading Style Sheets) is a powerful "tool" that

webmasters have available to them, to help them design and then

further, maintain the look and feel of their sites, with minimum effort.

In this chapter, I just want to wet your appetite for style sheets, and show

you their potential. In the remainder of this book, I'll show you how to do

this yourself.

In what follows, I'll show you some example pages, and invite you to look

at the source code of those pages. To do that, right click the web page,

and select "View Source", or View Page Source in Firefox.

Alternatively, you can view the source code of the

pages by using the View menu at the top of your

browser (some basic HTML knowledge is required to

follow what is going on).

OK, let's begin with a simple example.

You know those horribly large H1 header tags? To

make your site look more professional, you might

want to make those headers smaller. You could

just use an H2 or H3 header, but then you risk losing

the possible SEO benefits of an H1 tag.

Using CSS, you can make them appear smaller, but then you can also make them smaller using

standard HTML tags in the page, so why bother with

CSS?

Have a look at the source code of this page. It

uses HTML tags in the web page to control the sizes

of the font.:

http://ezseonewstutorials.com/csscourse/1/1.html

I can even control the fonts using HTML tags in the document.

3

Here, take a look at the source of this page:

http://ezseonewstutorials.com/csscourse/1/2.html

Now look at this page, which uses CSS to control the size and the font of

the text:

http://ezseonewstutorials.com/csscourse/1/css1.html

http://ezseonewstutorials.com/csscourse/1/style.css

What do you notice about the source code of these different pages?

Do you see how there is no HTML formatting tags in the page using CSS?

All the page does is specify which text is an H1 header, and which text is

a paragraph. Even without these formatting tags, the text is formatted!

Do you also see that the non-CSS pages need to have the HTML tags to

tell the web browser which fonts and sizes to use.

You should notice that the size of the non-CSS files are larger than those

using CSS, and far more complex.

Now, imagine you have 100 pages on a site, and you want to change

the font sizes and colours on all 100 pages. If you have used HTML to

specify size and style of your fonts, then you'll need to change 100 pages. However, if you use CSS to control the size and style, you only

need to edit one file.

To demonstrate this, look at this web page:

http://ezseonewstutorials.com/csscourse/1/css2.html

The source of that web page is identical to the source of this one:

http://ezseonewstutorials.com/csscourse/1/css1.html

4

The only difference is that I have used a different style sheet (to simulate

the editing of the original style sheet) to control the appearance.

- first page http://ezseonewstutorials.com/csscourse/1/style2.css

- second page

http://ezseonewstutorials.com/csscourse/1/style.css

That means, by editing one file (the style sheet) I made sweeping

changes to the appearance of the page (and every page using that

style sheet).

On a 100 page site using CSS to control the appearance, all 100 pages

would have changed the moment I uploaded my edited style sheet.

Now can you see the potential?

Have a look at the source code of these two HTML documents:

- Non-CSS

http://ezseonewstutorials.com/csscourse/1/2.html

- CSS http://ezseonewstutorials.com/csscourse/1/css2.html

Which would you imagine was the bigger file (and remember bigger = slower loading).

Well, the CSS page looks more complicated, but here are the file sizes:

non-css file: 485 bytes

css file: 407 bytes

The page using CSS is smaller.

The formatting of the web page using CSS has all of the formatting

commands in its style sheet, not in the HTML file, so the HTML file is smaller:

http://ezseonewstutorials.com/csscourse/1/style2.css

5

Now you may be thinking that its not that much smaller, but we are

talking about a page that has very little content.

To give you a better idea, when I switched my ezseonews.com site over from non-CSS to CSS, the file size of the homepage went from 18 Kb

down to 12 Kb. That’s a 30% saving, and the file sizes would be even

smaller if I removed all inline formatting that still exists from the original

non-CSS design I converted from.

What I have shown you is only the beginning. CSS can be used to

position elements on your page, such as right and left menus. Have a

look at my ezseonews.com homepage, and view the source. Most

beginners would have used tables to position the left and right menus

(and my original site did), but I have used CSS. It means quicker loading

times of the pages, and smaller, less-complex code.

In this CSS tutorial, I'll show you how to do all of this for yourself :o)

6

2. Table-less Page Layouts

In the last chapter I gave you an introduction to Cascading Style Sheets

(CSS) by showing you some examples of text formatting using stylesheets.

You also saw how quickly you could change the look and feel of a

complete site, by changing one file - the stylesheet.

In this chapter, we'll continue with this introduction by looking at another

powerful use of CSS - tableless web page layout. I’ll show you some

simple examples of what is possible.

Remember, this chapter is just an introduction. I wont be showing you

now how to do this for yourself. That will come later in the tutorial.

OK, let's start off by looking at a web page which has been laid out using

tables. Look at this page, and examine the source code:

http://ezseonewstutorials.com/csscourse/2/table1.htm

Those of you familiar with HTML tables will see a simple 3 column, 3 row

table, where some of the cells have been joined to form the header and

the footer cells. This simple file is 749 bytes in size.

OK, now let's look at another page which has a similar layout, but uses

CSS instead:

http://ezseonewstutorials.com/csscourse/2/nontable1.htm

http://ezseonewstutorials.com/csscourse/2/nontable.css

Have a look at the source code behind this page. Note that this simple

layout is 609 bytes in size. It achieves essentially the same thing, but in 140

fewer bytes.

You'll notice that there are no table tags. Each section of the page

(header, menus, footer and main section) is contained in its own little

block of code.

Each block of code starts with a line that tells the web browser how to

format that section.

7

e.g. <div id="main"> YOUR MAIN CONTENT GOES HERE </div>

..defines a block of code that the web browser should format using the

“main” ID that can be found in the style sheet.

This should start to make more sense as we go through this tutorial, so

don't become disheartened if you are finding this difficult.

If we compare the table, and tableless html files, there isn't much

difference in the size of the two pages. However, the look of the CSS

one is crisper and clearer (try looking at both web pages in different

browsers and I think you'll agree).

The positioning of the page layout using CSS is done with pinpoint

accuracy, whereas the page designed with tables is more likely to suffer

problems as you add content (and require graphics to help space out

the columns properly).

OK, now look at this page:

http://ezseonewstutorials.com/csscourse/2/nontable2.htm

http://ezseonewstutorials.com/csscourse/2/nontable2.css

This is the same file as the first CSS layout, but I have edited the stylesheet. Imagine if you had 100 pages on your site, and you could

change the look of the site, this dramatically, by changing one file. Are

you seeing the potential of CSS? Also note that this file is only 610 bytes – that’s just one more byte than the previous tableless template. How big

would a template like this be if it were built with tables?

Have a look:

http://ezseonewstutorials.com/csscourse/2/table2.htm

This is a page using tables to achieve the layout. This file is 1249 bytes –

more than twice as large as the CSS one.

IMPORTANT

If you have thought about the space savings, you probably have

wondered about the size of the style sheet. E.g. if my style sheet was 2

8

Kb in size, and the web page was 10Kb in size, doesn’t that mean the

browser needs to download a total of 12 Kb for the page?

Well, yes, and no. You see, the browser will cache the style sheet,

meaning that it will be downloaded once, and remembered and applied to all pages that use it.

Once the style sheet has been downloaded the first time, the browser

will only need to download the HTML files from then on.

In Summary

In the first two chapter of this course, I hope I have shown you the

potential of CSS.

Starting in the next chapter, I'll be teaching you how to do this, starting at

the absolute beginning, and taking you through it all in baby steps. I will

assume a little HTML knowledge, but otherwise, I am hoping complete novices can use this tutorial.

If you enjoyed this introduction to CSS, you might

be interested in buying the complete CSS

course. Read more about the course here:

http://ezseonewstutorials.com/csstutorial.html

9

Interested in a Free Affiliate Training

Manual?

Creating "Fat" Affiliate Sites

By Dr. Andy Williams

Why bother to download my eBook? If it’s free, is it worth reading?

I originally released my “Creating Fat Affiliate Sites eBook” to a select few

people to get some feedback. Here are some of the comments:

"Dear Andy, I just have to thank you once again for the sheer quality of

the information to provide - it's the sort of thing lesser beings would love

to have so they could sell it - and you give it away.

Best wishes Darrell "

"Hello Dr Andy I won't be able to sleep tonight out of guilt If I don't let you

know this.You have provided great information with your reports.I have

seen people selling crap for 27 and 37 yours is hands down the best!! You

have really gone the extra mile.God can't be everywhere thats why he

created Dr Andy :)

Sincerely Manoj"

"Free eBooks don't often get read, which could be a shame. If people

who download "Creating 'Fat' Affiliate Sites" think it's just another eBook

to store on their hard disk, they will miss out on a wonderful opportunity.

This book is the best affiliate marketing guide I have ever read, at any

cost, and I have bought most of them. I can't beleive this ones free.

Thanks Andy, great job. Pete”.

"How wonderful!!!! I kinda hoped you'd turn it into a pdf. For what it's

worth, this pdf that you give away is better than anything I've purchased

(and I've purchased a lot). I hope that whoever gets it appreciates what

they have - probably the best book on affiliate marketing there is. White

Wolf”

"There are so many ebooks online that are a total waste of money, but

even more importantly a waste of my time. In fact, the sellers should pay

me to read some of them. It was so refreshing to read Dr. Andy Williams’

“Creating Fat Affiliate Sites” ebook. It tells you exactly what to do, what

tools to use, and what steps to take to build profitable affiliate sites that

rank well in the search engines. And hey, guess what, it’s a plan that

10

actually works! If you are struggling to get started with affiliate marketing

or you are not making the type of money you would like, this ebook will

tie up all the loose ends to get you going quickly. John “

"I have often heard the term over-deliver from marketers who think it applies to them. With the exception of Ken Evoy, I can't think of anyone

else except Dr. Andy who deserves the title of Mr. Overdeliver. This eBook

is going to be one of the greats in the field of affiliate marketing. Alison”

"Great book Andy. Thanks for all your help. I know you are a busy guy,

yet you always reply to my emails when I ask for help. The course in this

book is so much better than the one by ******* which costs $XXX!!!! .

Bryan”

"Are you crazy giving this away? Andy”

"Hi Dr Andy, Your materials, software and support are 100% responsible

for my current internet success. After trying other methods unsuccessfully I now make a full time online income.

Your current book sets it out like never before. Even a total beginner (like

I was 12 months ago) could follow this blueprint and earn money online

with the appropriate effort on their part. It won't be fast, but it will work,

because it worked for me. Peter”

"I built my 1st websites using Andy Williams' methods beginning just over 2

years ago and every one of those websites is still indexed in all the major

search engines and they're all still earning money.

Using only Andy's methods and software,as described in "Creating Fat

Affiliate Sites", my websites maintain CTR's of up to 34.2% month in month

out with an average CTR across the range of them of about 14%.

Anybody can take "Creating Fat Affiliate Sites", follow the easy to read

steps, and have their brand new website indexed in days and earning

income from Affiliate programs, Adsense or selling their own products in

less than a week... even a complete newbie. Russell”

"Your "free" ebook is better then most of the paid stuff out there. You really do go the extra mile. DavidS”

"Hi Andy, I finally took a look at your latest affiliate ebook. I just wanted to thank you for releasing this easy to follow guide for

creating profitable content sites. After reading tons of popular affiliate

books out there, your advice is the only advice I follow for creating 'FAT' affiliate sites.

Thanks for spending the time to put together this great resource. Linx”

11

"I would have paid for this book! I love this internet business but with it’s

constant changes I depend on Andy to help keep me up to date. He is

brilliant at what he does and I have the wonderful privilege of learning

from him. This ebook is just another example of how Andy cares about

people and the many hours he spends of his own personal time helping others to succeed. It may be free but it’s worth your success if you will

take the time to read it. Whether you are a beginner or not this book has

something to offer everyone. It has a step by step plan with all the latest

techniques and ideas. Don’t miss this one or you’ll be missing out on

some very valuable information that is key to your success. Maren”

"Andy - your newsletter is one of the few I actually still subscribe too due

inlarge part to the material you put out with the intent to help your

subscribers make money instead of parting with their money. Your new

ebook is just another example of why manypeople, including myself,

respect what you have to say in regards to online marketing.

Nicely Done!!! Tim “

"I've downloaded your free report "Creating fat affiliate sites"

and I already read half of the way through. I can't believe

you give out for free with this most valuable information. I

have purchased and subscribed so many guru reports and

memberships but so far none of them spills the guts to tell

the truth of the real deal in making affiliate income. In fact,

I suggest you should charge a whole lot for your reports

and definitely worth it. Anthony”

"Thank you, Andy! You have saved me a TON of work. I saved all of those emails, and was in the process of stripping out the lessons to create my

own ebook to make studying the lessons easier. Now I don't have to.

BTW, it's the quality of the articles you send in your newsletter that makes it the very first - and sometimes the only - email I open and read as soon

as I receive it. Thank you so much! Mary”

"Dear Dr. Andy, I hereby want to thank you for releasing your latest

ebook "Creating FAT Affiliate Sites". This book simply rocks! I think this is

everything a newby and even advanced affiliate marketeers need to

build their own online affiliate business. I find it really an astonishing piece of work. It covers step by step instructions on how to build a succesfull

affiliate website and it gives more than plenty of indepth information on

keyword research, writing articles, getting quality traffic and so on. And the best part of it is that it is completely free.....

I think it is better than most ebooks for which you have to pay for, so Andy I would really think it over to give this ebook away for nothing...:-).

Again, thank you very much for handing over this great tool for building

a succesfull affiliate website. Kind regards, Max"

12

I have listed the table of contents below, but if you are ready to

download "Creating 'Fat' Affiliate sites", just scroll to the end of this page.

CONTENTS

1. Avoid Being a Thin Affiliate 1 1.1. Google Report Analyzed 1

Summary of Google’s Webmaster Guidelines 2

1.1. Spam Techniques 7

1.1.1. Spam technique 1 - Sneaky redirects 7

1.1.2. Spam technique 2 - 100% Frame 7

1.1.3. Spam technique 3 - Hidden Text / Hidden Links 7

1.1.4. Spam technique 4 - Porn on expired domains. 8

1.1.5. Spam technique 5 - Secondary Search Results / PPC 8

1.1.6. Spam technique 6 - Thin Affiliate Doorway pages 9

2. An Overview of Building Fat Affiliate Sites 12

2.1. Process of building a "FAT" Affiliate site 12

3.1. Find several potential niches 14

3.2. Check to see which one is most profitable 19 3.2.1. Checking Demand 20

4. Keyword Research 24

4.1 Keyword Research Tools 25

4.1.1. Advice on Choosing a Keyword Research Tool 27

5. Working with Keywords 29

5.1. So, Which Keywords Should You Target? 29

5.1.1. Finding the Number of Competing Pages 30

5.1.1.1. Why use Quotes for Determining Competition? 30

5.1.1.2. Searching for your Ranking Position 32

5.2 Our Keyword Strategy 32 5.3. How to Group Your Keywords 33

6.1 What is an Article? 37

6.1.1. How can you find in-demand phrases that are EASY to write articles on? 39

6.1.2. What About High Competition Phrases. Can I use these for Articles?

46

7. Themeing Pages 48

8. Main Pages v Article Pages 56

8.1 The Purpose of Main Pages and Article Pages 57

8.2. Summary 59 9. The Art of Pre-Selling 61

9.1. Pre-Selling v Selling 61

9.2. How to Pre-Sell 62 9.2.1. Summary of the Pre-selling 62

10. An Example Article 64

10.1. Target profitable keywords 64 10.2. Ask yourself what someone who searches for "baby nursery themes"

is really looking for? 65

10.3. Decide on a writing style. 66

13

10.4. Flesh out your initial ideas. 66

10.5. Call to action 67

10.6. Create a headline 68

10.7. Keyword optimization concerns 69

11. Two Models for Creating Sales Pages 75 11.1. Pre-Sales Page - Model 1 77

11.2. Pre-Sales Page - Model 2 77

11.3 Plans of both Models 79

11.3.1. Model 1 79

11.3.2. Model 2 80

11.4. Summary 81

12. Articles Revisited 83

12.1. The Value Test for an article 83

12.2. The Value Test for a Site as a Whole 83

12.3. Creating Articles that Pass the Value Test 84

12.3.1. Writing Reviews 84

12.3.2. Discussion Articles 86

12.3.2.1. Some quick guidelines when writing your article 87 12.4. Stuck for ideas on what to write about? 88

13. Web Editors, Domain Names and Web Hosting Plans 89

13.1. Website Editors 89

13.2. Buying a Domain 90

13.2.1. The Domain Name 90

13.2.2. Hyphens or no hyphens 91

13.2.3. Domain Extension 91

13.3. Buying Web Hosting 92

14. Linking Strategies 95

14.1. Internal Site Links 95 14.1.1. Text links 95

14.1.2.Graphic links 96

14.2. Linking Pages together 98 15. Google Page Rank 100

15.1 Toolbar PR v the Value held at Google 101

15.2. PR Summary 103

16. Link Reputation 105

16.1. Some Incoming Links Can Help Your Rankings... 107

17. Tracking Visitors 110

18. Link Partner Pages 114 18.1. Why Add a Links Page? 115

19. A few Linking Considerations 117

19.1. Types of links 117 19.2. A link to your Sitemap 118

19.3. Disclaimer, Privacy, About Us and Contact Us links 119

19.4. Article Sitemap link 119 19.5. Link Partner Page 119

19.6. Other Links on the Homepage 119

20. Adding new Content to Your Site 122

14

20.1 Using Free Articles on your site for Content 125

21. Article Distribution 128

21.1 Article Directories 130

21.1.1. Create your own Article Directory 130

21.2 Submission to webmasters 131 22. Submitting to Directories 133

23. Affiliate Site v Adsense Income 135

23.1. Articles and Affiliate Sites 136

23.2. Articles and Adsense Sites 137

23.3. Becoming an Adsense Guru 137

23.4. Tracking Adsense 138

24. Single site, or several tighter niche sites? 141

25. Owning your own products 147

25.1 Advantages to Owning your own Products 148

26. Keeping in Touch with Visitors 150

27. Legal Requirements for Webmasters 154

28. Building a Product Empire with “PLR” Content 155

29. Issues with running your own Affiliate Program 158 30. In Summary 161

Worksheet 1 - Fat Affiliate Site Building Checklist 164

Worksheet 2 - Generating Ideas 165

Worksheet 3 - Pre-Sell Planner 166

You get “Creating Fat Affiliate Sites” as a free bonus when you subscribe

to my newsletter (and that is also free). To subscribe, go to:

http://ezseonews.com/ezseo

Fill in your name and email address and submit. You’ll then need to

open up the email you are sent, and click a link to confirm your

subscription. On doing this, you will get the download link to “Creating Fat Affiliate Sites”, plus other great bonuses. You will also start receiving

my newsletter (nearly every Sunday). Don’t worry, you can always

unsubscribe at any time, and I’ll never rent, sell or give away your details

to anyone else.