Category: CSS Page 1 of 2

Css the basics ids and classes

Css … Style Sheets Two types of style sheets: Internal and External Internal – You insert your style code right into your html code. These … should only be used if you are …

Css

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal – You insert your style code right into your html code.
These stylesheets should only be used if you are intending to
create a specific page with a specific style. If you want to be
able to make global changes to your website using only one style
sheet, you have to use….

External Stylesheets – Instead of putting all the style code into
your html code, you can create a single document with your css
code and link to it within your webpages code. It would look
something like this


Webpage title< itle> <link <br="" rel="stylesheet" type="text/css"/>href=”http://www.yourdomain.com/css”> <br />

If you decide to use an internal stylesheet, you have to put your
css style wihin the following tags:

All css or links to the external stylesheets have to go in
between the tags

Now about Css Classes vs. ID’s

The one major difference between a class and an id is that
classes can be used multiple times within the same page while an
Id can only be used once per page.

Example:

ID – The global navigation of your site, or a navigation bar. A
footer, header, etc. Only items that appear in only one place
per page.

Class – Anything that you would use multiple times in your page,
such as titles, subtitles, headlines, and the like.

Creating ID ‘s

To create an Id in your css, you would start with the number sign
(#) and then your label of the id. Here’s an example

#navigation {
float:left;
}

To insert the id in your html, you would do something like this

You can also insert an id within another one like this

Remember to close the id’s in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle {
color: #000000;
}

To insert the class into your html, do this

Now, you can use the same class repeatedly in the same page
unlike Id’s.

I also want to tell you something about link attributes. You
should always keep them in this order:

a {
color: #006699;
text-decoration: none;
font-size: 100%;
}

a:link {
color: #006699;
text-decoration: none;
}

a:visited {
color: #006699;
text-decoration: none;
}

a:hover {
color: #0000FF;
text-decoration: underline;
}

a:active {
color: #FF0000
}

Of course, you can change the colors and text-decorations. This
is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and
download Topstyle Lite by going here:

http://www.bradsoft.com opstyle slite/index.asp

It’s free and is a very helpful css editor. It not only color
codes and organizes your code, but it provides you with tons of
attributes that you can add to your class and id elements with
just a click. They also provide a screen at the bottom to view your
css code as you create it. Very useful for a free edition and
I’m looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital
elements needed when structuring your css. I have a good feeling
that when you download top style liteHealth Fitness Articles, you will learn how to use
the hundreds of attributes in your classes and id’s

Good Luck in Your Web Designing Efforts!

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com










Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com

Css the basics ids and classes correct

Css … Style Sheets Two types of style sheets: Internal and External Internal – You insert your style code right into your html code. These … should only be used if you are …

Css

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal – You insert your style code right into your html code.
These stylesheets should only be used if you are intending to
create a specific page with a specific style. If you want to be
able to make global changes to your website using only one style
sheet, you have to use….

External Stylesheets – Instead of putting all the style code into
your html code, you can create a single document with your css
code and link to it within your webpages code. It would look
something like this

