I taught myself HTML back in the mid-nineties and was proud of the fact that I was able to accomplish the design of fairly complex web pages with nothing more than a starter HTML book, an HTML reference book, and the knowledge I had stored in my head. But back in those days, we web designers had what looking back was a fairly limited amount of tools with which to work, and the quality (or lack thereof) of sites on the web was lackluster at best.
Fast-forward to today: The hand-coder has more powerful and intuitive software packages available that will still allow us "to get our hands dirty", which brings us to the purpose of this article. With the standardization of the much anticipated Cascading Style Sheets (CSS) in the late-nineties, the web design community has become familiar with a much more powerful and precise method of web page layout.
"But how is an old-time web coder supposed to learn CSS the easy way?!" Well, I say you should learn it the way I, and countless others, have:
1. Download the Firefox browser 2. Install the Html Validator (based on Tidy) 0.5.9 extension 3. Open one of your "old" HTML files 4. View the source, click the "Cleanup the page" button 5. Check the "replace FONT.....tags by CSS" box, then Refresh
Now you have a very neat and tidy piece of code, with all the CSS dirty work done for you! At this point you can copy & paste the resulting code and use it in your project and start figuring out what it's doing. I was amazed at how easily I was able to pick it up and start making changes on my own. When I wanted more information on a certain style it was a just a Google search away to many excellent CSS resources on the web. I find it much easier to learn CSS if I get to apply the modifications to the existing code that I've been working on, and I think you will too.
I hope you find this article helpful and if you follow these steps you should be able to add CSS to your web site design toolbox in no time!
Thanks to Erich Bihlman, of Bihlman Consulting - PC and Internet Tutoring and Website Design in Prescott, Arizona. http://www.bihlman.com
This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can understand.
Like many other web designers, I began laying out web pages using graphical tools and discovered the wonders of tables for layout without anyone telling me to use them. Since browser support for CSS is better than it used to be, and tables cause problems, CSS offers you a benefit you may not have thought about before, the benefit of better SEO.
I want to say right away that quality content should be your highest priority, not SEO tricks. The advice given here will help you get better search engine results because the key to real SEO begins with good page structure and organizing your content. By understanding how search engines "see" your pages, you can build better page structure.
Search engines use what is called "top down" logic in looking at web pages. They look at your code, not the visual display that users see. Human eyes are drawn to the page content right away, even when there are other things on the page. Search engine robots do not see things the same way, but, they are logical and predictable once you understand them.
You have most likely seen search engine results that do not make sense because some obscure content gets displayed instead of the actual content of the page. I will illustrate top down logic so you can understand how to make CSS work for you.
In the mind of a search engine, the gist of your web page is determined first by what content is at the top of the page. If you start with certain words, they appear often throughout the page, and then again at the bottom so it is essentially your closing point, that, in the automated brains of a search engine is what your page is about.
Your well trained eyeballs will probably look for a title, then read the content; so to you, this is the top down logic of the page. Read your HTML code from the top down. You may be surprised how far you have to scroll before you get to the real content, and, how much other "content" a search engine will see first. If you use tables for layout, the top down logic of your code looks like it has the legs cut off and the place settings are on the floor.
Using CSS, you can organize your code so the search engines see your real content first regardless of where it appears on the page.
Let's use a simple HTML example:
Insert all your head info, including a CSS link like below
Heading With Your Important Keywords
Subheading With Important Keywords
Your important content will be here, with keywords. Notice how this is right at the top of your code. No matter where this is on the page, you want it here at the top of your code.
This could have image buttons, text, or both. If using images, make sure to include alt text which should contain keywords. With tables for layout, this would most likely be above the content, now it is below where it should be. The div id above will help you control this.
As the name can imply, this can be at the top of the page, but notice how it is way down in your code because it has no strong SEO elements. It might be your logo or additional navigation. Even though it shows at the top of the page to the user, it is not the first thing you want the search engine to read or display in search results.
This example of another div is used to illustrate another SEO principle. Use keywords in it so it is like your closing point. By appearing at the bottom of the code, it makes stronger SEO.
Next, I will show a simple example of how to make the file.css to control the layout. You can use this code in a text editor to see the effects. For simplicity, I will focus on only the layout code, we will not be declaring fonts, sizes, links, etc.
In the HTML example, we have 4 sections (divs). You can divide up by pixels or percentages (or even both). We will be using pixels for simple illustration of the principle here.
/*To explain the code above, I listed the divs in a different order than the HTML. This order follows the flow of the way I am doing the page layout. It also follows the flow you would have if you set up a table structure in HTML. The nav section butts up against the top left corner of the page (top and left are both 0px). The # sign defines the "id" of the div followed by the name. I set the width to 200px which is like making a table cell that width. I have used the 500px height just as an example so the summary below will start where the nav ends. You want to be sure everything will fit with the sizes you specify. You can also set padding, but unlike a table cell in HTML, you can set each side separately. In the example above, the first 20px is the top, then it declares each side in clockwise order so the left side is also 20px.*/
/*The summary above starts where the nav ends, at 500px from the top. The other settings match for alignment. I did not set a height because it will stretch just like a table cell when you insert your content.*/
/*The banner will be at the top of the page, but will start at 200px from left where the nav ends. Declaring a height is optional, but it will help for making sense out of where the content below will start. I used 150px just as an example. The reason for 0px padding on the right side is because the remainder of the screen is empty in this layout, no need to pad that side. I limit the width so it will display well down to 800x600 res (the total width here is 750px).*/
/*Now the content starts right where the banner leaves off, 200px to the left and 150px from the top. Notice this is last. If you used tables to create the same layout, this would be last in your code too. The search engines would read everything else before getting to the meat of your page. In the HTML used here, it is at the top of your code so the search engines see it first.*/
/*End CSS*/
These are simple examples, but if you can think in terms of top down logic, you can build search engine friendly pages. They will also load faster as complex table structures take longer to load than CSS layout, which is another benefit to CSS.
Thanks to Steve Chittenden, seeks to help business owners and organizations market themselves effectively and succeed. His company, Creative Business Services, provides carefully planned web design, graphic design, writing, and marketing services aimed at achieving this. goal.
There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.
What is Cross Browser Compatibility?
If a web page is completely cross-browser compatible, it will look more or less the same in all of the existing web browsers. The most commonly used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.
Each one of these browser implements HTML, JavaScript and Cascading Style Sheets (CSS) a little differently. Some difference only create cosmetic difference others can break the webpage. The situation gets worse because each browser is free to implement "enhancements" to the W3C standard version of each of these formats.
Then to compound matters even more the underlying operating systems also creates difference in how the computer displays graphical elements and text differently. When you add the fact that people are also using multiple versions of each of the browsers, no wonder web designers get headaches.
So what is a web designer to do?
Obviously, 100% compatibility with all potential browsers is impossible. But it is possible to design your web page so it will work in the most popularly used browsers.
To accomplish that, a web designer must write squeaky-clean code that conforms to the W3C standards to get consistent results across all browser platforms. The whole idea behind the standards is that if each browser adheres to the same set of rules, you will get more or less consistent results in all of the existing browsers.
Conforming can be a real challenge. It will limit some of the neater effects available in specific browsers. There are online code validators available. You can validate HTML code at http://validator.w3.org , the validator can also validate your CSS and links. The service is free.
The validator checks your code based on the DOCTYPE you specify on the webpage. The DOCTYPE tells the browser which version of HTML or CSS the web page is using.
HTML Editors
There are some compatibility issues associated with anything other than hand coding for HTML (and for that matter, even with hand coding.)
Best Choice - The best choice for compatibility is Dreamweaver but you cannot use layers. Layers must be converted to tables to be used.
Worst Choice - The worst choice is FrontPage. FrontPage is loaded with problems because it uses Microsoft and therefore internet explored specific code. Items that will not work in other browsers include:
* Marquees - you can use a JavaScript scroller to create a similar effect that will work in the most common browsers. * bgsound tag - this is IE specific. * Page Transitions - this is IE specific. * Front Page generated Style sheets - this is IE specific and can have unexpected results or crash other browsers. * Front Page generated DHTML - it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible. * Hover Buttons - this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.
Other HTML Editors - the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.
CSS Style Sheets
Not all of your style sheets will work correctly in all of the browsers. However, style sheets rarely crash a web browser, but sometimes the pages will be downright ugly if not completely unreadable. One of the major CSS problems is absolute positioning since most browsers do not support it and it will cause different block to overlap others and create a jumbled mess.
Flash
Flash is great for adding style to a webpage and Macromedia provides flash plug-ins for all of the major web browsers. But don't build the entire site with flash. Browser for the blind, most handheld devices do not support flash.
A small but significant number of users don't like it and don't install the plug-in so they won't be able to access a flash site. Also, search engines spyders can't follow the links on a flash site and won't index it.
Graphic Links
While these are attractive, they have the same problems as flash with browsers for the blind and hand-held devices. Always use the alt tag with graphics.
Bottom Line - even code that is validated may not work correctly in all the major browsers. The best way a web designer can create cross browser compatibility is to test all of their web pages in the most popular browsers to see what happens. Personally, I find that a combination of style sheets and tables works best to ensure my pages look good in all of the browsers.
Thanks to Warren Baker, is an Internet business consultant for WebDesigners123. WebDesigners123 connects the Freelance Web Designer with Webmasters who need their services.
Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!
This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors.
A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.
2. You site uses less bandwidth and loads faster
Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash.
This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it's automatically reused for every page. So the only thing that needs to be loaded is the actual content.
On average a website will load five to ten times faster if it makes use of cascading style sheets.
3. Your website will automatically gain better search engine results
With CSS, you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first.
Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content.
So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!
4. CSS is compatible with newer browsers
Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers.
By using webstandards, defined by the w3c, you are making sure your content is viewable in the future.
Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.
5. CSS can be used to display the same content on different media.
Because you are able to define different stylesheets for different media you have great flexibility in presenting your content.
The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It's all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer.
Stylesheets can also be created specifically for PDA's and such. As you will understand, this adds some great flexibility to the presentation of your web document.
Conclusion
Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website.
You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.
Thanks to Hilco van der Meer, is known as the author of the Cascading Style Sheets Course How To Master CSS. He's a professional Web Designer for over 5 years now. His course aims at easy to follow and step-by-step examples. More info can be found at http://www.HowToMasterCss.com
Styling text with CSS is really simple. We can define colors, underline it, make it bold, define the font etc etc.
We will start with some basics.
First we define the html where we will be working with.
This is the text
1. Colorize your text
We can select the P tag and add some styles to it. p { color:red; }
Now our text will turn red. You can define any color code your want or choose one of the 16 standard color names. The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.
2. Define the size of your text
p { font-size:12px; }
You can define any font-size you want, 145 pixels is not a problem. That is, technically speaking.
3. Make the text bold or Italic You can use the font-style property to create these effects.
Bold: p { font-weight:bold; }
Italic p { font-style:italic; }
4. Overline, Underline, strike-through and none
The text-decoration property is useful to create the underline and the other effects we need. p { text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:none; }
On default, the text doesn't have any lines at all. Except for the link. You can remove the underline by using the text-decoration:none; setting.
You see, it's quite easy to style your text using CSS. And you can do it all in a separate stylesheet!
