first CSS question

shammy2007 · #1 (**permalink**) Dec 21st, 2007, 21:18

Im wanting to learn CSS and the tutorials given here are fantastic.
But one thing i cant seem to find is exactly how do I view the CSS to see if its what i want?. I have dreamweaver and frontpage.

Can i design graphics in photshop and use them in my CSS?.

And last question.

How do i combine the CSS with the Html?.

Is it a simple matter of just linking to the stylesheet in the same sort of way that i link to graphics?.

thank you all.

Jack Franklin · #2 (**permalink**) Dec 21st, 2007, 21:58

TO link CSS stylesheet to HTML.
Inbetween <head> and </head> type:

Code: Select all

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

To apply graphics do the following:

Code: Select all

elementnamehere {
background-image: url(path\to\image.gif);
background-repeat: repeat-x;(repeats horiz) or repeat-y; (repeats vertically) or repeat; (repeats in all directions) or no-repeat; (does not repeat)
background-position: top/left/center/right;
}

Make sure to give the element a width and height of at least the dimensions of the image. I'll try and find some links to help you out more.

Background IMages: http://www.csstrickery.co.uk/2007/10...kground-image/

Ryan Fait · #3 (**permalink**) Dec 22nd, 2007, 06:09

The best way to test CSS is using a server online and your browser. If you've got a Mac, it's really easy to set up a local website that you can run without having to wait for uploads.

Marc · #4 (**permalink**) Dec 22nd, 2007, 08:00

Yep, Ryan is right. You can also test locally if you have windows too: http://www.apachefriends.org/en/xampp.html.

Ryan Fait · #5 (**permalink**) Dec 22nd, 2007, 11:52

I love shorthand as well, so all the lines Jack wrote can be condensed into:

Code: Select all

background: url(image.gif) left top no-repeat;

Just remember that for positioning a background image, horizontal placement comes before vertical placement. "top left" is not correct. It should be "left top".

Lchad · #6 (**permalink**) Dec 22nd, 2007, 11:58

In Dreamweaver, You need to set up the site in the site manager. Then when you want to preview what you have done so far, you just click F12 and it opens the test browser. Open up the "help" files or manual to set up two test browsers. I test in FF and IE7. Then I manually test in IE 6.

Jack Franklin · #7 (**permalink**) Dec 22nd, 2007, 14:32

Whenever I design I have IE7, FF & IE6 all open at the same time.

shammy2007 · #8 (**permalink**) Dec 22nd, 2007, 18:32

thanks for all the help.

When i making a site using HTML i have always been prone to using frontpage as i can hit the preview button and see instantly what its looking like.
Ive made a test template using CSS, nothing major just a test template so i can get a feel for CSS. I must say that CSS is not as difficult as i had thought. Ive been using the tutorial sites and W3schools site to learn.
Most of my time has been spent on trying to figure out how to combine all the different features to get everything where id like it.
Ive along way to go yet but im feeling positive with my progress.
I will post up what ive done when i feel ready.

Jack Franklin · #9 (**permalink**) Dec 22nd, 2007, 19:45

A good book I found which I basically learnt all my CSS from is
'The CSS Anthology - 101 Essential Tips, Tricks and Hacks' by Rachael Andrew.'

Anyway, good luck.

MikeHopley · #10 (**permalink**) Dec 22nd, 2007, 20:02

Quote:

prone to using frontpage

What an apt phrase. Much like, "prone to injury".

Don't take it lying down (ho, ho, ho). Stand up to Frontpage. Walk away, and never allow Frontpage to abuse you again.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Php Question	longstand	PHP Forum	4	Oct 21st, 2007 01:12
another question please.......	napstar	Starting Out	3	Feb 20th, 2007 22:28
css question	Daniel	Web Page Design	29	Feb 16th, 2007 12:13
Question!!	JacobHaug	JavaScript Forum	5	Dec 28th, 2006 18:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
first CSS question