{head}
{title}Webpage title{ itle}
{link rel=”stylesheet” type=”text/css”
href=”http://www.yourdomain.com/css”}
{/head}

If you decide to use an internal stylesheet, you have to put your
css style wihin the following tags:

{style type=”text/css”}
{/style}

All css or links to the external stylesheets have to go in
between the {head} tags

Now about Css Classes vs. ID’s

The one major difference between a class and an id is that
classes can be used multiple times within the same page while an
Id can only be used once per page.

Example:

ID – The global navigation of your site, or a navigation bar. A
footer, header, etc. Only items that appear in only one place
per page.

Class – Anything that you would use multiple times in your page,
such as titles, subtitles, headlines, and the like.

Creating ID ‘s

To create an Id in your css, you would start with the number sign
(#) and then your label of the id. Here’s an example

#navigation {
float:left;
}

To insert the id in your html, you would do something like this

{div id=”navigation”}
{/div}

You can also insert an id within another one like this

{div id=”navigation”}
{div id=”left}

{/div}
{/div}

Remember to close the id’s in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle {
color: #000000;
}

To insert the class into your html, do this

{p class=”subtitle”}
{/p}

Now, you can use the same class repeatedly in the same page
unlike Id’s.

I also want to tell you something about link attributes. You
should always keep them in this order:

a {
color: #006699;
text-decoration: none;
font-size: 100%;
}

a:link {
color: #006699;
text-decoration: none;
}

a:visited {
color: #006699;
text-decoration: none;
}

a:hover {
color: #0000FF;
text-decoration: underline;
}

a:active {
color: #FF0000
}

Of course, you can change the colors and text-decorations. This
is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and
download Topstyle Lite by going here:

http://www.bradsoft.com opstyle slite/index.asp

It’s free and is a very helpful css editor. It not only color
codes and organizes your code, but it provides you with tons of
attributes that you can add to your class and id elements with
just a click. They also provide a screen at the bottom to view your
css code as you create it. Very useful for a free edition and
I’m looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital
elements needed when structuring your css. I have a good feeling
that when you download top style liteFree Web Content, you will learn how to use
the hundreds of attributes in your classes and id’s

Good Luck in Your Web Designing Efforts!

P.S Change { and } to < and >

Article Tags:
Color #006699 Text-decoration, #006699 Text-decoration None, Color #006699, #006699 Text-decoration, Text-decoration None

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com










Article Tags:
Color #006699 Text-decoration, #006699 Text-decoration None, Color #006699, #006699 Text-decoration, Text-decoration None

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com

Css maximum benefits

What is CSS? CSS is a simple file which controls the visual … of a Web page without … its … Using CSS we can control our font size, font color, link color and many other

What is CSS?

CSS is a simple file which controls the visual appearance of a Web
page without compromising its structure. Using CSS we can control our
font size, font color, link color and many other attributes on our web
page. This will make our HTML code much more readable and the page size
will be reduced.

Why to use it and how to use it properly

If you don’t use CSS on your web pages and you have many tables and
content on them, chances are that your HTML file size will be quite big.
Fact is that we live in a busy world, and people are not will to wait more
than 5 seconds web page to load.

From the other side some web developers implement the CSS on wrong way.
They write their CSS in HTML code of the page, like this:

<html>
<head>
<title>My Page</title>
<style>
A
{
font-family: Verdana;
font-size:8pt;
color:black;
text-decoration:none
}
</style>
…..

What is wrong with this technique? Well, imagine that you have
site with more than 50 pages. One day, you decide that you want
to change font color and colors of the links on your site. You
will have to edit ALL the pages on your site, and do to that you
will need time, because you place your CSS in your web page.

Better way is to save your visual attributes in separate,
external CSS file, and to link that file with your page
like this:

<html>
<head>
title>My Page</title>
<link href=”myStyle.css” rel=”stylesheet” type=”text/css”>
….

Using this technique, you can change the look of your site within
minutes, regardless of the number of pages, because your visual
attributes are saved in ONE external CSS file. Edit that file,
and you are done.

Benefits

Which are the benefits of using CSS? List is quite long and I will list here only the most important.

– Your web page will load faster
– Web page will become more search engine friendly
– You can change you site appearance within minutes
– You can write separate CSS file for handheld devices which
will be called up instead of the regular CSS file
– You can forget about creating printer friendly version of
your site using separate CSS file when user chooses to print the web page.

Avoiding standard HTML commands like:
<font color=”#0000ff”><font size=2>Product</font>

will help us to reduce file size, but that is not the only benefit. Using
CSS word product in this example will be moved more close on the top of
the document. Search engine will pick up more content and less code.

Imagine that you have 3 columns table on your page. When you see the code,
you will notice that first come code for your table, and after that it come
your content. Positioning your 3 columns using CSS instead of standard
inline elements:

<table width=”90%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”381″ height=”150″ valign=”top” bgcolor=”FFEDD4″>
My Product
</td>
<td height=”150″ valign=”top” bgcolor=”FFEDD4″>
…..

When CSS is used, your code might look like this:

<div id=”leftcontent”>
My Product
</div>

Again your code is much more clear, and your content is moved on the top
of your document, making your HTML page search engine friendly, and
reducing your file size.

Content is one of the most important factors in Search Engine
Optimization, and you will benefit with removing the unnecessary
code in your HTML and create search engine friendly web page.

Validate it
Browser war is far behind us. Reality is that most of the people
today use Internet ExplorerFree Reprint Articles, but you should try to be on safe side
and ensure that your CSS code is valid. Not all browsers interpret
the CSS on same way. You can validate your CSS here:
http://jigsaw.w3.org/css-validator/

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Zoran Makrevski
Search Engine Positioning Firm
SEO.Goto.gr










Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Zoran Makrevski
Search Engine Positioning Firm
SEO.Goto.gr

Css print media tutorial

So you’ve made yourself a cutting edge web page. What next ? Well maybe you want your visitors to be able to print pages in a certain style. Heavy graphical content can be removed, background colour c…

So you’ve made yourself a cutting edge web page. What next ? Well maybe you want your visitors to be able to print pages in a certain style. Heavy graphical content can be removed, background colour changed and navigation items removed, infact anything to make a printer friendly version of your page. All this can de done with CSS.

Printer friendly pages with CSS
CSS can effectively be used to create formated documents ready for print.
This is quite a simple process and all we have to do is create and attach a second style sheet with the attributes required for our print output. Therefore we have a stylesheet that controlls what you see on the screen and a style sheet that controls what is printer. Easy……

Markup changes
So, we will have already attached an external stylesheet in the head code of our document. It should look something like this:

The tag here has an attribute called media which can have a variety of options such as screen or print. For a full description of media types please view our glossary here.

Now, if we want to separate our media into two types – one for the screen and one for print we must alter our code:

We have now defined a separate style sheet for both screen and print.

The css sheets are now called screen.css and print.css. This means when a web browser requests your web page screen.css kicks in for your screen display. When a request is made for a print preview or print the style is defined by print.css.

This is not an automatic process and we will have to write a new style sheet called print.css that works in accordance with your original html document.

In the next section we look at the CSS involved in setting up a page for print output.

CSS Changes
Lets now take a close look at the simple changes we need to make in our stylesheet and how we can create an individual print sheet.

Now is the time to define exactly what we want to achieve in our print output. Maybe we want our website header and logo to be appear on screen but be omitted on paper.

The easiest way to achieve this is create a class or id called ‘header’ and define a different style for screen.css and print.css.

Lets have a look at how the code may look:

Your header id for screen.css may look like this:

#div header {
font-family:arial;
margin: 0px 0px 2px 2px;
font-size: large;
font-weight: bold;
background-colour: #000000;
border-colour: #ffffff 1px solid;
}

