Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS Question


  • Please log in to reply

#1
mrsleep

mrsleep

    Member

  • Member
  • PipPip
  • 19 posts
Please don't flame me out for this question, I'm sincerely confused.
I've been reading a lot about CSS and trying to get a hang on it since I've been out of web design for quite a while now. From what I understand a .css file is what your web pages will reference for values that determine the appearance and properties of those pages. But this leaves me confused as to why I need to have CSS in the html files as well, and I'm also confused which CSS code goes where, like for instance, would I ever use a <selector=""> or <span class=""> in the .css file itself? Or only in the html file? If any one has any good tutorials that'd be appreciated, or any tips. All of the tutorials I've read so far don't break it down well enough for me to understand so it's still somewhat vague in certain areas. Thank you!
  • 0

Advertisements


#2
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
There are actually two methods of using CSS to style your web pages.
The first method "embeds" the css "instructions" directly in your HTML code.

A simple example follows:

<head>
<style type="text/css">
<!--
a {font-family: Georgia, "Times New Roman", Arial;}
a:link {color: #FFFFFF;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #FF9900; font-weight: bold;}
a:active {color: #FF9900; text-decoration: none}
-->
</style>
</head>
<body>
<p><a href="index.html">Home Page</a></p>
</body>

In the above example, the HTML code (really only a single line, after the <body> tag) and the CSS code are together on the same page - let's say it's called testpage.html.

It is also possible (and, if I may suggest, preferable) to REFERENCE an "external" stylesheet from WITHIN the HTML page - it looks like this:

<head>
<title>Test Page - external stylesheets!</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead"></div>
blah blah blah etc etc etc
</body>

In the above example, the CSS instructions reside in a file called main.css which is stored in a folder called "stylesheets". The "instructions" in that file are "called", if you will, by the line in red. This "external" stylesheet will affect ANY HTML pages that contain the line in red.

So, in answer to your question, CSS can be found both IN and OUTSIDE of HTML.
It's a brief explanation, to be sure, but hopefully of some help.
More detailed info re CSS can be found here:

World Wide Web Consortium (W3C) - Style Sheets Overview

W3C - CSS Tutorial

EchoEcho Tutorial

Tizag Tutorial

Edited by The Architect, 31 January 2006 - 08:28 PM.

  • 0

#3
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
That cleared it up drastically. Thanks a lot for taking the time to type that out! Greatly appreciated!
  • 0

#4
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
You're entirely welcome.
Glad I could be of some help!
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP