PDA

View Full Version : About to start on a CSS adventure. Few questions before I embark

canadianjameson
06-02-2004, 03:59 PM
Got my hat, tacklebox, & big red booties.

okay people, here be the questions of the day:
1) how much is too much in one CSS file? i.e, when do i start a new CSS file? what catagories of things do i put in each seperate file, etc. any info is helpful, and i will consider all opinions as valid.

2) can someone post the url to "the end all of CSS codes"? kind of like a scroll through and find every option for every setting possible CSS page.

3) any other help would be great. i assume all i do is create a class name, give that id to whatever object i want, and set settings within that class to be applied to any object of that class.... right?
liorean
06-02-2004, 04:15 PM
1.
a. Depends on audience, type of site, inclusion method, document structure etc.
b. Start new CSS files for distinct data, such a other media. A conformant user agent will only download files relating to media it can render. You might also want to create alternate stylesheets. Then you should place the common information in a persistent stylesheet. Really, all solutions are valid, though some makes less sense than others.


2. Have a look at the HTML & CSS Docs sticky. If you want one single URL, <http://www.w3.org/Style/CSS/current-work> is the W3C CSS WG list of technical reports.

3. CSS is a rather complex animal if you look at it's more obscure features, but rather simple for most everyday things. It's easier to answer a more specific question than this one...
canadianjameson
06-02-2004, 04:24 PM
the url was a bit involed. i'm looking for a list of like

Background: no repeat, tiled, center, etc;

a list of the possible settings for each attribute... without the indepth explanation of each thing
liorean
06-02-2004, 04:47 PM
It's part of each of the specs. Since CSS is many specs and not a single one, you'll have to check the one you're interested in. Since that probably is CSS2.1, <http://www.w3.org/TR/2004/CR-CSS21-20040225/propidx.html> is a good idea to have a look at. However, for iew CSS1 is more interesting. Some properties are CSS2.0/CSS3 onlt, but not CSS2.1 etc. However, the CSS2.1 property index is the closest to what you want.
silenus
06-02-2004, 04:51 PM
There's a good css/browser support page here (http://www.westciv.com/style_master/academy/browser_support/index.html)

http://www.htmldog.com/ is also good for getting to grips with css.
llizard
06-02-2004, 05:30 PM
Got my hat, tacklebox, & big red booties.

Don't forget your deepwoods-OFF!

These pages may have what you're looking for:
http://www.w3schools.com/css/
canadianjameson
06-02-2004, 06:44 PM
liorean: PERFECT, exactly what i was looking for!
silenus: those will come in very handy aswell, thanks
llizard: probably the best idea of all! hehe -- i'll send pictures
canadianjameson
06-02-2004, 07:15 PM
actually i do have another question.

is there a table like lioreans where it shows 2 columns:
column a: the html tag code | column b: the css equivalent.

if yes it would mean alot less postings from me on the translations from HTML to CSS.

essentially i've been asked to take my entire page and use CSS to add any attributes to objects... so i'm trying to convert over the HTML tags into CSS code... but i'm finding some of the changes arent as direct as i assumed

-------------
for now, how do i do these in CSS: below are my conversion attempts for table attributes

height: 21;
border-width: 0;
cellpadding: 0;
cellspacing: 0

and how do i set the <body> attributes such as:

background="images/menu2/tablebgGrey.gif"
leftmargin="0"
topmargin="0"
marginwidth="0"
marginheight="0"

i hope not, but i may be posting a daily list of these conversion questions.

oh yeah, are there attributes that i should leave in the actual code, and not CSS? in retrospect the table height may not be good to put in a CSS file...
any comments?
gsnedders
06-02-2004, 07:17 PM
HTML:
<table width="400" height="21">
<tr>
<td width="200">&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table>

(X)HTML and CSS:
################# HTML #################

<div class="col">
&nbsp;
</div>
<div class="col">
&nbsp;
</div>

################# CSS ##################

col {
width: 200px;
height: 21px;
border: 1px solid #000000;
float: left;
}
canadianjameson
06-02-2004, 07:21 PM
Now, how do you do tables, I'll just find out and be on it! Well, use a WYSIWYG program and clean up the source, after starting up Classic mode...

WYS-whatinthewhonow?
gsnedders
06-02-2004, 07:25 PM
WYS-whatinthewhonow?

What You See Is What You Get

So you don't have to write the code, but you just view it, like Dreamweaver, GoLive, PageMill etc.
gsnedders
06-02-2004, 07:30 PM
and how do i set the <body> attributes such as:

background="images/menu2/tablebgGrey.gif"
leftmargin="0"
topmargin="0"
marginwidth="0"
marginheight="0"
body {
background-image: url('images/menu2/tablebgGrey.gif');
margin: 0px 0px 0px 0px;
}

The margin order is: Top, Right, Bottom, Left.
canadianjameson
06-02-2004, 07:39 PM
ahhh cool, i gotcha. thanks.

i'll be back with more :rolleyes:
canadianjameson
06-02-2004, 07:45 PM
how do i set these in CSS for a table?
cellpadding: 0;
cellspacing: 0;

aswell, should i use 0px, or does 0 suffice?

and float: left; is equivalent to align="left" i assume?

i ask many questions, but they're generally short :)
canadianjameson
06-02-2004, 07:46 PM
should i start a new thread called "CSS Translation?" and post all these little questions there?
liorean
06-02-2004, 08:06 PM
should i start a new thread called "CSS Translation?" and post all these little questions there?
Would be good, yes.
bradyj
06-02-2004, 08:12 PM
how do i set these in CSS for a table?
cellpadding: 0;
cellspacing: 0;

aswell, should i use 0px, or does 0 suffice?

and float: left; is equivalent to align="left" i assume?

i ask many questions, but they're generally short :)

Maybe you shouldn't use a table and just let CSS position the element:) That would be better than dealing with tables, but it depends on the application.


border-spacing: 0px;
border-collapse: collapse;


You can also control the padding of different elements like margins originally posted:

padding: 0px 0px 0px 0px;


Are you on a Mac or PC?

And, float left is similiar to align left, but it depends on what you are doing - say you have an image and a paragraph in a table cell. If you float left the image, but not the paragraph, the image will pop to the left, and the paragraph to the right, but it will wrap around underneath. Example:
http://css.maxdesign.com.au/floatutorial/introduction.htm

If it's an object in a cell that just needs to be aligned left, like an image, do:

text-align: left;


...or right, or center, your choice.
canadianjameson
06-02-2004, 08:13 PM
i've moved the thread over here for clarity:

http://www.codingforums.com/showthread.php?t=39692

any chance of an admin closing this thread?

i'll move bradyj's post over :)

thanks again guys