CSS!
learn * it
Introduction
For most people, css is a foreign language and is quite a challenge to understand. And just when you almost understand it, a whole new set of filters appears! What to do, what to do? Here is a guide to help you better understand css, especially with all these new filters.
What is CSS?
CSS is an abreviation for Cascading Style Sheets. These Cascading Style Sheets are tools for decorating & customizing the look of your webpage. It is much more convenient than HTML (hypertext markup language). At first this may not seem true, but once you start getting the hang of CSS it will become more apparent.
The Basics
style tags
It is neccesary to include a style tag at the beggining of your css or else it will not work! You will place this at the beggining and end of your document:
<![CDATA[<style>
</style>
]]>
Body Text
Now i will teach you to customize the look of your normal body text. The body text is the text that you are reading right now.
Inside of the style tags, first you insert the base of your body text css:
<![CDATA[#body, td, font, p, u, div
{font-family:FONT FAMILY HERE;
font-size:FONT SIZE HERE pt;
color: FONT COLOR HERE;}]]>
Edit the "FONT FAMILY HERE", "FONT SIZE HERE" and "FONT COLOR HERE" as you wish. For example, if i wanted my font to be Times New Roman, Red, and size 24 then it would look like this:
<![CDATA[#body, td, font, p, div
{font-family: Times New Roman;
font-size: 24 pt;
color: Red;}]]>
Hyperlinks, Bold, Underline, etc
This works exactly like the Body Text but the selectors at the beggining change. If you want to customize hyperlinks then you the code above but replace:
<![CDATA[#body, td, font, p, div ]]>
with:
<![CDATA[a:link, a:visited, a:active]]>
And you can customize bold, underline and italic fonts by doing the exact same thing only replace the selectors! For Bold fonts the selector is
b. For Underlined fonts the selector is
u. And for italicized fonts the selector is
i.
All together now
Lets put together all the css you have learned so far. It should look something like this:
<![CDATA[<style>
#body, td, font, p, div
{font-family: Times New Roman;
font-size: 24 pt;
color: Red;}
a:link, a:visited, a:active
{font-family: Times New Roman;
font-size: 24 pt;
color: Red;}
b {font-family: Times New Roman;
font-size: 24 pt;
color: Red;}
u {font-family: Times New Roman;
font-size: 24 pt;
color: Red;}
i {font-family: Times New Roman;
font-size: 24 pt;
color: Red;}
</style>
]]>
Divs/Tables
Some people prefer tables and some prefer div's. For the most part I prefer div's but I will be teaching you a bit of each. Inside the style tags you must place the following code:
<![CDATA[
#firstdiv {position:absolute;
left:100px;
top:100px;
width:500px;}
]]>
Then, in the main body of your document, where you want your div to be, you must place:
<![CDATA[
<div id="firstdiv">
your text will go here <BR>
your text will go here <BR>
your text will go here <BR>
your text will go here <BR>
your text will go here <BR>
</div>
]]>
Decorations
Decoration pretty much speaks for itself. Here is a list of codes you may use to decorate your text, tables, div's, whatever! These will go inside the {}'s for each selector. You can use these for just about anything!
Borders:
<![CDATA[
border-top: 5px blue solid;
border-bottom: 5px blue solid;
border-right: 5px blue solid;
border-left: 5px blue solid;
]]>
(To make the border thicker or thinner change "5" to a larger or a smaller number. To make the border dashed or dotted, change "solid" to "dashed" or "dotted")
Backgrounds:
One Color:
<![CDATA[
background-color: black;
]]>
Non-repeated Image:
<![CDATA[ background-image: url(http://urlhere.jpg);
background-repeat: no repeat;
]]>
Repeated Image:
<![CDATA[ background-image: url(http://urlhere.jpg);
background-repeat: repeat;]]>
Text Properties
Transformation:
<![CDATA[ text-transform:uppercase;]]>
(can be change to "lowercase")
Alignment:
<![CDATA[ text-align:left;]]>
(can be changed to "center", "right", or "justified".)
Letter Spacing:
<![CDATA[ letter-spacing: 5px;]]>
(If you want the letters really close to eachother then you can change "5" to a negative number. If you want the letters to be really far apart then you can change "5" to a higher number)
Filters
These filters will help get rid of things on pages that you don't want. These are really helpful for neopets lookups, guilds, and petpages.
How do they work?
Filters can be very hard to understand and manipulate. First, you start with the base code, i'll use "header" as an example selector:
<![CDATA[
#header {display:none}]]>
Then you change the selector depending on what you want to filter out. For example, these are the filters that i used for my current userlookup:
<![CDATA[#header, #footer, #contentcontent, #contentmodule,
#contentmoduletable, #user, #userneopets,
#usercollections, #usershop, #usertrophies,
#contentmodulecontent, #m,#n,#mb,#ol
{display:none;}]]>
If you view source your own userlookup and look at the class of the tables or divs that will tell you what to make the selector in order to filter it out. For instance, when i view sourced my userlookup one part of the code looked like this:
<![CDATA[
<div id="usercollections" style="height: 100%">
]]>
I didnt want that div to show up on my userlookup so i added #usercollections to the filter selectors in order to filter it out. Make sense?
List of Filters/Removal Codes
I know how hard filters/removal codes can be to understand so here is a list of filters.
Petpage Top-banner:
<![CDATA[
.object, p, table{display:none}]]>
Petpage Copyright:
<![CDATA[
p table,.sf, hr, .tl, .hdr, .tt, #tbg, #m, #mb,
#n, .sf, p table, hr center, #embed, #object,
#nst, #form, #ol, #ban {display: none; }
]]>
In Action
Sometimes its a lot easier to learn css if you start with a base code and manipulate it from there. That is why i am willing to give you the basic coding that i used on my current userlookup. If you use this base code you
MUST leave credit.
Base code:
<![CDATA[
<style>
#header, #footer, #contentcontent, #contentmodule,
#contentmoduletable, #user, #userneopets,
#usercollections, #usershop, #usertrophies,
#contentmodulecontent, #m,#n,#mb,#ol
{display:none;}
#main {background:none;
border:0;}
.contentModule, .contentModuleTable
{position:absolute;
top: 0px;
left:250px;
width :400px;
height:0px;
border:0px;
background:none}
.contentModuleHeader,
.contentModuleHeaderAlt
{background-color:white;
font-family: arial;
font-size:24px;
color:#000000;
text-align :left;}
body
{background-color:gray;}
body, font, p, td
{font-family:arial;
font-size:10px;
color: #000000;}
a:link, a:visited {font-weight:normal;
font-family:arial;
font-size:8pt; color:#000000;
text-decoration:none;
background-color: #FFFFFF;}
a:hover {font-weight:normal;
font-family:arial;
font-size:8pt; color:#FFFFFF;
text-decoration:none;
background-color: #000000;
border-right:20px #FFFFFF solid;}
a.nav:link, a.nav:visited, a.nav:active
{font-weight:normal;
font-size:24pt; color:#000000;
font-family:arial;
background-color:#FFFFFF;
text-align: center;
text-transform: uppercase;
margin: 0px;}
a.nav:hover {font-weight:normal;
font-size:24pt;
color:#000000;
font-family:arial;
background-color:#CCCCCC;
text-align: center; line-height:50px;
text-transform: uppercase;
margin: 0px; border-right:0px}
</style>
</i>
<a href="http://neopets.com/~provocated" class="nav"> Kendall's Css</a>
]]>
Credit
what belongs to who?
css by
Kendall