Your header id for print.css may look like this:

#div header {
font-family:arial;
font-size: 20px;
font-weight: bold;
}

The CSS code for screen.css defines font, margin, font size, font weight, background colour and border colour.

The CSS code for print.css defines only the font, font size and font weight. To save the visitor ink we have omitted the background and border and reduces the font size.

If your site is heavy on animated banners or flash movies we can apply a similar technique to allow the banners to be shown on the screen only.

Your screen.css stylesheet could contain all kinds of attributes for the advertisment such as border colour, drop shadows and position.

In your print.css stylesheet you would want to omit the advertisement from printing so in you would place the following:

#div.ads {
display:none;
}

This CSS code will illiminate the advertisement from the print output.

Hope this helps:

http://www.css-help.com

Article Tags:
Style Sheet, Print Output, Font Size

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Karl Regis is a student studying Computer Science. He is continually developing a css tutorial website in order to gain a better understanding of cascading style sheets and pass this knowledge on to others.
Css Help is found here:
http://www.css-help.com
We welcome css tutorial submissions, css experiments and helpful advice.

Karl Regis is a student studying Computer Science. He is continually developing a css tutorial website in order to gain a better understanding of cascading style sheets and pass this knowledge on to others.
Css Help is found here:
http://www.css-help.com
We welcome css tutorial submissions, css experiments and helpful advice.

Using ccs to eliminate tables

CSS or Cascading Style Sheets has opened up tremendous possibilities for improving web site designs, web page layouts and adding new features. The HTML code can be made shorter, cleaner and simpler by CSS resulting in faster loading of web pages, and making them more accessible to search engines. Here I am narrating my experience with only one part of CSS – using it to eliminate tables.

CSS or Cascading Style Sheets has opened up tremendous possibilities for improving web site designs, web page layouts and adding new features. The HTML code can be made shorter, cleaner and simpler by CSS resulting in faster loading of web pages, and making them more accessible to search engines. Here I am narrating my experience with only one part of CSS – using it to eliminate tables.

If you look at a traditionally designed web page, you are likely to find number of tables in the layout. Tables were earlier used only for displaying information in a tabular form. But web site designers soon started using tables for other applications such as showing images, graphics and other decorations.

My own web pages were earlier checkerboards of tables. Each web page was almost fully covered with tables and many tables were nested inside other tables. As I tried to add more features the design became more and more complicated resulting in longer loading times. It also took lot of time to “adjust” the tables on the page to make it acceptable.

It was not an easy task to redesign all the pages using CSS. But once I started, the improvements were more than I had bargained for. The design became simpler, the appearance improved and loading time came down considerably. The code looked real clean. Most of “td” and “tr” tags were gone.

My purpose of this exercise was not really to change the appearance but to make the design simpler. Now the tables which were earlier used only for design purpose have been eliminated. For eliminating tables first step is to decide which tables or more specifically which cells have to be removed. For applying CSS each cell of a table can be considered as a “box”. These boxes are given separate identities and description of each “box” goes into CSS code. The “boxes” can be given names such as box1, box2 etc. The description of the “box” can include size, its location on web page, background color and image if any, font details, padding, border details etc. The location of the “box” can be made “fixed” on the web page, or it can be floating in which case location can be defined with respect to another “box”.

If the location and dimensions of the boxes are properly worked out, they neatly fit into the web page giving it a clean look. Since the code associated with table designs are done away with, the content of the page attains more prominence in the code. This makes it easier for search engine spiders to locate the actual content of the page.

If you have several web pages with similar designScience Articles, the CSS code with these and other details can be put in an external file. This will further shorten the code for each page. With CSS lot many improvements can be done in web page design and layout. CSS can also be used for search engine optimization of the page.

My experience with CSS has been great and I wonder why it is not used more often. My advice – convert to CSS based design.

Article Tags:
Were Earlier

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Sanjay Johari contributes articles regularly to various ezines. His website contains information, articles, resources, opportunities and more for small business owners and home based business owners.
http://www.sanjay-j.com
Join the longest running internet business opportunity – because it works!
http://www.sanjay-j.com/empowerism.html

Sanjay Johari contributes articles regularly to various ezines. His website contains information, articles, resources, opportunities and more for small business owners and home based business owners.
http://www.sanjay-j.com
Join the longest running internet business opportunity – because it works!
http://www.sanjay-j.com/empowerism.html

Stylish and accessible forms using css

This template and tutorial is a great foundation for a CSS form and is totally flexible. Thsi can adapted by a range of CSS developers from beginners to advanced.

Many times I’ve compromised on a form’s design due to time
restrictions. Below is a template that I use and that is quite flexible in its
design. This form allows for any type of input field from a simple textfield to
a group of radio buttons. If your quite comfortable with CSS then please feel
free to adapt this code.

The fun you can have with this form can really change the
way your forms look and make a great deal of difference to your overall web
site design.

XHTML CODE

Below is a basic form structure.

I’ve used ordered lists

    to segment the form and

  1. tags for each row of the form just as I find this easily breaks up
    the code for use by novice CSS users.

  
  
     

           

  1.          *
    Surname:
           
     
            
  2.       
     

  3.          *
    Forename:
            

            

  4.         

  5.          
    Company:
             
           
  6.       

  7.          * Post Code:
             
         
  8.  

 
 
    

         

  1.      
             Gender *
              Male
               Female
       
         
  2.      

  3.    
           Additional
    information
          
       
         
  4.  

 
 
  
   
 

Additional Tags

If you look through the code you will see some tags which
you may deem as unnecessary (i.e tags after the radio button).
These are to enable a cross browser compatible layout. Within the CSS code you
will notice at the beginning that all the margins and padding are set to zero.
Alternatively you could place the form in a div with zero margins and padding
but it is entirely up to you.

CSS Code

* {
                margin: 0;
                padding: 0;
}

form.cssform {
                width: 430px;
               font-size: 0.8em;
               line-height: 20px;
               font-family: Tahoma,
Verdana;
}

fieldset {
                margin-bottom: 10px;
                border: none;
}

label {
                line-height: 1.8;
                vertical-align: top;
                float: left;
                text-align: right;
                margin-right: 1em;
                width: 120px;
                font-weight: bold;
}

