CSS_GUIDE_Intro

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:
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:
The source of that web page is identical to the source of this one:

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
- CSS
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.

CSS_GUIDE_Intro

More Related Content

What's hot

Viewers also liked

Similar to CSS_GUIDE_Intro

More from tutorialsruby

Recently uploaded

CSS_GUIDE_Intro