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

Thread: New to CSS

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

    New to CSS

    Hi, i mainly know php,
    but i decided to output valid HTML/CSS i decided to get upto scratch, how do people go out designing a full page with CSS only? any examples or tutorials welcome, and ideas for an easy project, but decent looking == rep++

  • #2
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by rafiki View Post
    how do people go out designing a full page with CSS only?
    Here's my tip…for your first CSS layout, start by marking up the HTML as semantic as you can. No divs, no spans, no whatevers…just start with something really simple and use nice semantic meaningful HTML. Then try to get that HTML looking like you want it to. As you need it, add your style hooks in the forms of your container divs, classes, ids, etc.

    If you've gotten pretty close to your desired layout with just the semantic markup you'll not only be forced to learn some major properties of CSS but you'll also get an understanding of why CSS is supposed to be used in the first place.

    My two cents, hope it helps…

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    There is one place to begin your CSS learning... BonRouge. It has some excellent articles on CSS, IE problems/hacks and many other resources, but the best part is the beginners guide to creating a website. I read it recently and even though I've been building sites for 3 years now it helped!

    Good luck!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by rmedek View Post
    start by marking up the HTML as semantic as you can. No divs, no spans, no whatevers…just start with something really simple and use nice semantic meaningful HTML. Then try to get that HTML looking like you want it to. As you need it, add your style hooks in the forms of your container divs, classes, ids, etc.

    If you've gotten pretty close to your desired layout with just the semantic markup you'll not only be forced to learn some major properties of CSS but you'll also get an understanding of why CSS is supposed to be used in the first place.

    My two cents, hope it helps…
    everything helps, i was unsure of semantic, and still are, i read up about it on dictionary.com didnt help much so i looked at the encyclopedia reference and got this
    Code:
    Semantics (Greek semantikos, giving signs, significant, symptomatic, from sema, sign) refers to the aspects of meaning that are expressed in a language, code, or other form of representation.
    how do i have/get meaning into my code? how would you say that something is "semantic html"?

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Semantic HTML basically means using the correct tags for the correct elements, i.e. using H1 tags for the main heading, then H2 and H3 for the sub headers... images always have alt tags. Lists for whatever purpose are within styled lists on the page and not in a div with <br />s applied for line-breaks.

    This might help: Semantics
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Maybe this helps: http://brainstormsandraves.com/artic...ics/structure/ ?

    Basically semantic HTML means “HTML with a meaning” which means that you only use those elements that you relly need, i.e. no line breaks where you would start a new paragraph, tables only if you wanna display tabular data, headlines according to the document outline, HTML images (<img>) only if the images are directly related to the content (otherwise CSS background images).

    Divisions are semantically neutral elements and exist to divide sections (logically), e.g. header, content, and footer, and sub sections like a main section and a news section (within the content which will eventually reside in two columns next to each other (floated with CSS later on)), as an example.
    Spans serve a similar purpose (they are semantically neutral, too), only that they are inline elements used to apply a different style to single words or phrases (like a different color or font style if <strong> and <em> don’t apply - those two are only to be used if you really wanna emphasize something, not if your only intention is to have bold text - this is where span and CSS come in).

    Hope that explains some things?

  • #8
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    ahallicks, i did read that article (top of google search results)
    im going to attempt to make a CCS design (very simple - no complex images)
    if anybody has seen simple decent web sites, then please link to them, so i can get an idea of what should/could be achievable with no complex images, or non semantic designs if tha makes sense

  • #9


  •  

    Posting Permissions

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