fieldset ol, li {
                margin: 0px;
                padding: 5px;
               list-style: none;
}

fieldset fieldset {
                border: none;
                margin: 3px 0 0;
}

fieldset fieldset legend {
                padding: 0 0 5px;
                color: #000000;
}

legend {
                padding: 0 10px 0 10px;
                font-weight: bold;
}

fieldset fieldset label {
                font-weight: normal;
                width: 170px;
                margin-left: 123px;
                text-align: left;
}

form em {
                font-style: normal;
                font-weight: bold;
                color: #FF0000;
}

input.newfield {
                background: url(../images/newfield.gif)
repeat-x 0 100%;
                border: none;
                font-weight: bold;
}

textarea {
                float: left;
                background: none;
                border: 1px solid #999999;
                width: 100%;
                font-weight: bold;
                font-size: 1em;
}

.submitbutton {
                width: 10em;
                height: 1.6em;
                font-weight: bold;
                color: #FFFFFF;
                background-color: #99ccff;
                background-position:
center;
}

 

Browser Compatibility

Currently this form has been tested and works in IE5.5Health Fitness Articles,
IE6.0 and IE7 and Firefox.

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Sam Hickson Founded Hatch Media – Website Design Manchester and SEO in 2006.For a full detailed tutorial of this article with examples, please visit our website articles

7 css tips for layout problems

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that. Some of these tips are not exactly new, or rocket science, but hopefully they…

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that. Some of these tips are not exactly new, or rocket science, but hopefully they will save someone a bit of bother somewhere!

Tip 1 : Clear out the default padding and margin settings before you start working. Different browsers have different default margin and padding sizes so you want to start with a clean slate, so to speak. Use this command:

*

    {

    margin: 0;

    padding: 0;

    border: 0;

}

to clear all default margin and padding settings. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round click-able images, although some people argue that the purple border is necessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop without having to set img border=0 for each image (which is against the strict markup rules in any case).

Tip 2 :  To center your layout, use a container div to contain all your contentDeclare it as follows:

#container

 {  margin: 0 auto;  width: xxxpx; }

There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places for each element within your container.

Tip 3:  Work from the top down

Literally start working on your CSS layout starting from the top most elements in your design, as well as the ‘top’ elements in your HTML, such as the body, as well as your main containers.

Declare your CSS commands on the highest level possible and try and declare something once only and let it cascade throughout. Only override the commands at a lower level when strictly necessary. This prevents a verbose CSS file that is difficult to maintain and understand. For example, if you have { margin : 0 auto} settings on each and every sub div within your container – you are in trouble.

Tip 4 : Document what you are doing and use Firebug and the Firefox browser to debug.

You are not writing your CSS code just for yourself, some day some poor sod will have to debug it. Make numerous comments inside your CSS file to explain why you are doing things in a specific way.

Fitting in with this, you might find yourself having to fix someone else’s CSS more often than you think (or even your own, for that matter). Use the Firebug add-on for Firefox to debug your CSS. This is a life-saver with regards to giving you an insight into exactly where your design might be broken and why.

The only problem with this is that your design might work perfectly in Firefox, but not in IE5, IE6 or IE7. This brings us to the next tip.

Tip 5 : Decide which browsers you are going to build your CSS for and test from the startSome purists insist on making sure that your website work for all possible browsers, others only make it work for the ‘major’ browsers. How do you know exactly which browsers are used the most? Once again W3 Schools come to the rescue.

On the following page, you can see which browsers are the most popular: http://www.w3schools.com/browsers/browsers_stats.asp. From this page you can see that something like IE5 is only used by about 1.1% of browsers. It is up to you whether you consider it worthwhile to build your CSS to be compatible with this browser, or whether you are just going to test your compatibility with IE6, IE7 and Firefox, for example. Whatever you do, when you start building your CSS, start from the top, and test each and every setting in each of the browsers as you go along. There is nothing worse than building a perfect website in Firefox, then finding out right after you have coded a 1000 line css file that it is broken in IE6. To then debug and fix your code after the fact is a nightmare.

Tip 6 : Here is an embarrassing little tip for fixing your CSS in IE6 or IE7Let’s say your design works perfectly in Firefox, but is broken in IE6. You cannot use Firebug to determine where the problem might be since it WORKS in Firefox. You do not have the luxury of using Firebug in IE6, so how do you debug an IE6 or IE7 stylesheet? I often found that it helps to add {border : 1 px solid red} or {border : 1 px solid purple} to the problematic elements. This way you can often see why certain elements do not fit into the space available. It is an embarrassing little tip since it is so primitive and simple, but it works!

Tip 7 : Understand floatsFloating of elements is essential to understand, especially in the context of getting your floated elements to work in the different browsers!

Basically elements such as divs are floated to the left or the right (never to the top or the bottom, only sideways). Here are a couple of things to take into consideration with floated elements. Each floated element must have an explicit width specified. If you are making use of floated divs to create a 3 column or a 2 column layout, rather specify the widths in terms of percentages rather than fixed widths, and if you do use percentages, make sure that the percentages do not add up to 100%, this will often cause the right most column to drop below the rest, clearly indicating that you are trying to fit something into the available space that is too wide for it. Rather use percentages that add up to slightly below 100%, such as 25%, 49%, 24% for a left column, middle column and right column.

Floating elements can be extremely complex to understand and it is worth while to spend some time on good sites that provide specific guidelines and tipsScience Articles, such as the Position Is Everything website.

ConclusionThese CSS tips for layout should hopefully save you some time and effort when you next have to panel-beat a table-less design into submission!

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Christine Anderssen is the owner of Tailormade4you, a web design and web hosting company in South Africa, catering for small business website owners.

3 benefits of using css

Let us first understand what CSS exactly is. CSS or Cascading Style
Sheets is a stylesheet language that is used to describe the
presentation of documents written in any markup language.

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Maneet Puri is the managing director of LeXolution IT Services is a
premier web
development company that provides seamless and efficient web
development services to its clients along with a range of
other Internet promotion services. Having been in the industry for more
than 10 years, he is an expert in his field and this shows in the
deliverables.

CSS is the word to go by in today’s age in the world of website designing. It not only defines the presentation of documents but also styles the web pages so that it. CSS can be applied to website designing process to maximize the efficiency and effectiveness. By incorporating CSS into the website design will make the website perform better in the search engines game in addition to scoring well on accessibility, usability and prettiness quotient.

Let us first understand what CSS exactly is. CSS or Cascading Style Sheets is a stylesheet language that is used to describe the presentation of documents written in any markup language. It actually separates the presentation code from the actual content of the website design. For web pages written in HTML or XHTML, it’s the best and what’s better is that it can be applied to just any kind of XML document be it SVG or XUL.
A set of CSS style rules are built up and stored in a file with .css extension. This file is then linked from the web pages using a HTML link tag.

There are several benefits you stand to gain. Here are 3 possible ways to go about it.

Use CSS to Structure Your Document

Every website aims to make it to the top of search engines. Likewise the search engines send their robots to various websites to get fresh and relevant content. Websites vie for the same thing and that is website popularity.

Let’s consider the facts that we know about search engines. They send their search engine robots to your site to read the content that you have there and the easier it is to find for them the better because they don’t waste much time looking. So having said this, what is the point of bogging down your pages with lots of un-necessary presentation markup that could quite easily be stored off in a separate CSS file. Most often this means removed any extraneous table tags and replacing them with a smaller number of HTML div tags which can be formatted using CSS rules. This removes the vast majority of presentational markup and leaves you with nicely formatted content that the search engines can easily find and index.

Web Design Technique 2 – Us CSS to Style Your Header Tags

We also know that search engines place a huge amount of importance on the header tags – h1,h2,h3 e.t.c. that they find in your pages. The thing that puts most inexperienced web designers off using header tags is that by default modern browsers render them in massive black text that looks really ugly. This is where CSS comes in. CSS can be used to easily make your header tags appear in nicely formatted, attractive text that both scores well with search engines and is pleasing to the eye of the user – perfect!

Web Design Technique 3 – Us CSS to Create Rollover Images

Traditionally rollover images are created using 2 graphics for the on and off states that are toggled on and off using some complex JavaScript code. This JavaScript code can bloat your web pages and since it is not content and just appears as gibberish to search engines it can adversely affect your rankings to have lots of embedded JavaScript in your web pages. A much better way to accomplish the same web design effect is to use CSS. Your still need your 2 graphics but you actually create a normal text link in your (that can also have keyword targeted anchor text) and use CSS to format its appearance. This is as simple as making the link a block level element in your HTML, setting it a height and width and then defining it 2 different background imagesPsychology Articles, 1 for when the link is in its ‘off state’ and when for when the user is hovering over the link.

