So, over the past few days I've learned that just about everybody here uses CSS for their layouts, profiles, ect. and that HTML is pretty much non-existent these days. I use HTML, and have done so for years. I've heard about CSS but never thought it would be useful at ACMLM boards, until recently. I know nothing about CSS. Literally nothing, other than it's called "CSS".

Can you guys teach me right here, in this thread, the basics of CSS? What are the basic "tags", if that's what they are, used in ANY CSS coding? What do they do and can examples be given? Is it similar to HTML in ease and/or style? Is HTML now out of style or? something Specifically, I want to learn enough to know how to be able to customize my profile background and header bars like everyone else around here, and gain some extra knowledge.

I've already asked in the Help forum about how to do the profile background thing, but didn't get many responses. Those that did post in there didn't seem like they could help me. Or probably didn't understand the question I was asking. I wasn't about view a page source because I don't know the different between HTML and CSS, or if there is one. So now I'm resorting to this- a general help question, in THIS forum. I made it after getting a PM from BNuge that mentioned being sent to me about an HTML problem because apparently I'm the only member on Vizzed that still uses it. As if I'm fluent in an long-forgotten ancient language. And I put it here because not everybody checks the Help forum and also so other CSS virgins like myself can learn something to use in the future that might be useful in real life.

Please let there be somebody who can help and explain everything...

i dont know in the world what is CSS so i cant answer to that sorry

I still use HTML in my layouts.

Anyways, CSS is a style.

It's like HTML and Java mixed together.

It's started with

<style type=CSS>

I have one site for you. w3schools.com
Best site ever for HTML,XSS,JAVAscript, whatever.

CSS stands for Cascading Style Sheets

CSS can be considered a lot different then HTML, as it is a lot more complicated. However, like HTML, it just involves tags, so it is basic enough once you learn the fundamentals of it. HTML is still commonly used, however a lot more can be done with CSS, and that's probably why it it gaining in popularity with both layouts here on Vizzed and the entire Web.

It's really hard to explain CSS, I mean if I tried to this page would go on and on and on. There's this really nice forum called Site Point, where there are experienced developers fluent in all web design languages. I suggest you read some of their topics and perhaps ask a few questions of your own.

Otherwise, if you basically just want a guide, I'd go with w3schools.com, like pi0x said. Really nice reference for all web designing, really.

Hopefully this helps.

the_casualty : It helped a little with explaining what CSS is. And please, by all means if you have to go on and on trying to explain it, do so. I made this thread for that purpose. Myself and others won't learn anything here otherwise. If someone was asking to learn about HTML you can bet I would list everything I know, where tags are used, when to use then and what they do. I went to that site and looked around. It probably should have been mentioned by someone that CSS uses { and } for tags instead of < and > like HTML does. And that instead of "=" to tell what something is being changed to, CSS uses ":" (colon) And is there a reason why the tag borders end up on different lines like this?

{

tag body
tag body


}

Is there anything else I should be aware of about CSS? Any differences? Any common tags that are always used?

Hmm... ok. Why don't I go through some of the more basic tags... and explain CSS a little more.

You see, HTML was never meant to have tags to format a document. It was basically meant to define what a document is. When the tags like the font tags were added to Html version 3.2 (or some version around that time), web developers were extremely angry and frustrated. It would take a ton of time to put the font tags and the like into every single page. Because of that, CSS was created. CSS gives people the possibility to install a single, separate file into their database, and in return the file would edit the entire website. This saved a lot of time.

CSS is used to define how HTML is displayed. So, in no right is HTML outdated.

Now, in the right of layouts, you must have CSS on the same page as the HTML. There is no way to save more then one file for you layout... although that would be cool. So, you must use a combination of both.

<*div style="*background-image:url(yourpicture.com);b*ackground-repeat:no-repeat;h*eight:400px;w*idth:300px;">

(I stuck a lot of stars in there to be absolutely certain that the design would not show up. Be sure to remove them. )

Lemme explain each part of that line.

Part 1 : Div style

All of your CSS styling with tables must start with this, if I'm not mistaken.

Part 2 : Background image

If you intend to put a background on your layout, you have to have this. You can also replace this with "background-color", and then put the color there. (either hex # or word).

Remember, you MUST have a dash in between all spaces in the CSS tags.

If you put a space between the tag, it won't register. "background-image" will register, however, "background image" won't. Keep this in mind. The only suitable place to put spaces in CSS at all is when you
make a new line
like that, for the most part.

Part 3 : Background repeat

This part is pretty basic. Enter "repeat-y" if you want the background to repeat. If you have a looping background, this is the way to go. The only reason to enter "no-repeat" is if your picture is a simple, non-loopable picture.

Part 4 : Height

Basically, you're just specifying how many pixels you want it high. This part is especially important in layouts, as there is a limit put on the size of them (550px is max if I'm not mistaken). This is also important if you have a portrait picture, having the layout bigger then the non-loopable picture will look like a mess.

Part 5 : Width

