CSS - The Fancy
To begin the CSS section, I'd like to refer back to my extended metaphor. Like a house, a web page isn't very pretty if all you have is the foundation. Sure, you can change colors and fonts and sizes of text, and you can even add borders and other neat effects to images, but where does that get you? To make a layout, to give your web page structure, you need much more than HTML. You need the other (major) language of the Internet - CSS. You need to wow your visitors with the fancy.
Say you want a box (labeled "boxy" - more on that later) 100 pixels tall and 400 pixels wide, with a purple background. And you want that box to be exactly 100 pixels from the top of the screen and 25 pixels from the left of the screen.
Well, you certainly can't do that with just HTML. Those HTML codes don't exist! So, you use CSS.
See what I did there? I named the element I wanted to change, put in the opening brace ({), added all my commands, then put in the closing brace (}). The following is a simple template:
You can add as many ATTRIBUTE: PROPERTY;s as you want. You always have to make sure that a colon (:) follows the attribute, and that a semicolon (;) follows the property.
You may have noticed that CSS is formatted in a particular way, with those particular line breaks and spaces and tabs in front of every attribute. This is because, on Neopets, the filters automatically organize your CSS for you, so even if you typed that all out in one line with no spaces anywhere, after you hit "save changes" it'll revert to that. You should probably type out your CSS like that from the get-go, though, to make it easier on yourself.
So, where do you put all of this? With HTML, all you had to do was stick the code in anywhere. But if you just stick the CSS code in, it won't do anything - your web page will literally have:
#boxy {
height: 100px;
width: 400px;
background-color: purple;
position: absolute;
top: 100px;
left: 25px;
}
on it, wherever you stuck the code. You need to tell the browser that it should read the text as CSS, not just text.
One way of doing that is adding inline styles to your HTML. Let's say our #boxy is a div. (I'm kind of skipping ahead here, so don't worry if you're confused - I'll explain in the IDs & Classes and Divs & Positioning sections.)
Within #boxy's HTML tag, we're going to add some CSS styles.
This might seem like the most straightforward way to add CSS to your page, but in reality, it should be used only where completely necessary. For instance, on Neopets petpages, because the filters are messed up, you have to include any positioning (like the position: absolute; used on #boxy) in inline styles.
A much easier way to add CSS to your page is to put it in between style tags. This enables you to quickly edit your CSS without having to scroll though miles of HTML coding to find it. Observe:
Notice that the HTML is outside the style tags (or, more accurately, below the closing style tag).
One of the common misconceptions among beginners is that you have to have opening and closing style tags for each element you want to change. If you did that, the coding would look like:
It would work, but look how messy that is! You really only need one set of style tags. This is a much better way to do it:
Also, if you find that multiple selectors have the same attributes and properties... combine them, using commas (,). It saves loads of character space. For example - say #boxy and #boxish both have a with of 400 pixels and a height of 100 pixels. Your coding looks like this:
After you combine it, it should look like this:
That's cutting down the character space used by almost half. Not only that, but now your coding is cleaner and more efficient, making it easier to go back and edit later.
Now, what happens if you don't put that comma in between your two selectors? It's one little character, but it changes the entire meaning behind that section of coding. Instead of selecting #boxy and #boxish, the browser finds #boxy, then looks within at #boxish. Sounds confusing, right? Well, let me explain what I mean.
Remember that nesting stuff I talked about in the HTML Basics section? You know, an element within an element? Well, you can limit which elements you affect by only selecting the nested versions in the CSS. For instance, say you want most bold text on a page to have one style, but you want bold text whenever it occurs in a paragraph to have a different style. You would do the following:
This method of selecting elements within elements is very useful when you're working with lots of nesting - for instance, editing elements within the modules of a userlookup. Remember, when selecting elements within elements in the CSS, browsers read from the outside in. P B selects bold text within paragraphs; B P selects whole paragraphs that have been enclosed in bold tags.
Also remember that browsers read code top to bottom. Lets say you have two lines of code that contradict one another, like in the example below.
Your browser will go with the last thing it reads, and #boxy will have a width of 200 pixels instead of 100 pixels. You can tell your browser to give higher priority to the first thing, however, by using !important.
Add !important with no spaces on either side between the property and ending semicolon to give it precedence over anything written below. Now #boxy has a width of 100 pixels.
So, now you know how CSS works, as well as HTML. But to design a nice-looking web page, you need to make them work together. You know how I said HTML was like a name tag? And throughout this section I've been labeling things #boxy and such? Labeling is very important, otherwise your browser doesn't know where to look in the HTML when it reads the CSS. That's where IDs and classes come into play.
