BIG CSS TUTORIAL 2012
Many of you guys told me that you'd be interested in a layout tutorial, so you can make your own. I'd like to start off by saying that this tutorial is VERY BASIC. It will get you started with layouts. I'd also like to say that I'm not an expert, and I've mostly learned by messing around with other layouts and seeing what different things control. You will need a basic knowledge of HTML formatting (the kind used for quotes). Alright, ready?
Here is a photo of the basic Witty Profiles. There is no formatting done to the image. Notice that certain elements are boxed with certain colors. For example, notice that the information box with your username, status, and user ID, is outlined in red. This corresponds with the red .unit-normal on the page. Don't worry if you're confused, we'll cover what it means soon. Just know that each outlined part corresponds with the word of that color.
Notice that when you are making a quote, you might start your code with a div or span. With CSS, you will b e starting your code with the following:
<style type="text/css">
and you will be ending your code with
</style>
In simplest terms, this tells the editor what type of code you want to do. CSS codes are written in a particular way. You don't have to understand why they're written that way, just how to write them. Let's say I would like to edit the the font in the .span12 area. This is how the code would look:
<style type="text/css">
.span12{font-family:georgia;}
</style>
.span 12 tells the editor what element I would like to change. Then, braces { } are used to contain the change. Font-family tells it that I am changing a font. The colon always goes before the change. Georgia is the selected font. After every change, you need a semicolon. This is usually used to separate different changes, but is still required is there is only one change. Let's make it a little more complex. Let's say I would like to give my text a shadow AND change the font. The following code will work:
<style type="text/css">
.span12{font-family:georgia; text-shadow:0px 0px 3px #FFFFFF;}
</style>
Note how both changes are seperated by a semicolon. You can make as many changes to any element you want. Let's say we'd like to edit multiple elements. We also want to change the background color of the .unit-normal and .unit-muted elements. Here is an example of a code:
<style type="text/css">
.span12{font-family:georgia; text-shadow: 0px 0px 3px #FFFFFF;}.unit-normal{background: #FF66CC;}.unit-muted{#FF66CC;}
</style>
Note how after the braces end, you can just type in the name of the next element you are changing.
To change the color of links, the element is simply called a
EX: a{color:#FF66CC;}
<style type="text/css">
and you will be ending your code with
</style>
In simplest terms, this tells the editor what type of code you want to do. CSS codes are written in a particular way. You don't have to understand why they're written that way, just how to write them. Let's say I would like to edit the the font in the .span12 area. This is how the code would look:
<style type="text/css">
.span12{font-family:georgia;}
</style>
.span 12 tells the editor what element I would like to change. Then, braces { } are used to contain the change. Font-family tells it that I am changing a font. The colon always goes before the change. Georgia is the selected font. After every change, you need a semicolon. This is usually used to separate different changes, but is still required is there is only one change. Let's make it a little more complex. Let's say I would like to give my text a shadow AND change the font. The following code will work:
<style type="text/css">
.span12{font-family:georgia; text-shadow:0px 0px 3px #FFFFFF;}
</style>
Note how both changes are seperated by a semicolon. You can make as many changes to any element you want. Let's say we'd like to edit multiple elements. We also want to change the background color of the .unit-normal and .unit-muted elements. Here is an example of a code:
<style type="text/css">
.span12{font-family:georgia; text-shadow: 0px 0px 3px #FFFFFF;}.unit-normal{background: #FF66CC;}.unit-muted{#FF66CC;}
</style>
Note how after the braces end, you can just type in the name of the next element you are changing.
To change the color of links, the element is simply called a
EX: a{color:#FF66CC;}
Ways to Change Elements
font-family
Changes the font.
EX: .span12{font-family:georgia;}
EX: .span12{font-family:georgia;}
font-size
Changes to font size
EX: .span12{font-size:18px;}
EX: .span12{font-size:18px;}
color
Changes the font color.
EX: .span12{color:#FFFFFF;}
EX: .span12{color:#FFFFFF;}
text-shadow
Adds a text shadow.
EX: .span12{0px 0px 3px #FFFFFF;}
EX: .span12{0px 0px 3px #FFFFFF;}
background
Changes the background color
EX: .unit-normal{background:#FF66CC;}
EX: .unit-normal{background:#FF66CC;}
border
Adds a border. Can be solid, dashed, or dotted.
EX: .unit-normal{border: 10px solid #FFFFFF;}
EX: .unit-normal{border: 10px solid #FFFFFF;}
I hope you guys found this tutorial helpful! I might post a more advanced one later on. Feel free to comment on my profile with questions, or mess with some of my layouts to better understand CSS. However, I see this tutorial as a privilege. If I see people making changes to my layouts, then taking credit for it instead of writing their own, this will be taken down. If people get snotty with me because they don't get it, it will also be taken down. I don't mind questions, and I will help you the best I can! Good luck!