Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    61
    Thanks
    10
    Thanked 0 Times in 0 Posts

    CSS - Hard for me to get started

    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.

  • #2
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    99
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    99
    Thanks
    0
    Thanked 4 Times in 4 Posts
    like rafiki said, starting with the basics is a good idea

    here's another easy to follow css tutorials site:

    http://www.cssbasics.com/

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by amol0010 View Post
    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
    Last edited by macwiz; 07-16-2008 at 02:39 AM.

  • Users who have thanked macwiz for this post:

    amol0010 (07-16-2008)

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    great reply macwiz - I added to your rep.

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

    Code:
    #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?

    Code:
    #gallery, div#centertext {
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts

    Comma Separated Classes/IDs

    Quote Originally Posted by bazz View Post
    great reply macwiz - I added to your rep.

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

    Code:
    #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?

    Code:
    #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?
    Last edited by macwiz; 07-16-2008 at 03:39 AM.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.

    Edit:
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    macwiz (07-16-2008)

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by bazz View Post
    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.

    Edit:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •