Cascading Style Sheets!?

Can anyone explain the best way to style a web page? I understand basic CSS but struggle with the concept of how the boxes stack on top of one another.

Public Comments

  1. Well, basically, CSS is a more advanced way to format your page than with just HTML. It's generally organised by "class", (not quite OOP) it is just giving a block of text a certain name. For example, all text named under the "menu" class will be smaller text of a special font, and have some mouse-over link effect. Everything under "body" is larger, a different font, and has a certain margin. Pretty much anything that can be done with CSS can also be done in HTML somehow. The advantage of CSS is that it's easy to make all the content on a website look the same, and if you want to change the look you only have to edit one file. CSS can be in <STYLE type="text/css"></STYLE> right int he <HEAD> of an HTML, or in a seperate CSS file...just add <LINK href="style.css" rel="stylesheet" type="text/css"> to every page you want it in. Here's the W3C CSS Website: http://www.w3.org/Style/CSS/learning
  2. Those boxes are called "Layers" actually and they should be used very, very sparingly. Layers are displayed differently on different computers, (Mac or Windows), and in different browsers, and on different screen sizes. Also they are "Absolutley" positioned (usually), as in Layer 1 is 200 pixels from the top and 100 from the left. You can't do simple things like center the web page in a browser, or make the content adjust to fill the browser window no matter what size it is. Layers are a set size, so if the user has an older machine your page won't fit on the screen and if you design it with layers so that it'll fit on smaller monitors, then it will be tiny in big monitors. Get past that and then what happens when the user changes the size of the fonts on his system? Your web page looks horrendous , that's what. See where I'm going with this? Try using tables to layout your content, and then occasionly placing a "relatively positioned" layer in one of the cells. Works great on everyones deals if you keep in mind the above. As far as the stacking order (or "z-index") that's simple, the layer w/ a z-index of 0 will be on top of all the other layers and will hide any layer positioned on the same pixels.
  3. Try going over to Paul O'Brien's site and having a play with some of the CSS he has built: http://www.pmob.co.uk/ It will give you a feel for how everything works and you can then adapt the layout for your own use. I learnt more here (at the start) than on the W3C site; which can be a bit hard to get through. After that, pick up some great looking OpenSource templates from: http://www.oswd.org/ ---
  4. Hopefully I can help to clear up some of the confusion. I've been coding CSS for years, and only build CSS-based (tableless) web sites today. View my web site is below. >> Pretty much anything that can be done with CSS can also be done in HTML somehow. Wrong. CSS also allows you to manipulate aspects of HTML that are not even part of the document tree (or, the table of elements) for example, the :before and :after pseudo elements, or even more advanced selectors which are part of CSS3 such as :not, :contains, or attr(x). http://www.cssdreams.com/tu/attrx.php >> Those boxes are called "Layers" actually and they should be used very, very sparingly. Layers are a set size <snip> Wrong. People who use Dreamweaver started calling them "layers" because thats they were called that inside that program. But in reality, they are merely the HTML <div> element. Either set by position:relative, position:absolute, or position:fixed through CSS. Nothing more. However, most people who don't know any better, just call them "layers" now anyway. Also you can specify the position of them to be "relative", so they can move around based upon their containing box, or the position of other divs next to them. for example: #xp { position:relative; top:50%; left:20%; } And they will move if the window is resized. ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Regards the original question - Mostly all elements, unless they are inline, (such as text and images) display as a box. These boxes can be wrapped in div tags, and aligned into various "positions" on screen, via CSS. And you can move them into these positions either by 1) floating, or 2) positioning. Explaining them both in detail would make this a really long-azz post, perhaps someone else can explain in more detail how CSS-based layouts are work...
Powered by Yahoo! Answers