This is the same thing as height, except this time you're going sideways. The limit for the width of layouts anymore is 800px I believe.

Some more things to keep in mind:

*Always keep the number of pixels and the "px" together. Remember what I said earlier about spaces in CSS?

*When defining the parts of your design in the div style tag, be sure to separate the parts (like background-image, height, width, etc.) with a semi-colon ( ; ). That's the way things are divided in CSS.

*Also, always make sure your ending tags are matched up with the content you made. Be sure to put a <*/div> (remove the star) in the "signature" part of your layout, or the end of your CSS/HTML document.

Hopefully, this is a little more helpful. If you have any more questions, shoot them at me. I am ready to go some more, like margins and the like, if you'd please.

alexanyways :

If you use HTML, then maybe you can help. How do you make a background repeat? I use div tags for the background and a spent a while browsing around w3schools trying to find a way to make it work. "background-repeat" and stuff like "repeat-x" accomplished nothing. I tried switching from div tags to table tags (per Cyro's suggestion) and my background disappeared completely. I like my layouts now, but some would look better if I could make them repeat.

BNuge : You can't just put "background-repeat" and expect it to repeat. You must put:

background-*repeat:*repeat-y (minus the stars)

That should work, if you haven't tried it yet.

the_casualty :

This is the code I use at the beginning of my layout for the background image (minus the * ).

<*div style*="*background-image: url*(http://www.vizzed.*com/vizzedboard/magnumdirectory/photo_album_pics/fullsize/47040-1297717352.*jpg)*;width:798px*;height:498px*;background-repeat:repeat-x*">

The background-repeat part isn't usually there, but I decided to drop it in anyway since that's where I tried it. Adding it in that spot did nothing to the layout. Does it go somewhere else or... I don't know?

BNuge : No, everything seems to be in the right order. The only problem I see is that you put "repeat-x" instead of "repeat-y". Was it a typo, or...?

I can agree that the "x" is what may be causing the problem. When you used the tables did you happen to use CSS with it? When I explained what I did I had no CSS in whatsoever. With nothing but HTML images automatically repeat unless set to a specified size.

Thank you, casualty for your explanation. So what's with a single tag being on a seperate line? Like this:

{
sfrere
erfe
}

Cyro Xero : You can control background images with the following:

background-position:;
background-repeat:;
background-scoll:;

These { } are basically containers for styles so for instance I can make a quick style like so:

.randomStyle {
width:400px;
height:400px;
background-color:#000000;
}

Then to use that style you simple can use:

<*div class="randomStyle"*> <*/div*> (Minus the *'s )

You probably won't need to do { } here on Vizzed for your layouts depends though. If your NOT using a remote css file then you will end up using div style instead. You don't need a file for styles but its the best way to go about it. Although that is out of the question here on vizzed you have to put it up all one one page.

You dont NEED { & } to make layouts though you can easily just insert the style attributes within the div style tag.

JigSaw : So what about a profile page? I've tried using it in that format but only the single line works. Even the width and height adjustments for an image fail for a the single line version. Is the board causing that problem?

And since we're on the subject of div tags I have a question I've meaning to ask for the longest time: just what the hell IS a div tag. What does it do, and what would I need it for? I've asked on a couple boards in the past but nobody could give me a straight answer, despite some of them having used it a lot.

the_casualty :
Cyro Xero :

I deliberately used X because I want it to repeat horizontally, not vertically. I use scroll bars, so vertical repeat is not necessary or useful to me. When I took that exact coding (minus the background part) and changed the div tags to table tags, my background completely disappeared. That was why I went back to using div tags.


JigSaw :

Am I somehow crossing the border between HTML and CSS? I spent a long time searching the internet for how to add a background image and stumbled across that code. I knew how to do it with body tags, but those weren't working with post layouts so I had to find another way.

I'm thinking that this method looks a bit more like CSS than HTML. I know nothing about CSS and it seems too different from HTML to try to learn right now. Maybe I'll have time over the summer to learn it, but right now I just want to figure out why my HTML isn't working. I can send my entire code to you if you want.

All of the images I've used are JPEGs and are in my Vizzed Photo Album, so I don't think those should be an issue. I'm stuck and I don't want to be relying on solid color backgrounds to fill a layout forever. The OoT layout I have now only extends to the end of the stained glass. The black area after that is just background color.

Cyro Xero : As far as I'm aware of, the div tag is used to define divisions in an HTML/CSS document. It's basically used to group elements so you can format them with styles.

Cyro Xero : Yea you probably have to use single lines on profile since your trying to alter other elements beyond a post layout. As for what a div is, its whatever you want it to be I don't like reading and following the definitions of things, so I look at it as a box or a style that you can do whatever to it. Many uptight coders say to not use div a lot, well I say its a free country we can do whatever we want

BNuge : Your not suppose to use body tags for your post layout that is to define the sites attributes not your post layouts. Might as well send the code would be easier to tell what is wrong that way.

BNuge : You can send your coding to me if you want as well. I can look at it and test it out for myself to see what the problems are.