Multiply Republic
SEARCH BOX

Understanding the CSS Codes (a must read article)

Posted by -JJ- on Nov 16, '07 12:40 PM for everyone

One of the most usual questions I get here and on the other groups is the question regarding their boxes. Some asking for background color, transparencies, see-through, sizes, background colors and fonts. But first, let me tackle some things that may help clarify several things on CSS.

Since the boxes (or the ITEM BOX - multiply term) is the most commonly and almost always modified, I have posted this for the use of everyone.

First is the breakdown of codes. Let me give you an example of a coding on a CSS page.

NOTE THAT: Some codes may not exist in your CSSvcodes but can be included/added and have its values changed.

.itembox {

width: 600px;
height: 400px;

margin-top: 10px;
margin-left: 10px;

border-style:solid;
border-width: 2px;
border-color: #FFFFFF;
padding: 20px;

background-color: #000000;
background-image: url(IMAGE_URL);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;

font-color: #FFFFFF;
font-family:arial;
font-size: 6px;
font-weight: 100%;
text-align: center;

-moz-opacity: 0.80;
filter: alpha(opacity=80);
opacity: 0.80;
-khtml-opacity: 0.80;

}

* The Violet Codes are on transparencies
** Usually it doesn't have such spacing but for hrouping and breakingdown concerns, i have separated the codes.

As you can see, there are so many values that can be added in the CSS CODES. Let's get to know first the parts (layman's terms) one by one.

Here's the General CSS Format:

HTML tag { "CSS Property" : "Value" ; }

Do you get it now?

Let's make it easier.

.itembox                      => HTML tag
{           => START of the enclosure
background-color:      => CSS Property
-                                             => Css Property Notifier
=                                            => Prefix of each Values
#000000                         => Value
;                                             => END of Values
}           => END of the enclosure

To edit a part, you should first know that:

The HTML tag is constant (cannot be changed) and this represents the PART of the page;.
There are different HTML tags representing different parts:

.itembox represents the content boxes in our pages

There is no limit of how many CSS Properties you want to modify or which properties you want to include. It all depends on what you want to change.
When CSS Properties are not included, the Values revert to default.

when font-color is not on the CSS Properties written, it will automatically
revert to black (default color) or in some cases, white.

the Values may sometimes (for some CSS Properties) be a negative number.
When these codes are entered twice (doubled or multiple), the latter will be followed.

                              font-family:arial;            => First Entry - NOT FOLLOWED
                              font-size: 6px;
                              font-weight: 100%;
                              font-family:impact;         => 2nd Entry - FOLLOWED

common errors usually are caused by missing, doubled, or different wrong inputs of the following marks: { = - ; and }
Most of the CSS Properties are self explanatory.
The height, width, and border refers to the HTML tag.
The Font Properties are on the Alpha - Numeric inputs ( a b c 1 2 3 ).
It is important to back-up your codes before proceeding with any minor or major modification.
The best way to learn is to try and experiment with the codes.

Tags: css, html

Prev: Using Custom Filter
Next: Changing the Default Icons

reply share

28 CommentsChronological Reverse Threaded

tenderspirit wrote on Nov 16, '07

Well I've set up this ID so I'd have a page to play with the codes one by one (without screwing up my real page) and though I'm making a little headway, it's still like a foreign language to me, lol ~ BUT this does help tremendously ~ THANK YOU!!! :o)

jamang wrote on Nov 16, '07

END of enclosure should be } not { ??? typo error?

jnamakulit wrote on Nov 16, '07

yeah. im already feeling sleepy..

jnamakulit wrote on Nov 16, '07

tenderspirit said

it's still like a foreign language to me, lol ~ BUT this does help tremendously ~ THANK YOU!!!

you're welcome.. =D

tintalasia wrote on Nov 16, '07

Thank you soo much! I needed this ; )

jnamakulit wrote on Nov 16, '07

Makes me me feel worth it..

kylieukira wrote on Nov 16, '07

This blog is really useful. Thanks so much for taking time to post this blog on CSS. I'm learning something new again on transparency. But I hope one day you would come up with another blog to indicate exactly which itembox is for which....such as the blog, photo album, video, links etc?

It's kinda confusing because the CSS codes simply states very briefly. See below. Whenever I want to edit the CSS codes for my background or fonts color for my photo album or my music, I have no clue where to go to edit them.

.album
.album img.
.itemsubsub
.itemstamp
.itembox
.itemboxalbum

Thanks once again...!!!

mintavia wrote on Nov 16, '07

This really is quite informitive. Wow. I wish someone would make an interactive tool for html. I feel so stupid sometimes.

all this stuff Kylie mentioned....album
.album img.
.itemsubsub
.itemstamp
.itembox
.itemboxalbum

what and where are all these things located?

jedimaster10 wrote on Nov 16, '07

setting up an extra account is best to experiment with the codes. i agree with the first commenter. i have a question not related to this topic: what's the font used for your site title? (been looking for a kiddie font hehe)

jnamakulit wrote on Nov 17, '07

the font-family is fantasy,arial.
it is written as font-family:fantasy,arial;

when the first font fantasy is not available, the next font will be followed which is arial.

indianbear wrote on Nov 18, '07

You are AWESOME!!!
THANK YOU!!!

jedimaster10 wrote on Nov 18, '07

tnx

ellegance2007 wrote on Nov 18, '07

Thank you so much for taking time to do this , I have learn't so much .
Many Many Thnx

mintavia wrote on Nov 19, '07, edited on Nov 19, '07

is there a code to stretch a background image to fit the box?
how about borders...I know dotted,and solid...what other ones are there? Can I make a textured border?

Arrrrrg! I can't find where to change the font color in the item box! I have looked everywhere for it...except where it is. I have found where to do lots of other things...like the borders but still can't find the font color. can someone help me?

ulalalilulu wrote on Nov 20, '07

BRAVO for this tutorial ! Millions thanks

mintavia wrote on Nov 22, '07, edited on Nov 22, '07

Could someone come to my site and tell me where I am going wrong? I can't get the background in my item title box won't repeat, my rail is a mess and I cant find the spot where to stick the background texture for the top navigation site. I am starting to understand a little about the patterns and such but cant resolve these issues. Help! help! I have brain freeze! (I am using no base template, just using the cousomize template.)

colecciondigital wrote on Nov 23, '07

jnamakulit:
Thanks for this page...The CSS codes, es really difficult to me not only is a "strange world" to me, also because I'm speak Spanish!! (and I little bit of English)... ;)

I'm really learning!
Thanks!
Claudell

jnamakulit wrote on Nov 24, '07

thanks for the compliments..

jnamakulit wrote on Nov 26, '07

this is one of my favorite post..

ladynighttime2 wrote on Dec 8, '07

thank you for all the help you have giving to me and all the other people on here,I take all the help that you give to other people and apply it to my 2 pages my edit page witch is this one and my real page for my friends.I know most of the things to change and with all your help and the help from the other help pages i am learning more each day.There is so much to learn and with all the help pages some day i just might learn it all lol so thank you

jnamakulit wrote on Dec 8, '07

Glad to know that ladynighttime2..

womans7stride wrote on Feb 9

Thanks, great post. I'm a beginner with HTML codes, and I need all the information I can get. Although I think your site gets in depth with explaining, and makes it easier. I'm glad I joined tonight.

jnamakulit wrote on Feb 10

womans7stride said

I'm glad I joined tonight.

welcome to the group!! =)