PDA

View Full Version : CSS Tutorial #1



FPRob
09-25-2006, 11:43 PM
Please note. Some basic HTML knowledge or the ability to edit the HTML coding on your pages will be required. At the end of this section CSS may still be fairly useless to you but we will soon move on and you will soon become addicted to what CSS can achieve.


Create a style sheet:
On your windows desktop do a right mouse click. From the menu that appears select NEW. From the submenu that appears click TEXT DOCUMENT. Do not write anything in this document. Save it as bvstyle.css but ensure that you save it in the same location on your hard disk as your current INDEX.HTML page. This blank page is where all of your CSS commands will exist.


Make your web pages use the style sheet:
The following line of code needs to be added to every page that will make use of your style sheet. Please note. This line of code must go in the HEAD of each page. The head of each page is located at the top. It starts with <head> and ends with </head>. Placing the code anywhere inbetween these tags will make that page 'call' the style sheet and therefore the instructions contained within.

<LINK REL=STYLESHEET TYPE="text/css" HREF="bvstyle.css">


CSS Commands:
Each CSS command is made up of 3 sections. a selector, a property and a value.


Selector:
The selector is usually a HTML command. You can define the HTML command. For example...

a = the HTML tag for a hyperlink.
p = the HTML tag for normal text.
h1 = the HTML tag for header text (maximum = 6 (for example h6)).


Property:
The property is the page element that you wish to alter. For example...

Margin = To alter the margin size around your page elements.
Font = To alter the font.
Color = To alter the colour of a text, hyperlink or other page element).


Value:
The value must be added to the property in order to define the style. This is the way in which you wish the property to be altered. For example...

Blue = Combined with the Font property above the text on your page will appear blue.


Example:
In this example we will deal with hyperlinks (HTML tag A). On your style sheet you can enter the following code. The code has been colour coded as per the definitions above.

