SlideShare a Scribd company logo
1 of 17
Download to read offline
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.

More Related Content

What's hot

CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers10Clouds
 
Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Liang-Hsuan Lin
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingRabiul robi
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignmentbeachtch
 

What's hot (6)

CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
Master page
Master pageMaster page
Master page
 
Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic Codding
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignment
 

Viewers also liked

InstallingRoRinLinux
InstallingRoRinLinuxInstallingRoRinLinux
InstallingRoRinLinuxtutorialsruby
 
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazin
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey KovyazinАренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazin
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazinguest8b0a46
 
DZone%20-%20Essential%20Ruby
DZone%20-%20Essential%20RubyDZone%20-%20Essential%20Ruby
DZone%20-%20Essential%20Rubytutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 

Viewers also liked (8)

InstallingRoRinLinux
InstallingRoRinLinuxInstallingRoRinLinux
InstallingRoRinLinux
 
tools
toolstools
tools
 
newsletter56
newsletter56newsletter56
newsletter56
 
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazin
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey KovyazinАренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazin
Аренда ПО Microsoft: как предлагать и как продавать (Russian), Alexey Kovyazin
 
IJTC%202009%20JRuby
IJTC%202009%20JRubyIJTC%202009%20JRuby
IJTC%202009%20JRuby
 
RichFacesFuture
RichFacesFutureRichFacesFuture
RichFacesFuture
 
DZone%20-%20Essential%20Ruby
DZone%20-%20Essential%20RubyDZone%20-%20Essential%20Ruby
DZone%20-%20Essential%20Ruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 

Similar to CSS_GUIDE_Intro

Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Design and CSS
Design and CSSDesign and CSS
Design and CSSnolly00
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbookjackchenvlo
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass bookPhoenix
 
GTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersGTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersTOPS Technologies
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8RohanMistry15
 

Similar to CSS_GUIDE_Intro (20)

Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Design and CSS
Design and CSSDesign and CSS
Design and CSS
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
 
Css
CssCss
Css
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Full
FullFull
Full
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 
GTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersGTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshers
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
 
TemplateTutorial
TemplateTutorialTemplateTutorial
TemplateTutorial
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 
eng2u3less38
eng2u3less38eng2u3less38
eng2u3less38
 

Recently uploaded

Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 

Recently uploaded (20)

Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 

CSS_GUIDE_Intro

  • 1. CSS Course For Beginners By Dr. Andrew Williams http://ezseonews.com http://ezseonewstutorials.com http://keywordresearchlab.com Version 1.0
  • 2. 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
  • 3. 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
  • 4. 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/
  • 5. 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.
  • 6. 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
  • 7. 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
  • 8. 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)
  • 9. 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.
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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”
  • 14. 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"
  • 15. 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
  • 16. 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
  • 17. 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.