CSS Tutorials | Introduction | KD Web Page Design

Introduction to CSS

This tutorial is intended as a very basic introduction to Cascading Style Sheets (CSS) and should provide enough information to allow you to experiment with a few of your own styles. A style sheet is made up of style rules that tells a browser how to present a document. With CSS you can easily change colors, fonts, and other page properties in one place and one style sheet can change it throughout your site. There are three ways of using CSS: linked, embedded and inline.

What style will be used when there is more than one style specified for an HTML element? Styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet (linked)
3. Embedded style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)

So, an inline style has the highest priority and will override a style declared in an embedded style sheet, in an external style sheet, or in a browser.

Linked Style Sheets

If you have several pages using the same CSS, you should link your style sheet to your documents. The <link> tag is placed in the document <head>.

<link rel="stylesheet" type="text/css" href="styles.css" title="mainstyles">

External (linked) style sheets should not contain any HTML tags like <head> or <style>. The style sheet should consist merely of style rules or statements. You can create a style sheet in any text editing program, but make sure you save your document with the .css extension.

p {
font-size: 13px;
color: #000000;
text-indent: 12px;
font-family: arial, helvetica, sans-serif;
line-height: 15px;
text-align: justify;
margin-top: 0px;
margin-bottom: 6px;
}
.highlight {
background-color: #f5f364;
}

Embedded Style Sheets

Using an embedded style sheet should be used when a single document has an unique style. This element is placed in the document <head>, and it contains the style rules for the page.

The style sheet below tells the browser that when using the <p> tag that the text will be formatted using those defined rules. Included also in the style sheet is the class "highlight".

<style type="text/css">
<!-- 
p {
font-size: 13px;
color: #000000;
text-indent: 12px;
font-family: arial, helvetica, sans-serif;
line-height: 15px;
text-align: justify;
margin-top: 0px;
margin-bottom: 6px;
}
.highlight {
background-color: #f5f364;
}
 -->
</style>

Inline Style Sheets

A third way to use CSS is inline CSS. Inline CSS uses the style="x" attribute. The style attribute may be applied to any body element (including <body> itself). The attribute can use any number of CSS declarations, where each declaration is separated by a semicolon.

<p style="font-size: 13px; color: #000000; text-indent: 12px; font-family: arial, helvetica, sans-serif; line-height: 15px; text-align: justify;">Your copy here.</p>

CSS is perfect for using on eBay. It insures that your code always looks the way that you intended it to look. The best way to use CSS in your auctions, "me" page or store fronts, is to use inline styles. Since embedded and link style sheets should be contained in the <head> portion of the HTML document.

eBayTutorials

OtherTutorials

• Photo Size/Compression
• Using Irfanview
• Using TagBot
• Speaking Geek

Create Your Auction Listing FREE

Use our FREE online Auction template creator. Choose from many backgrounds or use or own. We host all images except your photos and logo. Easy to use! Try now!

Web Safe Fonts

Building your own Web Site or Auction Listing and not sure what the best fonts to use are? Find out now!

Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template, Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials, SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator

Introduction to CSS

Linked Style Sheets

Embedded Style Sheets

Inline Style Sheets

HTMLTutorials

CSSTutorials

JavascriptTutorials

eBayTutorials

OtherTutorials

Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template,
Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials,
SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator