Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Wednesday, August 19, 2009

GTUG Campout - doin’ the Wave …

GTUG CampoutI recently attended the Google Technology User Group Campout at the Googleplex in Mountain View. This was a three day sprint to build something interesting with the latest Google product: Google Wave.

Google Wave, as it turns out is a very interesting experiment in social interaction. Google is trying to reinvent collaborative communication with a piece of software that is one part chat, one part Wiki, and one part WebEx.

I'd seen this product at the Google I/O conference a few months back and was impressed with the demos. Basically you get these shared documents (called Waves) that all of the collaborators can update at the same time. You can watch the hour and a half demo at http://www.youtube.com/watch?v=v_UyVmITiYQ

The demo included things like interaction with blogs, Twitter and other web technologies, as well as interesting programming doing things like on the fly grammar checking. I signed up for a sandbox account the day of the presentation (using my iPhone of course), and got set up a week or so after that.

Wave was written by the brothers Lars and Jans Rasmussen, who are the architects of the Google Maps API. In some sense, this is an experiment in building software caused by the lessons they learned with the immensely popular Maps API. By giving the developers access early in the build process, they hope to build a more solid platform that will serve the developers needs.


Read more...

Sunday, March 15, 2009

Stupid Firebug tricks …

Recently I've been doing some web page work again, and trying to push the envelope on my CSS knowledge.

I was at a talk at 360|iDev where Brian Fling was talking about UI design, and he pointed out that your site should work without your CSS. Now while I know this as a design principle, it seems like something that we probably overlook more often than not.

So, out of curiosity, I thought I'd take a look and see what some of my pages look like without their stylesheets applied.


Read more...

Wednesday, November 26, 2008

Fun with HTML and CSS

I spent some time yesterday figuring out CSS problems for Job Connections.

The Job Connections site was built using a CSS for printing that wasn't including all of the parts of the page that should be printed. They use a stylesheet called print.css, and when somebody would try to print a page, they weren't getting anything but the text in the middle of the page.


Read more...

Friday, July 27, 2007

CSS-What's To Understand?

What can you do with CSS? If you're using FrontPage, and have not migrated to their new Expression Web software because you are not even sure what CSS is, then this article may help. As to the new software Expression Web, you must be familiar with HTML and/or XHTML-it's not really a beginner's helper as the other FrontPage modules. Many people are scrambling, not sure whether to get the new software, or look for something different. With that being said, back to the topic at hand.

I was curious about what CSS could do, and if the search engines and/or browsers had any problems with CSS. From what I have researched, it looks like some of the search engines have their quirks with CSS - in other words, the browsers can not handle all the capabilities that CSS offers equally.

My article "CSS-What's It All About" will give you an insight to what CSS is, what it can do, as well as, some simple syntax that CSS uses. This mind you, is an overview, with directions to where you can get a little more help.


CSS-What's It All About
7/26/2007
By Vickie J. Scanlon



CSS-search engines and your browsers-so what! Right? Maybe, unless you want to know a little about CSS. So, let me begin by saying that CSS can reduce your time at the computer. But you will need knowledge of HTML, XHTML, and the style properties of CSS. Let's say you are wanting to use CSS- but don't know whether CSS is compatible with the search engines or the browsers that your clients may be using. These are some of the questions I'll try to answer, as well as, explain a little about what CSS is all about.


What is CSS?

CSS stands for Cascading Style Sheets. CSS is a set of formatting instructions that controls the looks of a web page or pages. Some of the browsers that support CSS is: (Firefox,IE3 or later, NN4 or later). You may be saying, great this will definitely save me some time. Not so fast, you also need to know that though, the majority of the browsers understand CSS, they do not fully support all of it's capabilities.

XHTML - XHTML is EXtensible HyperText Markup Language. XHTML Is HTML with stricter rules-that adds conformity and, is 100% XML compliant.


What can you do with CSS

1) You can build your layout - adjust size and color of your headings or body text.
2) If you have like pages or styles within your pages that are used over and over again, this saves you time in duplicate formatting.


