...

View Full Version : New to CSS



rafiki
06-06-2007, 03:05 AM
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++ :)

sdcomputerz
06-06-2007, 05:37 AM
http://www.yourhtmlsource.com/stylesheets/introduction.html
http://www.echoecho.com/cssintroduction.htm

rmedek
06-06-2007, 07:24 AM
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…

ahallicks
06-06-2007, 09:54 AM
There is one place to begin your CSS learning... BonRouge (http://www.bonrouge.com). 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!

rafiki
06-06-2007, 02:12 PM
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

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"?

ahallicks
06-06-2007, 02:31 PM
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 (http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html)

VIPStephan
06-06-2007, 02:31 PM
Maybe this helps: http://brainstormsandraves.com/articles/semantics/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?

rafiki
06-06-2007, 03:03 PM
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 :)

karinne
06-06-2007, 04:42 PM
How
BonRouge's layouts (http://bonrouge.com/3c-hf-fluid-lc.php)
pmob.co.uk layouts (http://www.pmob.co.uk/temp/3colfixedtest_4.htm)
newguyinennis layouts (http://www.newguyinennis.com/samples/layouts/)
The Noodle Incident: CSS Boxes (http://thenoodleincident.com/tutorials/box_lesson/boxes.html)
glish.com - CSS Layout technique (http://www.glish.com/css/)
bluerobot.com - Layout Reservoir (http://www.bluerobot.com/web/layouts/)
Alistapart - In Search of the Holy Grail (http://www.alistapart.com/articles/holygrail)
Alistapart - Creating Liquid Layouts with Negative Margins (http://www.alistapart.com/articles/negativemargins)
Alistapart - Faux Columns (http://www.alistapart.com/articles/fauxcolumns)

Books
Designingwith Web Standards (2nd Edition) (http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/sr=8-1/qid=1168522487/ref=pd_bbs_sr_1/103-3512961-8857406?ie=UTF8&s=books) by Jeffrey Zeldman (http://www.zeldman/)
Web Standards Solutions: The Markup and Style Handbook (http://www.amazon.com/Web-Standards-Solutions-Handbook-Pioneering/dp/1590593812/sr=8-3/qid=1168522487/ref=pd_bbs_3/103-3512961-8857406?ie=UTF8&s=books) by Dan Cederholm (http://www.simplebits.com)
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939/sr=8-5/qid=1168522487/ref=pd_bbs_5/103-3512961-8857406?ie=UTF8&s=books) by Dan Cederholm (http://www.simplebits.com)
CSS Mastery: Advanced Web Standards Solutions (http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145/sr=8-6/qid=1168522487/ref=pd_bbs_6/103-3512961-8857406?ie=UTF8&s=books) by Andy Budd (http://www.andybudd.com/), Simon Collison (http://www.colly.com), Cameron Moll (http://www.cameronmoll.com)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum