Explain

Status
Not open for further replies.
G

Guppy

Could someone explain how one goes about setting up CSS for a site.  I know what is does and all, but i get a little confuse when it comes to how to make it and stuff.
 
A

Ardenn

I hope I do justice to this question.

In the Beginning:

The W3C (World Wide Web Consortium) created HTML orignally to define how a page would look on the web.  Things such as <P> for a paragraph, <table> for a table, etc...  Everything worked out fine until the browser wars started.  When netscape and Internet Explorer started having at each other, they created seperate and unique tags.  Thats around the same time you started seeing websites but up things like:  This page best viewed the Browser of Choice XYZ.

W3C meets again

So the W3C got back together when they released HTML 4.0 and also created CSS( Cascading Style Sheets )  They did this to solve the aboved mentioned problem of extra tags, and to provide a way to seperate the content from the presentation of the content.

How it Works:

There are multiple ways to make CSS work for you;

  • [li]External Style Sheets[/li]
    [li]Internal Style Sheets[/li]
    [li]Inline Style Sheets[/li]

All of these techniques have similar syntax which I will cover in later paragraph.    Basically External Style Sheets exist in a seperate file to your HTML and should be used when you will be calling the same presentation elements (bold text etc...) to multipple HTML files,  Internal Stylesheets exist in the same document as the HTML but in seperate places.  Internal Stylesheets should only be used when a specific document is the only document to have that style or presentation element.  Finall the inline Style Sheets lose the purpose of createing a style sheet because it still mixes content with style.  I would suggest you never use inline.

The Coding

Creating a Style Sheet is pretty simple.  First, you need to think of your overall website layout.  Then assign certain color, font, font size, and text characteristics(Bold, italic etc etc) to parts of the webdesign.  After that, all you need to do is open up a text document.  I commonly use notepad for this, although XHTML-Kit is a good freeware development environment. Then name it, variablefilename.css.  The filename can change, based on your personal choice, but the extension has the be CSS.  The contents of the text document are pretty straight forward too.  All CSS follows a specific structure:


selector
{
property: value;
}


The selector is the name by which the specific style element is known.  This can be named anything you want it to be named.  The property is a specific item, like font or color, and then the value is the value for the porperty.  Look at this example:

p
  {
    font-size: 12px
    color: #000000;
    font-family: verdana, arial, helvetica, serif;
  }

P is the SELECTOR and then font-size, color, and font-family are the properties with there corrosponding values.  This example would effect every paragraph (denoted by <P> in your HTML code)  This is a very generic example, and there is more to go into on class selectors and id selectors.

Putting it all together:

To put it all together, after you have saved your CSS as a CSS file, you will want to go into your main HTML page and type in something like this between the HEAD tags.

<link rel="stylesheet"
type="text/css" href="filename.css" />

That will make your new CSS sheet effect the HTML in that file.  Please be aware that there is alot more to CSS than this walkthrough, for more information visit: 
http://www.w3schools.com/
 
Status
Not open for further replies.
Top