How to get the Search Engines to See Your Copy

Granted Search Engines still have some problems with understanding CSS.
But if you want to use CSS, how can you get the search engines to see what you want.

1. Keep your text clean, if you have to much garbage in your web page, than the spiders will have a difficult time in determining what is relevant and what is not. Thus, CSS keeps your web page clean, without the redundant coding needed for each individual element of code. Here is an example of how to code a headline; with the CSS code below.

Example: "h1" Title "/h1" ( where there are ", use < or > )
CSS code: H1 {font family: Arial size: 18 px; bold;}



Syntax of CSS

First, CSS can be written within any text editor. But the text file must be saved with a CSS extension.

The syntax of CSS consists of the selector and the declaration. The selector is the identifier within the body of your web page; the declaration is the code that identifies the style that you want to put into place as to property and rule. Lets say you want all your H1 headlines to be green, with the font Arial. the code for CSS would be as follows:


selector {property: rule;}
H1 {color: green; font-family: Arial;}

Note: Notice that the property and rule must be enclosed in {}.


Placement of CSS

There are three places to put your CSS code:

In the Head (Internal), in an external file, or within an individual tag (Inline style).

Internal -is used within a single web page that may have a unique style.

Inline - mixes code with content. Sometimes you may need to use it, but this style does seem to eliminate the need of even using a CSS style sheet.

External - The CSS is separate from the body of the web page and is linked with the web page. Thus, to link an external file into a web page you will need to use the link tag.
Example: link rel="stylesheet" type="text/css" href="NameofCSS.css" (Goes in the head section after the title tag with <> at beginning and end of statement)

Which way do you go? If you have a large site or a site that will be expanding, an external file would be a better way to quickly and easily manipulate all your web pages at once.


Watch out for Spam

But with anything on the Internet, CSS can be used for the good and the bad. And obviously, if you want to keep your site up and running for a long time, Some CSS techniques should be avoided. Why? Because some CSS techniques can be considered spam by the search engines and thus, ban your site if you use the techniques. The blackhat tactics include such things as: 1) using CSS to hide text-from headlines to body from the human eye; 2) hiding and bolding or italicizing copy for search engine spiders benefit only.

To conclude, CSS can and is a viable way to making your web pages easier to maintain-if the majority of your pages follow the same format. If you are not all that familiar with CSS, then take the time to look at w3schools.com tutorial. It's very informative and can get you started with CSS.

About the Author:

Vickie J Scanlon -- Visit her site at: My Affiliate Place or free tools, articles, ebooks, how to info, affiliate opportunities, travel and tech accessories, security software and computers for your home office or online business.
Read more...

Friday, December 22, 2006

Contemplating Using CSS?

If you are a growing site and using html alone, you may begin to think that their may be a faster way to update your web pages. Yeah! me too. I've been looking into CSS, but wanted to know the benefits and some of the pitfalls of using CSS. Well, in my research, I came across an article
by Mikhail Tuknov called, "Benefits of CSS in Search Engine Optimization".

For those who do not know what CSS is, let me define it: CSS (cascading style sheet) is a single page of formating insturctions that can control the appearance of many HTMl pages at one time.

From all I have been reading, CSS does help to improve the maintenance of your web pages/website, helping you to make changes when you need too, faster.

Now, I've seen some of the great benefits, I'm still going to do some addition search to learn the pitfalls -- there's got to be some. And...as to the learning curve, I'm going to have to find me a tutorial and do some experimenting.

As to CSS cross browser capabilities -- another area I will have to reseacrch. I don't want to find my website being viewed by a few because of incompatibility problems with different browsers.

And are there different languages to choose from when you construct your style sheet?

I know there are some questions I have to answer? When I find them, I'll share them with you. In the meantime, enjoy the article.

Benefits of CSS in Search Engine Optimization
by Mikhail Tuknov

