Pink Poogle Toy Forum

The official community of Pink Poogle Toy
Main Site
NeoDex
It is currently Fri Dec 06, 2019 6:43 pm

All times are UTC




Post new topic Reply to topic  [ 18 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: I ought to learn CSS.
PostPosted: Wed May 16, 2007 1:04 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
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!


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 1:12 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 594
Joined: Sun Sep 10, 2006 2:08 am
Location: Scotland
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


Image
Set by the WIS, the ORIGINAL House Stalker!

When I see his posts, I fill with righteous rage. :D


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 4:54 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
Ixist wrote:
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 4:59 pm 
PPT Toddler
PPT Toddler

Posts: 109
Joined: Thu May 17, 2007 7:31 am
Location: Canada
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. :)


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 5:29 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
Demulesca wrote:
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 8:06 pm 
Moderator
Moderator

Posts: 2952
Joined: Tue Apr 04, 2006 8:40 am
Gender: Male
CSS is a very good thing to know, especially with webpages and sites. W3C always confused me, so I learned it on my own :P


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 8:22 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 8:29 pm 
Moderator
Moderator

Posts: 2952
Joined: Tue Apr 04, 2006 8:40 am
Gender: Male
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 9:26 pm 
Beyond Godly
Beyond Godly
User avatar

Posts: 2577
Joined: Mon May 31, 2004 1:36 pm
Location: Italy
Gender: Female
I came here to make a CSS topic but I was beaten to it :lol:
I've been trying to make a layout for a petpage and I wanted to use CSS, but it's a bit confusing o_O is there a way to prevent it from stretching my tables?


Image
Set by Pixa <3 || WWW for previous sets || T-Shirts gallery
Support Roo Island!


Top
 Profile  
 
 Post subject:
PostPosted: Wed May 16, 2007 9:45 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
Wind wrote:
I came here to make a CSS topic but I was beaten to it :lol:
I've been trying to make a layout for a petpage and I wanted to use CSS, but it's a bit confusing o_O 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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Thu May 17, 2007 1:18 am 
PPT Toddler
PPT Toddler

Posts: 109
Joined: Thu May 17, 2007 7:31 am
Location: Canada
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.


Top
 Profile  
 
 Post subject:
PostPosted: Thu May 17, 2007 10:32 am 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
Demulesca wrote:
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Thu May 17, 2007 11:30 am 
PPT Trainee
PPT Trainee
User avatar

Posts: 657
Joined: Tue Jun 01, 2004 4:35 am
Location: Australia
Gender: Female
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 8)


Image
Nyum nyum nyum...


Top
 Profile  
 
 Post subject:
PostPosted: Thu May 17, 2007 12:36 pm 
PPT Trainee
PPT Trainee
User avatar

Posts: 703
Joined: Mon Sep 19, 2005 7:07 am
Location: England
Gender: Male
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.


Image


Top
 Profile  
 
 Post subject:
PostPosted: Thu May 17, 2007 1:26 pm 
Beyond Godly
Beyond Godly
User avatar

Posts: 2577
Joined: Mon May 31, 2004 1:36 pm
Location: Italy
Gender: Female
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?


Image
Set by Pixa <3 || WWW for previous sets || T-Shirts gallery
Support Roo Island!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 18 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group