...

View Full Version : CSS basic question



shashgo
10-31-2002, 02:49 PM
Hi

Had a very basic question. I have been learning about CSS, and how the instructions are written to do certain things like

h1{background-color: "#003366"}

I did notice that the behaviour that is caused by the <h1> tag is also rendered as the rest of the ss behavior is followed, that is the backgound is made the specified color. So, in other words, if I write <h1>Boo</h1>

I end up with

a blank line, the next line with the color and the word Boo in a larger size, then again a blank line.

What if I jut want to change the appearance of the text and background but dont want the default behaviour of the tag to be included? Is that possible?

Also, is it possible to create user defined tags that have behaviours that are defined by CSS so these tags can then be used in html documents? (Like say up{background-color: "red"})

cg9com
10-31-2002, 02:55 PM
i think that the headng tag h1 automatically spans across the page.
try adding margin:0 to your style tag for h1

as far as i know you cannot make user defined tags per say

but you can do things like adding a dot before a name in your CSS, and that would make a type of user defined tag.

.yellow {background-color:yellow}
#green {background-color:green}


the dot is used for defining a class in the "yellow"
<span class="yellow">text background will be yellow</span>

the pound sign is for say a div id
<div id="green">background will be green</div>


hope that helps
and i hope i typed everything good, i didnt check any of it :)

BrainJar
10-31-2002, 03:07 PM
You can override the default appearance of any tag with CSS, just set the appropriate style property. For example:

h1 {
background-color: "#003366"
font-size: 200%;
margin-top: 0px;
margin-bottom: 1em;
padding: 4px;
border-bottom: 1px dotted black;
}

For any style property you don't specify, the browser will use it's default setting. Often, for beginners, just figuring out which property does what is the biggest challenge. Try http://www.w3.org/TR/CSS21/propidx.html for a full list. But note that not all browsers support all properties (unfortunately) or in some cases, handle them incorrectly (very unfortunate). So you may need to experiment.

As for creating your own tags, you can't. But you can use style classes or ids as cg9com suggested. The DIV and SPAN tags have no default styling so they are perfect for that sort of thing.

shashgo
10-31-2002, 03:13 PM
Cool,

That is what Im looking for. Tell me this, what is the difference between class and id i they seem to do the same thing? How are they different?

MCookie
10-31-2002, 03:15 PM
Also, by default, except for the margin, headers also have some padding. Different in every browser. So you could also add: padding:0px;


> > h1{background-color: "#003366"}
And Shashgo, don't use quotes in your CSS.
These are only used with inline style <h1 style="background-color:#003366;"></h1>

Roy Sinclair
10-31-2002, 03:43 PM
Originally posted by shashgo
Cool,

That is what Im looking for. Tell me this, what is the difference between class and id i they seem to do the same thing? How are they different?

ID is used to give a single element a name (the same ID should not be used for muiltiple elements) which allows that element to be referenced by scripts and to inherit specific styles.

A CLASS is used when multiple elements all need to share the same style. Also note that a single element can contain multiple classes (<span class="class1 class2 class3 ...">) and can also contain an ID. Please note that some older browsers don't handle multiple classes properly so you have to keep your target browsers in mind.

shashgo
10-31-2002, 03:56 PM
Hi all,

Got it. Thanks for your inputs. I am a little more clear on what to do with CSS and how to do it. I am still no too clear on

Roy sinclairs


ID is used to give a single element a name (the same ID should not be used for muiltiple elements) which allows that element to be referenced by scripts and to inherit specific styles.

Im quite set for right now. Will post more as I have more questions

cg9com
10-31-2002, 03:59 PM
okay if you are beginning to learn CSS
just stick with the class and dont worry about the id just yet

shashgo
11-01-2002, 12:11 AM
Hi all, Im back

Im having some problem understanding

1. the position property which can take on the values absolute, fixed, relative and static. I dont understand what effect the last two values have.

2. the cursor property, I dont understand the example they gave:

body {cursor: url("myPic.gif"), url("yourPic.gif")}

Isnt there oly supposed to be one url to load the cursor image from?

3. the display property and all its values: block | compact | inline | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row |

Roy Sinclair
11-01-2002, 02:52 PM
1. the position property which can take on the values absolute, fixed, relative and static. I dont understand what effect the last two values have.

Relative is a lot like absolute but the elements position is marked relative to the position of the block element which contains it instead of to the document as a whole.

Static means the element's position is supposed to be fixed within the view window so when the view window is scrolled up or down the other content in the view window will scroll under or over that element (depending on relative z-index values) while that element doesn't move. Be aware that IE doesn't do "static" elements yet so you need the Mozilla browser to see it proper.


2. the cursor property, I dont understand the example they gave:
body {cursor: url("myPic.gif"), url("yourPic.gif")}
Isnt there oly supposed to be one url to load the cursor image from?


This arrangement allows for some redundancy, the cursor at the first URL will be used unless it fails to load for some reason, in that case the cursor at the second URL will be used.




3. the display property and all its values: block | compact | inline | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row |

Explaining all that is beyond the scope of the forum, it takes a reference manual to cover all of those.

Catman
11-01-2002, 03:52 PM
Looking at the CSS2 specs (http://www.w3.org/TR/REC-CSS2/) at W3C website can answer many questions.

shashgo
11-01-2002, 04:02 PM
Roy,

That explanation helps. Thanks.

shashgo
11-01-2002, 04:05 PM
Catman,
Thanks. I was alady looking a the W3C notes on CSS, but they arent that explanative as times. :)

Catman
11-01-2002, 04:17 PM
In that case, Index Dot's CSS Guide (http://www.blooberry.com/indexdot/css/index.html) might be more helpful.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum