I ought to learn CSS.

[littleboy6326]

I've noticed that web design is starting to get more and more CSS based.

I am able to design a HTML site in notepad, and I wish to be able to do this (eventually) with CSS as well.

Does anyone know any sites that explain the syntax, and give you examples, and such?

I have used CSS in the past, but I've never written it by hand. I use Dreamweaver the majority of the time.

So I suppse my question is, do you know of any websites that explain CSS and it's syntax?

Cheers!

[Ixist]

This looks like a good website for help with CSS, and it's by the W3C so you KNOW it's good!

http://www.w3schools.com/css/default.asp

[littleboy6326]

This looks like a good website for help with CSS, and it's by the W3C so you KNOW it's good!

http://www.w3schools.com/css/default.asp

Ah, that pesky W3C and their over the top syntax recognition.

Cheers, I'll check it out.

[Demulesca]

The handbook will have some awesome links for you to check out:
http://www.alvit.de/handbook/

And if you're just just starting out,
http://www.tutorialtastic.co.uk/
Jem has always had some nifty tidbits to read.

If you have firefox, I suggest you download the Web Developer Toolbar. When learning, it's fantastic as you edit the CSS of a webpage in real time, letting you see the changes immediately without having to upload anything.

I hope you have fun learning CSS.

[littleboy6326]

The handbook will have some awesome links for you to check out:
http://www.alvit.de/handbook/

And if you're just just starting out,
http://www.tutorialtastic.co.uk/
Jem has always had some nifty tidbits to read.

If you have firefox, I suggest you download the Web Developer Toolbar. When learning, it's fantastic as you edit the CSS of a webpage in real time, letting you see the changes immediately without having to upload anything.

I hope you have fun learning CSS.

Yup, I've had the Web Dev toolbar for a while.

I'm going to go try and edit some CSS on existing pages, to see how this toolbar works. Never used it before, hehe.

[Siouxper]

CSS is a very good thing to know, especially with webpages and sites. W3C always confused me, so I learned it on my own

[littleboy6326]

Hm. I edited several variables (colours, and the likes), and clicked apply.. But nothing appeared on the page.

I try trying to change the background colour on Neopets, and nothing happened.

There are so many different div's, and such, I got a little lost.

[Siouxper]

CSS is confusing at first, but what I did was went to a CSS code generator, made it, and broke it down to see how it worked. You'll get good at it soon enough.

[Wind]

I came here to make a CSS topic but I was beaten to it
I've been trying to make a layout for a petpage and I wanted to use CSS, but it's a bit confusing is there a way to prevent it from stretching my tables?

[littleboy6326]

I came here to make a CSS topic but I was beaten to it
I've been trying to make a layout for a petpage and I wanted to use CSS, but it's a bit confusing is there a way to prevent it from stretching my tables?

I'm not sure about other forms of CSS, but you cannot apply a Style Sheet to the petpage-- as it already runs on the default Neopian one.

By style sheet, I mean an external file. I'm not sure about CSS applied to the PetPage source.

[Demulesca]

It should be changing immediately on the spot. If you go to any user look-up, click CSS on the toolbar and then edit.

If you're editing it, it should be changed immediately. You shouldn't even need to click apply. It depends on the page also, several pages use different stylesheets and you have to edit certain ones to get the changes you want.

If you want to see a change, go to my user look-up (demulesca) and then click on the embedded styles tab in your Edit CSS Dev Toolbar. Change a few values around (work with the colours first) and you should see the values changing.

You can apply a stylesheet to any page that allows editing, it's just embedded and not external. You can add additional stylesheets that are embedded, as many as you like as long as the CSS is between style tags.

wind... show me the problem and I'll help you with it.

I can see to creating a CSS tutorial on PPT forums, if time allows me to.

[littleboy6326]

It should be changing immediately on the spot. If you go to any user look-up, click CSS on the toolbar and then edit.

If you're editing it, it should be changed immediately. You shouldn't even need to click apply. It depends on the page also, several pages use different stylesheets and you have to edit certain ones to get the changes you want.

If you want to see a change, go to my user look-up (demulesca) and then click on the embedded styles tab in your Edit CSS Dev Toolbar. Change a few values around (work with the colours first) and you should see the values changing.

You can apply a stylesheet to any page that allows editing, it's just embedded and not external. You can add additional stylesheets that are embedded, as many as you like as long as the CSS is between style tags.

wind... show me the problem and I'll help you with it.

I can see to creating a CSS tutorial on PPT forums, if time allows me to.

Ah, yeah. Whoops. I was actually just messing with the wrong values.

[mazil]

Heh, a Neopets CSS guide. I'd be happy to help with that. A guide teaching the entirety of CSS would be a big task, though!

I find the W3C/W3Schools pages a bit complex and messy for just starting out... they're better to use as references for later on I think. The tutorials at HTML Dog and other places seem a bit more friendly.

Here's their beginner CSS page: http://www.htmldog.com/guides/cssbeginner/

---

littleboy6326, I'd probably start out with a basic HTML page first, rather than trying to wade through the Neopets CSS styles. CSS for any large site is often complicated and messy!

You mentioned you know HTML as well? Here's a basic webpage you could try copying and pasting into Notepad (and saving as an HTML file):

Code:

<html>
<style>
body {
   background-color: #ddd;
   color: #333;

   font-family: Arial, sans-serif;
}

h1 {
   font-family: Times, serif;
   font-size: 14px;
   color: #336699;
}

a {
   color: #FF9900;
   font-weight: bold;
}

.important {
   color: red;
}

</style>

<body>
   <h1>This is a test heading</h1>
   <p>There is some content text here.</p>
   <p class="important">And another paragraph of context text, with a <a href="#">link</a>.</p>
</body>
</html>


You can try changing around the CSS styles, which are those lines up the top within the "style" tags.

Changing the text styles is a good/interesting place to start: HTML Dog Text Info, W3Schools Text Info

In terms of syntax, you can apply CSS to HTML in three ways:

• Using HTML element tag names (eg. "body", "h1", "p", "a"), which is what I've mostly done above
• Using Classes - these are referenced in the stylesheet by putting a full-stop/period before the class name (eg. ".important") and referenced in the HTML by the "class" attribute (eg. <p class="important">)
• Using IDs - these are referenced in the stylesheet by putting a hash (#) before the selector name (eg. "#content") and reference in the HTML by the "id" attribute (eg. <div id="content">).

You'll probably only need the first type to begin with, then progress onto the second and third types later on

Good luck with it! Yay for CSS

[littleboy6326]

Alright, cool. I'll check it out.

I've dealt with CSS before, on my old site... I had a friend help do the CSS aspects of it, for me.

There was a .css file, which contained (quite clearly) most of the information about fonts, font sizes, background colours, et cetera.

[Wind]

Thanks for the links.
More or less I got what I wanted (i.e. fancy fonts), my problem is this:
http://www.neopets.com/~Rylende (please ignore the mess)
Why is there so much blank space under the table?