Css Guide - Introduction

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. INTRODUCTION 2. TABLE-LESS PAGE LAYOUTS 3. CSS BASICS 4. USING TOPSTYLE LITE FOR EDITING STYLE SHEETS 5. PSEUDO CLASSES 6. PSEUDO-ELEMENTS 7. THE “FLOAT” PROPERTY 8. IDS AND CLASSES 8.1. ID SELECTORS 8.2. CLASS SELECTORS 9. LENGTH UNITS 9.1. EX 9.2. PX 9.3. PERCENTAGE 9.4. EM 10. DIVS 11. CREATING A SIMPLE 2 COLUMN LAYOUT 12. A 2 COLUMN LAYOUT WITH FOOTER 13. A SIMPLE 3 COLUMN LAYOUT 14. THE BOX MODEL 15. POSITIONING BOXES USING ABSOLUTE POSITIONING 16. 2 COLUMN POSITIONED LAYOUT 17. COLUMN POSITIONED LAYOUT 18. CREATING A BASIC MENU USING CSS 18.1. CREATING A MENU FROM AN UNORDERED LIST 19. MENU EYE CANDY 20. CREATING HORIZONTAL MENUS USING LISTS 21. GET YOUR OFFER SEEN WITH THIS CSS TECHNIQUE 22. PLAYING WITH BACKGROUND IMAGES 23. USING AN IMAGE AS THE BULLET OF A LIST. SUMMARY

1 2 6 9 14 21 28 33 37 39 40 43 46 46 46 47 49 52 56 63 66 69 73 78 82 83 87 91 94 96 98 99

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 featuresTopstyle: 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/

1

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.

2

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

3

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

4

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)

5

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.

6

e.g. ..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

7

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

8

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

9

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”

10

"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"

11

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

12

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

13

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.

14