A:link {text-decoration: none; color: #0000CC}
A:visited {text-decoration: none; color: #0000CC}
A:hover {text-decoration: underline; color: #0000CC}


Explanation:
There are three lines of code above for each hyperlink style. The normal hyperlink as it appears on your page (link), the hyperlink after it has been clicked upon (visited) and the hyperlink whilst the mouse pointer is hovered over it (hover).

Notice that all of the style properties and values are inside a set of curly brackets. You need to define the selector, in this case hyperlinks (A) and then all of the CSS commands will go inside these curly brackets.

In the code above your hyperlinks will remain the same colour permanantly as you can see by the hex colour codes that I have used. You will also see that the text decoration remains constant except when the link is hovered over in which case an underline will appear.

The only other thing to note is colons and semi-colons. Here is how it works...

define the property insert a : (colon) and then define the value. If you wish to add more styling such as font size or in the case of the example above a colour instruction then you need to seperate the commands with a ; (semi-colon). The final instruction does not require a semi-colon. This is only required to seperate the listed instructions for example...

{property:value; property:value;property:value}

This can be broken down as follows...

property:value; ....... property:value; ........ property:value

Ivanhoe30
09-25-2006, 11:57 PM
Cool when is the next tutorial.

FPRob
09-26-2006, 12:11 AM
As soon as I find out how well people get on with this one and if it requires extra explanation etc... It will be soon though :)

motoxxx
10-03-2006, 10:08 PM
Do I need to upload this new file to the FTP server as well? Does BV automatically place the website styles in this document or do I had to do it manually? A bit of further explanation would be appreciated!

Very cool so far!

motoxxx
10-03-2006, 10:15 PM
OK I went thru the first part of this and I think I am still missing something.

I have been using this online tool HERE (http://www.sitening.com/tools/seo-analyzer/my-analyzer/) and checking to see how my page is optimized. I keep getting an error (a red x) on the "inline styles" category and I thought that this would fix it. My score is currently 90 with this tool. Is there anyway you can look at my site and this tool to see if I am doing this correctly?

I created the folder (a blank notepad doc)
named it bvstyle.css
saved it into my main index html folder
I uploaded this bvstyle.css to my ftp server
I inserted the code <LINK REL=STYLESHEET TYPE="text/css" HREF="bvstyle.css"> into the Head of my index page, saved and republished.

I have been fighting CSS for a long time. I only learned what CSS meant a few days ago.....Any help is greatly appreciated.

motoxxx
10-03-2006, 11:49 PM
This is the error message that I am getting on this tool SEO TOOL (http://www.sitening.com/tools/seo-analyzer/my-analyzer/)

I am currently scoring a 90% but even though the bvstyle.css is working as described I am still getting this error message.


"Your web page appears to be using inline styles (which may include header styles). To reduce your page size, and to adhere to modern web design standards, all styles should be separated from the web page. Styles should be defined in a CSS document that reference the elements, IDs, and classes in the XHTML document."

Does this error message apply to this CSS file? My links now look different on my home page since I copied the CSS text in Tutorial 1. So I know that it is working. Any help is appreciated!

FPRob
10-04-2006, 12:29 AM
hi moto.... slow down mate.. it will all work in the end ;) lets do it one step at a time.

you created your bvstyle.css file correctly and yes uploading it to the same location as your index page was the right thing to do however....

it wont work without any actual CSS commands in it.

also.. i have noticed from working with other people that all external CSS commands will be overwritten during the publishing procedure with BV. the pages which have external CSS commands (from your bvstyle.css file) need to be uploaded using file manager rather than published in the normal way.

The LINKREL code that you copied is correct... about your post (quote below)....

"Does this error message apply to this CSS file? My links now look different on my home page since I copied the CSS text in Tutorial 1. So I know that it is working. Any help is appreciated!"

BV uses a lot of integrated CSS (CSS code on each page) in order to make the design of pages very easy. The error you are getting is because the CSS exists on each and every page rather than on the style sheet (bvstyle.css). unfortunately (to the best of my knowledge) there is no way around this because of the way BV works in order to create your pages.

With your other questions....

No, BV will not apply styles or coding to the bvstyle.css document... you must add those manually but as time goes by you will see from the tutorials how this is done.

motoxxx
10-05-2006, 02:26 AM
Thank you so much for clarifying all of that! I can now sleep at night!


The error message was getting to me. I now have the bvstyle.css uploaded and working for my main index pages and I will be doing the same for all of my connecting pages.

Any chance we can get a tutorial or explanations about the different possibilities for the LINK styles and anything else pertainging to this? ............Whoops! Never mind! I just found Tutorial #2! AWESOME!

Thanks a bunch so far!

FPRob
10-05-2006, 03:07 AM
No probs moto.... excuse me, im a bit drunk right now.... glad you found tutorial 2.....

but.....

tutorial #2 barely scratches the surface of CSS. i am happy to help you all the way with what you are trying to achieve but just know that the forum threads i have listed here dont cover half of what you need to know. of course they will help but.... CSS can be used for soooo much more.

Tutorial #3 hopefully coming soon.

motoxxx
10-09-2006, 08:07 AM
One of the things I have discovered is the ability to make any image or text be the first thing a search engine finds on my site. It is pretty amazing. I don't know if this is a CSS thing or not but I have been testing this for about a month now and it works flawlessly.

I am totally self taught with all of my web stuff. I use this forum for input and some help ideas. I have no graphic ability or artistic eye what so ever. I am learning about site structure and it seems a bit like I am having to learn in reverse of the way most people have learned. I should probably take a class on how to do the website designing stuff just so I understand site structure better.

FPRob
10-09-2006, 09:12 AM
To be honest I am not sure if the search structure is a part of CSS although given the versatility of CSS it wouldn't surprise me if you can do that kind of thing. Never seen a CSS command related to search engines though.

I am self taught aswell and have found it amazingly useful over the years to leartn backwards (as you say).

Using FrontPage makes this easier because all of the web pages can be edited on screen (similar to BV) but you can also flick the screen across and edit all the coding. Placing things on the page and then looking at the coding helps you to learn the actual programming side.

motoxxx
10-19-2006, 11:13 PM
Try this out and see if it works for you

Go to widexl.com (http://www.widexl.com/remote/search-engines/metatag-analyzer.html)
Enter your domain name
Select the Google search engine
Ener the 4 digit code - press enter

This shows you several different things but for what we are talking about, the area you are looking for is "Your Site Displayed on a Search Engine"

This first part of this shows your title, then your title again (underneath), then the next thing it shows is whatever the first thing the search engine sees...It doesn't matter where it exists on the page.


Try this to prove it to your self:

Preview a page in BV
Select View>Page Source.
Look to the very last piece of text on your page in the HTML code.
Find that same text on your page in the BV page editor,

Select that text block >right click>select "Move To Back"
After you have done that, preview your page in HTML again and notice that that piece of text is now the first piece of text found on your page. It will be placed higher up in the HTML than it was before and it should be the first piece of text in the <body> but it will still be located in the exact same spot visually on your page.....

Pulish the page and run the Wide XL tool again. This new text will show up next after your titel in the Wide XL tool.

All of my search engine results have proven this to me many times over the last couple of months. You can make any piece of text anywhere on your page be the very first thing that the search engine sees. It doesn't matter where on the page the text or image is located. This says to me that the search engines not only read your page from top to bottom but also from back to front. Think of your web page like a deck of cards laying on its side. When you send the image or the text "to the back", it goes literrally to the very back 'card'. By selecting the object or text again and selecting "move forward" then preview your page again, you can see that for every time you move some thing one time it moves lower in the HTML code.

This has to be a CSS thing don't you think?

I have been using this technique for setting up keyword rich text for the search engines to find and it works perfectly. I simply create the text I want, right click on it, select "Move to Back" and it always becomes the very first thing the search engines find.

I have taken this a bit further even. Once I have determined what I want the search engines to find first, I make a note of what it is and I start at the bottom of the pages and begin sending text and images to the back in the order that they appear on the page or whatever order I want the search engines to find them in. I save my most important keyword paragraph for the last item to "send to Back" . Keep in mind that search engines like an hour glass shaped keyword paragraphs and pages. In other words, lots of keywords at the beginning in the first 25 words and again in the last 25 words. They don't care much about what is in the middle. So I move my main keyword rich paragraph to the back and another keyword rich paragraph gets moved to the front so that it will be the last thing the search engine reads. this leaves the other stuff placed in the middle of the HTML code that the search engines just skim......So from the search engines point of view, my pages now look 100% relevant to the keywords...

I have been playing with this for a couple of months now and it does work perfectly.

I am going to place this in the search engin forums as well and see what kind of feedback I get. Let me know how this goes for you.