Para's EVEN BETTER CSS Tutorial

[Paraiba Ocean]

CSS stands for Cascading Style Sheets.

The most common place I can think of it being used on is on the one and only, livejournal.

CSS edits are opened and closed with { }.

And example taken from my livejournal account's coding:

body {
background-color: #EDEDED;
text-align: center;
color: #777777;
font: 8pt arial, sans-serif;
margin: 10px 0 20px 0;
}

All colors still require hex codes. Actually, I find CSS to be much simpler than HTML.

Keep in mind if you do NOT close the { }, your code will not work.

.headerimage {
position: relative;
width: 640px;
height: 464px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 10px;
background-image: url("http://i35.tinypic.com/214v502.png");
background-repeat: no-repeat;
}

Most CSS layouts on livejournal use the basic stylesheets of themes (Flexible Squares and Smooth Sailing being the most common) and just edit the entire thing with custom fonts, colors, links, backgrounds, and banners.

I believe another site that uses CSS is freewebs.com.

Pixels, sizes and margins are all very important in CSS. If you're not careful, you may have a wide layout with a banner half it's size. You may also end up having your layout shifted to the right, with your banner shifted to the left.

Something else to keep in mind would be monitors and browsers. Internet Explorer and different dimensions are notorious for un-aligning your layout when you alter the left and right margins.

Ex:

.headerimage {
position: relative;
width: 640px;
height: 464px;
margin-left: auto;
margin-right: 200px;
margin-bottom: 0px;
margin-top: 10px;
background-image: url("http://i35.tinypic.com/214v502.png");
background-repeat: no-repeat;
}

While that may look correct on my computer, it may look wrong on yours.

Things you want hidden:

Sometimes, if you code layouts to be used by the public much like I do, you may include a note that credits you for the code, correct?

/* Insert What You Want Seen In the Code Area, But NOT On the Layout. */

Sometimes, you may also want to include !important.

.userpicfriends {
background-color: #FAFAFA !important;
padding: 5px;
text-align: center;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
margin: 10px 10px 3px 10px;
position: relative;
float: left;
}

More to be posted as I think of it. If enough people are curious, I may post a plain layout made of CSS so you guys can butcher the codes up to your heart's content.

[notreal]

You did a really good job on this, Para, thanks for the tutorial. =D

[Paraiba Ocean]

Thanks, Shay. ♥

[TML]

I really like reading these. I learn a lot from it. Thanks. . . .or should I say. . . ありがとう !! If you were to post the whole layout I would love that. Thank you very VERY much, Para. -karmas!-

[kappaofearth]

thanks, It reminded how do I need to make a LJ

*karmas*