...

View Full Version : CSS - Hard for me to get started



amol0010
07-15-2008, 11:36 PM
I find it really hard to understand how anyone writes CSS from the scratch from a website..I am also confused about some CSS syntax, e.g.

#gallery div#centertext {
padding:30px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
height: 406px;
width: 940px;
overflow: auto;
}

Why are two ID elements combined together ? I am not sure if div#centertext is a subset of gallery ?

The most difficult part for me is to understand CSS or how to write from scratch for a website.

I have decent programming skills : C, C++, PHP, JS, but find CSS the most difficult of them all.

Any help with making it easy would really appreciated.

rafiki
07-15-2008, 11:43 PM
Start with the basics.
http://www.tizag.com/cssT/
http://www.w3schools.com/CSS/

ramm19
07-15-2008, 11:48 PM
that's not the way I'm used to see/use CSS, but they way to tell what they are trying to do is by looking at both files, the css and html code.

When I apply the same styles to different elements, i do:

#element1, #element2{
styles:here;
}

Like with any other programming language, there are different ways to accomplish the same.

ramm19
07-15-2008, 11:50 PM
like rafiki said, starting with the basics is a good idea :)

here's another easy to follow css tutorials site:

http://www.cssbasics.com/

macwiz
07-16-2008, 02:33 AM
I find it really hard to understand how anyone writes CSS from the scratch from a website..I am also confused about some CSS syntax, e.g.

#gallery div#centertext {
padding:30px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
height: 406px;
width: 940px;
overflow: auto;
}

Why are two ID elements combined together ? I am not sure if div#centertext is a subset of gallery ?

The most difficult part for me is to understand CSS or how to write from scratch for a website.

I have decent programming skills : C, C++, PHP, JS, but find CSS the most difficult of them all.

Any help with making it easy would really appreciated.

I will explain what you have:

#gallery div#centertext {
padding:30px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
height: 406px;
width: 940px;
overflow: auto;
}

the first line declares the id(s) and/or class(es). #gallery
and div#centertext both have the same properties.

A "#" represents an ID, and a "." represents a class.

CSS has the ability to define elements. div#centertext is an ID named "centertext" that will only be applied when a DIV is given the "centertext" ID.

CSS classes and IDs are applied within a tag. For example, to use your two IDs:
<img src="URL TO IMAGE" id="gallery" />
and
<div id="centertext">content</div>

However, since the ID centertext is prefixed by div, if you apply it to any other element, it will not work.

===============================================

The second part of any CSS ID or Class are its properties. After declaring a class, you start listing the properties with a "{".

Each property has two parts: an attribute and a value. For example, in padding:30px;, "padding" is your attribute and "30px" is the value. The attribute and the value are separated by a ":".

You separate properties with a ";".

To end the class or ID, you use a "}" to close it.

Thus, your CSS would look like this:
#gallery div#centertext {
padding:30px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
height: 406px;
width: 940px;
overflow: auto;
}

OR

#gallery div#centertext {padding:30px;font-family: Trebuchet MS, Arial, Helvetica, sans-serif;height: 406px; width: 940px; overflow: auto;}

CSS IGNORES spacing and lines, so either one has the same effect. You only need one space to have the effect.

Take a look at this. This is a CSS sheet on a site I made.

Fwayo: Style.css (http://fwayo.com/site/style.css)

bazz
07-16-2008, 03:04 AM
great reply macwiz - I added to your rep.

If I may add; I think that on the first line



#gallery div#centertext {


the lack of a comma means that the div#centertext is contained within #gallery. Am I correct that were they two separate items, with similar attributes, they would be separated with a comma like this?



#gallery, div#centertext {


bazz

macwiz
07-16-2008, 03:34 AM
great reply macwiz - I added to your rep.

If I may add; I think that on the first line



#gallery div#centertext {


the lack of a comma means that the div#centertext is contained within #gallery. Am I correct that were they two separate items, with similar attributes, they would be separated with a comma like this?



#gallery, div#centertext {


bazz

Thanks.

Yes. Sorry. I left that out. Usually, that is the case. You would separate the classes/ids with commas.

The other thing I left out were that IDs and Classes are called selectors.

Also, a selector, attribute, or property must NOT contain spaces (there should be quotes around Trebuchet MS, a special case.

Sorry, I am new here. What is my REP?

bazz
07-16-2008, 03:48 AM
You see the wee green light at the bottom left of your posts? that tells us you are online. The scales icon next to it is for us to click on if we want to send you rep (reputation). the red triangle sign is for reporting bad posts/spam.

I think there is a full explanation of rep in the user CP (top left of page). I don't get too hung up about it (or what my own rep is), but I like to use it as one way of expressing gratitude to others.


the 'Thanked 29 000 000 times in 1 post' ( lol ) is created when someone clicks on the 'Thank user for this helpful post' like at the bottom of each post

bazz

macwiz
07-16-2008, 03:55 AM
You see the wee green light at the bottom left of your posts? that tells us you are online. The scales icon next to it is for us to click on if we want to send you rep (reputation). the red triangle sign is for reporting bad posts/spam.

I think there is a full explanation of rep in the user CP (top left of page). I don't get too hung up about it (or what my own rep is), but I like to use it as one way of expressing gratitude to others.


the 'Thanked 29 000 000 times in 1 post' ( lol ) is created when someone clicks on the 'Thank user for this helpful post' like at the bottom of each post

bazz

OK. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum