html guide | http://kimsjongin.tumblr.com

HTML GUIDE | by http://kimsjongin.tumblr.com | still a work in progress lol

so first of all:
tumblr has a good explanation for making themes here: http://www.tumblr.com/docs/en/custom_themes
if you want to test this stuff as i go along use this base code: http://socriminals.tumblr.com/post/39283639852

TAGS

at the beginning of a theme, we have the <!DOCTYPE html> tag which begins the html. at the end of all the html, there's a </html>, which signifies the end of the whole code. doctype means document type.

then right after that, there's usually the <head> tag, and after that is all the meta tags. you know what those are. i'll explain them more after this. the head tag usually ends after the </style> tag.

then at the beginning of the css stuff, we have <style type="text/css">. at the end of that, there's </style>. [As you can see, the slash after the carat (that's what the arrows are called) signifies that the tag is ending a section. ]

at the beginning of the actual content of your blog, you have the <body> tag and the end of the content is signified by </body>.

CSS

k so css means "cascading style sheet" and basically you use css to style stuff
in css we usually use hex colors (we use rgb colors too but that's really tough to learn so i won't go into that).
hex colors are a # with six numbers/letters after it. if it's a common color like white or black, you can just put the actual name of the color rather than the hex value.
if the hex color is just one letter/number repeated, you can shorthand it to only three characters. white is #ffffff, but you can say #fff for short.
if you want the easy way out, go to colorpicker.com and pick hex colors whenever you need one.
***it would be good to have some hex colors memorized for future reference, though. i've memorized white (#fff), black (#000), gray (these go from lightest to darkest): #eee #ddd #bbb #999 #9a9a9a #aaa #888 #777 #666


here's an example. i've put all the simple styling stuff into it.

#blah {
/*it could also be .blah; btw putting this symbol of an asterisk and a slash allows you to put notes in your code without affecting the code*/

/*stuff for styling text*/

color:#000; /*this is the color obv*/

background: #fff /*white*/ url('IMAGEURL') /*this is if you wanted a background image*/;

border: 1px solid #ddd; /*the 1px thing is border width. solid is the border style, which could be dotted, dashed, or double. #ddd is the color. #ddd itself is gray, but go to colorpicker.com and choose a color from there if you want to replace it.*/

/*padding is the space around something. before i teach you how to edit the padding, you should know that if you want to keep it all on one line, you could replace padding-top padding-right padding-bottom and padding-left with padding: 1px 1px 1px 1px; and the order would go top, right, bottom, left.*/

padding-top: 1px;

padding-right: 1px;

padding-bottom: 1px;

padding-left: 1px;

/*margin is the position of something. before i teach you how to edit the margin, you should know that, just like in padding, if you want to keep it all on one line, you could replace margin-top margin right margin-bottom and margin-left with margin: 1px 1px 1px 1px; and the order would go top, right, bottom, left.*/

margin-top: 1px;

margin-right: 1px;

margin-bottom: 1px;

margin-left: 1px;