Conclusion

Cascading style sheets are a very powerful way of separating presentation code from your actual content and the search engine optimisation benefits the CSS will bring to your web design are undeniable. Why not put these CSS web design techniques to work on your website today?

Jumper settings when using hard drive enclosures

With the increasing use of Hard Drive Enclosures to reuse salvaged hard disks one of the common mistakes is forgetting to change the jumper settings on the hard disk before using it with the enclosure. Here are a few pointers on what to do and why hard drive enclosures are such a good idea.

Hard Drive Enclosures are getting increasingly popular, which, given their cost and ease of use is not surprising. Enclosures are a great way to re-use on old or salvaged hard disk drive from a computer and whilst these older hard drives are always as large as the current models (in terms of storage capacity) it’s a real shame not to use them

By way of example a salvaged 120GB hard disk drive will hold up to 30,000 songs, 150 hours of video, or 25Free Web Content,000 photos and the old work file of course! So even at the rate that people are saving files today that’s still a huge amount of information that the hard drive is capable of storing.

Hard drive enclosures will of course support new hard disks as well as any salvaged hard disks you happen to have lying around at home or work. If you do use an enclosure with a new hard disk then you could install a 1.5TB hard disk into the enclosure and create a very substantial back-up solution

For most people though the real benefit of an enclosure is that it allows the recovery of data from a hard disk taken out of an old PC and it then allows you to use that same hard disk to create a new back-up solution. By doing this you get real cost benefits combined with a sense of satisfaction that you are re-cycling what would otherwise be a scrapped piece of hardware.

If you are using an IDE or ATA Hard Disks with an enclosure then it’s important that you set the jumper settings on the disk to “master” and not cable select or slave. If the jumper setting is incorrectly set then the hard disk will not be recognised when connected to the PC. The default setting when removing a hard disk from a PC is not always master and whilst it seems logical that any disk installed in an external enclosure is set to “salve” but it does need to be set to “master”.

Changing the jumper settings is easy to do and only takes a few seconds. Typically the hard disk manufacturers will have put a label on the top of the hard disk illustrating how you set the jumpers.

Jumpers are just metal pins that have small black plastic sleeves that slot on them.

SATA hard disks have no jumper setting to worry about

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

USBNow is a specialist supplier of USB Products including USB Cables, USB Adapters, USB Memory Sticks, Hard Drive Enclosure , USB Cases, Express Cards and lots more besides. – check out our site for the latest products, news and for support – USBNow

WordPress how to add a video to your blog

This article explains how to add video to a WordPress blog.
It covers the following information: How to Add a Youtube Video to a WordPress
post or Page

This article explains how to add video to a WordPress blog.
It covers the following information: How to Add a Youtube Video to a WordPress
post or Page

First, the easiest way to add a Youtube Clip to your
WordPress site is with a plugin. You will find several Youtube plugins at
the WP repository, but over the years of using them I always seem to go back to
the same one… Smart Youtube.

 

Login to your WordPress administration

Navigate to the plugins Area and Choose Add New.

Type Smart Youtube into the search box and click on search

Install the Smart Youtube plugin.

Configuring the plugin is stupid-simple.

Go to the Settings > Smart Youtube option screen

Adjust any settings you may want to change (I only change
the dimensions and colors to match my site)

I set autoplay to OFF

I Clear the checkbox for video link in rss feed (makes
people click to me versus straight to youtube)

ADD a check to the box for video preview image in rss feed.

Save…

 

This is where it gets really easy and the main reason I have
always come back to this plugin. As you write your post or page, you just copy
the URL of the Youtube video… paste it into your postFree Reprint Articles, and add the letters
below to the url.

 

This article explained how to add video to a WordPress blog.
It covered the following information: How to Add a Youtube Video to a WordPress
post or Page

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR

Mark Hansen is a businessman and online marketing coach. Visit
his website Site Promotion
to learn more. 

Mark Hansen is a businessman and online marketing coach. Visit
his website Site Promotion
to learn more. 

Page 1 of 2

Powered by WordPress & Theme by Anders Norén