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