There are many benefits of using CSS. One of the major benefits of using CSS is the easy maintenance of the website. Maintenance of a website made with CSS is much easier compared to the ones which are table based. CSS splits the presentation style of documents from the content of documents and makes the maintenance of the site easier. Aside from being able to make site extensive changes with no trouble through one CSS file, the clean code it generates makes it easier to update. Webmasters can characterize the appearance of a site in one place, and change the whole site by changing just one file. With CSS, when you decide to craft a change, you simply alter the style, and that element is updated automatically anywhere it appears in the site. So, if you have to alter the color of all pages in your site, you only have to edit one style sheet. This saves you enormous amount of time, particularly if you have to edit each page independently. CSS generally requires less code compared to table based. This makes your code lighter and cleaner. Clean code makes a huge difference in maintaining your site.

Cascading Style Sheets Benefits and Search Engine Optimization (SEO)

Another major benefit of CSS is that it makes your website SEO friendly. The reason behind this is simple. The search engines spiders are actually very lethargic. They do not go through the bundles of HTML codes to get to the indexed codes. Font tags and tables make the HTML code very cumbersome; thus, reduce the accuracy of the results. If you use external CSS files to design and determine the design attributes; the HTML code will be clean and it will result to better search engine rankings. With some knowledge of CSS you will be able to change the code layout without destroying the actual visual layout. For instance, you could easily make the main content of your site to show up above the header or navigation menu in the code of your website; thus will help to show search engine crawlers the importance of your content. I personally saw a huge boost in rankings in fully CSS web sites. When I look at someone’s website that was built using old school HTML code with tags such as: TABLES, TD, TR, FONT and so on, I feel awkward and immediately convert that site to a fully table-less CSS layout. There are many tools on the Internet that shows the actual code over text ratio weight of your site. Do you know why? Because modern search engines such as: Google, Yahoo and MSN love light-weighted websites. They want to see your content; the text, not the code. With CSS everything is possible. You practically externalize excessive code into external file, thus leaving the actual page clean and simple.

Website Accessibility

CSS makes your website more accessible. The number of users browsing the web through hand held devices are continuously growing tremendously. It is estimated that by 2008, one third of the world’s population will be using hand held devices for accessing Internet. It is always important that your site is accessible to them also. You can make an additional CSS document particularly for handheld devices like cell phones, which will be called up in place of the regular CSS document; which is not achievable with a tabular layout. CSS benefits accessibility chiefly by separating document structure from presentation. By separating style from markup, webmasters can simplify and clean up the HTML in their documents, making the documents more accessible.

Increases Download Speed of Your Website

CSS code downloads faster than tables. Browsers read through tables twice previous to exhibiting their contents; first to work out their structure and then to determine their content. Moreover, tables are shown on the screen as a whole, no part of the table will be displayed until the entire table is downloaded and rendered. Tables support the use of spaced images to assist with positioning. CSS generally requires less code than cumbersome tables. All code to do with the layout can be placed in an external CSS document, which will be called up just once and then stored on the user’s computer; while the table layout stored in each HTML document, must be loaded up each time a new page downloads. Also with CSS, you can manage the order of the items downloaded into the screen. You have the control to make the content appear previous to the slow loading images, which is liked by most of the web users.

Cross Browser Compatibility

For all webmasters out there! CSS makes your website more professional. Taking the benefits of CSS like making your websites load faster and easy to maintain, you save a lot of time and labor. This in turn makes you lots of money. CSS makes links of the website look more attractive and dynamic. Using CSS, you can slot in rollovers easily and effectively, without having to use a single character of JavaScript. Thus, CSS gives your websites a professional look. It is wise to use CSS to jive with the current trends of the industry. All major browsers like Firefox, Explorer, and Netscape presently recognize CSS and it is definitely safe for web designers to use CSS now.

About This AuthorMikhail Tuknov, search engine optimization specialist and a founder of Infatex.com, search engine marketing company. With an extensive backgound in Internet marketing and web site development, Mikhail offers web site promotion services: SEO, Link Popularity, PPC, SEO copywriting and ROI Tracking.



Read more...