Basic CSS Guide - PT. 1

Hello! I am going to forego any typing quirks for this blog. This blog will include websites, code, etc. to make you more knowledgeable on CSS and also give you a prettier blog (hopefully). Most of this blog is gonna just be the raw code with some pointers and advice.
If you want to become self-proficient in CSS, I recommend watching the CSS tutorial provided by Tom (linked at the bottom of your edit profile page) and becoming comfortable using Inspect Element on people's profile.
In case you don't know: TO MAKE THIS CODE WORK, go to your profile editing page and insert this code into the CSS portion at the bottom.

"How do I change my MySpace background?"

body{
background-image: url(URL HERE)
}

When you use this code, make sure you keep the parentheses and the brackets. Your URL can either be a gif or a still image. If you want a color and not an image, putting "background-color:" instead of "background-image:" works too, I believe! Put in a valid CSS color code, hex code, or RGB values instead of a URL. Here is a link to valid CSS color codes with reference: https://www.w3.org/wiki/CSS/Properties/color/keywords

"How do I change the font colors?"

Main Body Colors:
body{
color: (color code, hex, or rgb)
}

Hyperlink Colors:
a:-webkit-any-link {
color: (color code, hex, or rgb);
cursor: pointer;
}
Fwiend Count Colors:
.fwiendCount {
color: (color code, hex, or rgb);
}

It is important you use BOTH of these codes or else your page will have purple/blue font defaulted on your hyperlinks. By the way, when you put in all this code, make sure a BRACKET separates each line. Brackets are this symbol: }} However, if you are putting in the code in order of this tutorial, you should have no problem (I always include a separator bracket at the bottom of the copy-paste codes).

"How do I change the blue MySpace header?"

Header:
div#header {
background-image: url(URL);
text-align: (left, center, or right);
}
Subheader:
div#hSub {
background: (color hex, code, or rgb);
color: darkred; (This is the color of the dividers between the buttons.)
text-align: (left, center, or right);
}

Remember, background-image can be replaced with background-color instead. For the subheader, background can be replaced with background-image.

"How do I put color behind my about me/blurbs?"

.box {
border: (solid, double, dotted, dashed, ridge, groove, inset, outset, none, or hidden) (color hex) (number)px;
overflow: hidden;
background: (color hex, code, or rgb);
}

Boxes are a part of CSS with a few resources. I will link a site that shows each border and how to do rounded borders. Remember, background can be replaced with background-image. For the number value, I recommend 4-8px. It shows up the best. Here is the link (this site also has other easy CSS tutorials): https://www.w3schools.com/css/css_border.asp

"How do I change the header backgrounds?"

Contacting Header:
.boxHead {
background: (color hex, code, or rgb);
color: (color hex, code, or rgb); (This is the text color).
padding: 3px;
padding-bottom: 4px;
padding-left: 6px;
}
Fwiends Space and Blurbs Header:
.rightHead {
background: (color hex, code, or rgb);
color: (color hex, code, or rgb); (This is the text color).
}

In case you are confused what these are, this is the color behind the subheaders-- e.g, on my profile the headers that say "gundham's gf's Fwiends Space". These are what these code blocks are controlling. Reminder that background can be replaced with background-image. If desired, you may change the pixel values in the Contacting Header. The most important part of CSS is playing around to see how different components work. By doing this, you will become more familiar with reoccurring components.

I HAVE TO SPLIT THIS BLOG IN TWO!! LOOK FOR PART 2 ON MY RECENT BLOGS