CSS Basics and Shorthand
This guide has two parts: CSS Basics and CSS Shorthand. The navigation splits them up for you, so you can find youe way through each one. Enjoy!
How to read the guide
This guide isn't super confusing, but I thought I'd give you a few quick tips on how to read it as well as some general tips, so you aren't confused. :)
- This guide just provides the basics you need to know to get started
- When doing CSS, remember that it goes inside of the style tags. So, you should have one end, and one beginning, with the CSS in between.
- I show the code in the guide, you must remember that that section of code will go in between style tags.
- When you see this:
it means that I am saying something important, so be sure to read it! - The most important thing to remember is that you must read this guide. Just copying and pasting will only get you so far but actually reading it will help you understand what the codes are doing.
CSS Basics
In this tutorial, I will go over some basic functions of CSS used on Neopets.com. Such as changing fonts, colors, backgrounds, etc. Make sure to read the next part, it's super important!
Basics
- Every code used in this tutorial will be inside the tags.
- HTML is used for the structure of a webpage (lookup, petpage, gallery, etc.) while CSS is used to style it.
- In this tutorial, a selector is what the OVERALL thing we are changing (body, a:link, a:hover, h1, a class or ID, etc), an attribute is the thing we are specifically changing (color, padding, font, etc) and the property is what we are changing it too (#000000, 9px, tahoma, etc). SELECTOR { ATTRIBUTE: PROPERTY; ATTRIBUTE: PROPERTY; ATTRIBUTE: PROPERTY; } SELECTOR { ATTRIBUTE: PROPERTY; ATTRIBUTE: PROPERTY; ATTRIBUTE: PROPERTY; }
- Selectors are names of tags in HTML (or your own made up classes/IDs). Notice how we use body? Well, there is also a body tag in HTML. So are table, td, tr, h1, h2, a, div, the list goes on! Now does it make more sense when I say that CSS is used for style and HTML for structure?
- Every attribute is followed by a colon (:) then its property.
- Every attribute seperated in CSS is seperated by a semi-colon (;).
- Curly brackets ({}) are used in CSS, not parenthesis. You only use parenthesis when adding a URL. You will see this later.
- You only need to use one set of style tags throughout all of your CSS. The curly brackets ({}) seperate everything in your style. Therefore, this is no need for more than one set of style tags in your lookup. Basically, there should only be one and only one . Otherwise, you are wasting character space and it isn't technically correct.
- Because of some browers not supporting CSS correctly *coughcoughIEcoughcough* that means if you want your lookup to look AWESOME, check it in many browsers. I check mine in Firefox, Opera, Safari Mac, Safari PC, and IE. If you plan to make a lookup to enter in the Userlookup of the Week on Neopets, then I highly suggest making the lookup for Firefox then check it in IE and Opera because it needs to work in all broswers for that contest. Firefox has better standards on CSS than IE which is why IE makes thing go bad.
- SEPERATE STYLE FROM CONTENT! This is the BEST thing to do. That means no inline styles (the stuff in the HTML that's like: ). Put all the style information at the top and then make classes and IDs for different things. That means take the stuff that you have in your code a million times and make classes out of them. Classes are used many times and IDs are only used once. I will get to this later.
Changing the font-face, size, and color of your text
One of the main things that CSS is used for is to change the font-face, size, and color of the text in your lookup. This is quite simple. You want to change all of the text, so you place this information in the part of your CSS. Here is what the code is:
body { font: 8pt tahoma; color: #000000; }Notice that we combined the font-face and size of our font into one attribute. This is helpful because it allows us to use less characters. Also, you do not NEED the spaces between each attribute or between the beginning of the style and the attribute. I only put those because I find it is easier to edit my style later on. If you need to, you can have no spaces between them, it will not matter. *Note: This is not for the spaces between the words, just the linebreaks.
Links, Links, Links, and More Links!
These are things that we really want to change, huh? :P Lets get away from that oogly blue! Frst, lets talk about each pseudo class we use to change them. Don't worry about the technical term for them, let's just know what they do. :)
- :link is how the link looks with nothing done to it.
- :visited is how the link looks after it has already been clicked.
- :active is when the link is clicked on.
- :hover is how the link looks when the mouse is placed on the link.
Each of these pseudo classes are appled to the HTML tag, with the use of CSS, meaning we don't have to directly do anything to the HTML tag. Moving on, each of these psuedo classes are their own different CLASSES. Don't worry about understanding this, just put these. :P Below are the basics are your links.
a:link { font:8pt tahoma; text-decoration: none; color:#000000; } a:active { font:8pt tahoma; text-decoration: none; color:#000000; } a:visited { font:8pt tahoma; text-decoration: none; color:#000000; } a:hover { font:9pt tahoma; text-decoration: none; color:#000000; }Usually, when I am doing my links, I usually make the a:link, a:visited, and a:active links all the same color and the a:hover link to a different color. Since I do this, I can shorten my code to this:
a { font: 8pt tahoma; text-decoration: none; color:#000000; } a:hover { font: 8pt tahoma; text-decoration: none; color:#FF0000; }Here is a list of the other effects you can use by just adding them into the code above. Each is separated by a semi colon (;) and you can use as many as you want (but use caution as it may get too busy):
-
Text-Decoration Effects
- text-decoration:none; - the link has no effect
- text-decoration:underline; - the link is underlined.
- text-decoration:underline overline; - the link is underlined and overlined.
- text-decoration:line-through; - the link is slashed out.
-
Border Effects
- border:1 solid; border-color:#000000; - puts a solid border around your link when hovered over
- border:1 dashed; border-color:#000000; - puts a dashed border around your link when hovered over
- border-bottom:1 dashed #000000; - puts a dashed LINE underneath your links.
- border-bottom:1 solid #000000; - puts a solid line under links.
-
Filter Effects
- filter:fliph; height:0; - makes links go backwards.
- filter:flipv; height:0; - turns links upside down.
- height:0;color:000000; filter:wave(add=0,phase=4,freq=5,strength=2); - makes links wavy.
- filter:dropshadow(color=#000000,offX=1,offY=1); height:7pt; - the link has a shadow to it.
- filter:blur(add="0",direction="180",strength="2"); height:0; - the link has a blurry look to it.
-
Text Transform Effects
- text-transform:capitalize - makes the first letter of your link capitalized.
- text-transform:uppercase - makes the link all CAPS.
- text-transform:lowercase - makes links all lowercase.
-
Different font-weights
- font-weight:bold; - makes the link bolded.
- font-weight:italic; - makes the link italicized.
- font-weight:normal; - makes the link normal weight.
-
Other
- font-size:#pt; - makes the link a bigger/smaller size. (Substitute # with the actual number [8, 10, 12]).
- background-color:#000000; - the link now has a background color.
Adding background properties
Adding background a image and color is another thing that CSS is popular for. By using CSS to add this these, we can define many different properties. The basic code for adding these is this:
body{ background-color: #HEXCOLOR; background-image: url('URL OF IMAGE'); background-position: POSITION YOU WANT *property property*; background-repeat: REPITION YOU WANT IF ANY; }- Background-color is the color of the page background. It is a VERY good idea to add one if you have an image that is not the whole size of your page (or other users with different resolutions) and it has a different background color than white. This way, we will not get an icky white space. So just do it. :P
- Background-image is one of the places where the parenthesis come in. Add the URL of your image inside of the parenthesis and the quote marks. If you made your own images, photobucket.com is a geat place to host them for free. If using a Neopet.com image, just get that image's URL.
- Background-position is just that. Where do we want our image to be? I put *property property* because we can position it with two different properties. The properties are left, right, top, bottom, center. All you have to do is combine two of these to position your image. Or you cold just use one of them.
-
Background-repeat is whether we want our image repeated. The four choices are no-repeat,
repeat, repeat-x, repeat-y.
- No-repeat does not repeat the image.
- Repeat repeats the image all over the page.
- Repeat-x repeats the image horizontally (left to right).
- Repeat-y repeats the image vertically (up and down).
Here is an example of the code with some properties in it:
body { background-color: #00FFFF; background-image: url('http://www.neopets.com/image.gif'); background-repeat: repeat-x; background-position: bottom center; }Now, all of those above codes are great and work. But there is also a short-hand way of doing the same things which will make you use less character space. It goes as follows:
body{ background: color image repeat position; }See how all of the codes we had above are now easily placed in one line of code? Here it is in action:
body{ background: #00FFFF url('http://www.neopets.com/image.gif') repeat-x bottom center; }Cool, huh? ;)
Classes and IDs
These are my favorite! They help to seperate our style from our content. This is a very good thing because it keeps things organized. (Also, if you were creating an actual website, not just a lookup or petpage, they help you edit your website scheme much faster, along with the rest of the CSS we are using.) I would recommend uses classes or IDs any time you use CSS.
Note: This is more advanced.
As I said before, by using classes or IDs we are getting rid of the inline styles ( the stuff in the HTML that's like: ). We want this! :P
Right now, you are probably wondering what a class and a ID is. Well, I am about to tell you. :P
- A class can be applied to any HTML tag that the styling is appropriate for. The same class can be used many times. In your style code, a class name is preceded by a period (.).
- An ID can only be used once. If the same name were assigned to two IDs, the page wouldn't work right and would possibly cause a browser error. In your style code, an ID name is preceded by a number sign (#).
- In lookups and petpages, classes or IDs or mainly used to position divs or to give color to table rows and such. In real websites, they do wonders! :) This page was made using classes and IDs.
- Any time you have an inline style, you can take that style and make it into a class or ID (depending if the same is used multiple times) and then that way, if you want to change it, you only need to change it in the style code, not in your WHOLE lookup. Also, it seperates style from conent which makes you code look more organized.
Here is an example of a page with a lot of inline styles:
body { background-color: #FFFFFF; } Hello! How are you doing? Yay!Here is that SAME code, but with classes and IDs applied to it. See how much better the coding looks and how much more organized?
#ID{ position:absolute; left:50px; top:40px; width:450px; border:1px solid black; } .CLASS{ font:8pt verdana; color:blue; } .CLASS2{ color:red; } Hello! How are you doing? Yay!
Absolute Positioning
Absolute positioning is a great feature. With this, you can place images, divs, etc absolutely (meaning they won't move) anywhere on a page. Usually, I don't like these for websites or petpages, but I find it great for lookups! To set these to be positioned, you would add an ID, as talked about above, to the item.
You position an image, div, etc starting from the left of the screen (in PIXELS). So, when using this feature, you really only need three things in your CSS and that is what type of positioning you are using (absolute), how far away from the LEFT of the browser screen the item will be, and how far away from the TOP of the browser screen the item will be.
Absolute positioning is a lot of trial and error. You basically keep guessing, unless you use Paint to measure the pixel distances or Adobe Photoshop, but I am not sure about Paint Shop Pro. Here is the very simple coding:
ID { position:absolute; left: # OF PIXELS FROM THE LEFT OF THE SCREEN; top: # OF PIXELS FROM THE TOP OF THE SCREEN; } ID2 { position:absolute; left: # OF PIXELS FROM THE LEFT OF THE SCREEN; top: # OF PIXELS FROM THE TOP OF THE SCREEN; } TEXTEasy, right? :)
CSS Shorthand
When creating an actual website, a big advantage of CSS is that it cuts down on the webpage download time. Without CSS, you would have to change colors of fonts using the tag over and over again. But, with CSS, all that can be done in one CSS file. Cool, huh?
But, why stop there? By using CSS shorthand, we can cut down on the document size even more! Also, if you are using CSS on Neopets, using CSS shorthand will cut down your coding character space and allow you to add more text to your lookup/petpage/shop.gallery/etc!
Below is a list of all the basic shorthand properties. :)
Fonts
Instead of:
font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 11px; line-height: 2px; font-family: verdana;use:
font: italic small-caps bold 11px/2px verdana;So, your guideline for this would be:
font: style variant weight size/line-height family;This shorthand only works if the font-size and font-family are specified. It can work without all the other properties, but those two must be present. Also, remmeber, if you leave out the other properties, they will automatically default to the value of normal.
Backgrounds
Instead of:
background-color: #fff; background-image: url('image.gif'); background-repeat: no-repeat; background-position: top left;use:
background: #fff url('image.gif') no-repeat top left;So, your guideline for this would be:
background: color image repeat position;There is not set value that needs to be used in this code. So, if you leave something out, it just goes back to default.
Lists
Instead of:
list-style-type: circle; list-style-position: outside; list-style-image: url(image.gif);use:
list-style: circle outside url('image.gif');So, your guideline for this would be:
list-style: type position image;
Margin and Padding
Four Different Values
Instead of:
margin-top: 3px; margin-right: 4px; margin-bottom: 5px; margin-left: 6px;use:
margin: 3px 4px 5px 6px;So, your guideline for this would be:
margin: top right bottom leftThree Different Values
Instead of:
margin-top: 3px; margin-right: 4px; margin-bottom: 5px; margin-left: 4px;use:
margin: 3px 4px 5px;So, your guideline for this would be:
margin: top right&left bottom;Two Different Values
Instead of:
margin-top: 3px; margin-right: 4px; margin-bottom: 3px; margin-left: 4px;use:
margin: 3px 4px;So, your guideline for this would be:
margin: top&bottom right&left;One Value
Instead of:
margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;use:
margin: 10px;So, your guideline for this would be:
margin: top&bottom&right&left;All of the rules above are the same for both padding and margins! :)
Borders
Instead of:
border-width: 1px; border-style: solid; border-color: black;use:
border: 1px solid black;So, your guideline for this would be:
border: width style color;
More tips
- Be creative! Play with the codes and make them your own.
- Google is a great place to find tutorials on how to do something!
Thanks!
Thank you for using and visiting my petpage! I hope that everything was helpful to you and that it was all explained well; I try my best. If you feel that I did not add something on this page that should have been added, please feel free to neomail me and I will let you know if it would be good to add it (I am only adding basic things, sorry).
Or, if you have any comments about the page, neomail me for that too! :) However, I most likely will not help you directly with your coding unless I am in a good mood or see you around the boards needing help, I'm sorry, I just do not have the time to help with every question.
Thanks again, and please, tell all your friends!