CSS tutorials #1 : Know the most commonly used of CSS properties part 1

Hello, blogger long time no see :D.. Here i online again and will share something to you. Now and then i will make posts series about CSS tutorial.And, I promise to never stop posting on the way :D, I will post every week(on saturday or sunday) for this series. Okay, Let’s begin..

First you must read this article to know basic of CSS :

KNOW THE CSS CODE FOR YOUR BLOGS

Image from cscie12.dce.harvard.edu
If you have read the post above, Now i will assume you that you have know how to use CSS in the website or blog. Now we will talk about CSS properties that most commonly used by people.

1. Background and color

Well, from the name i sure that you have know what is background and what is color. Okay, just go ahead to implementation.
<div class=”selector1″>This is implementation of CSS background and color</div>
<style type=”text/css”>
.selector1 {
background:black;
color:green;
}
</style>
The code above will be generate the output like this :

This is implementation of css background and color

The values
Above, i use value of “black” for background and “green” for color. if so, your option is limited because you can only input the value by the color name you know. Because of that, you should input the value by hexadecimal codes or rgb(red,green,blue). By this kind of values, you option is very much. The sample of use is :

*hexadecimal
background:#000000;          -#000000 is hexadecimal codes for black-
color:#00ff00;                      -#00ff00 is hexadecimal codes for green-

*RGB
background:rgb(0,0,0);         -rgb(0,0,0) is hexadecimal codes for black-
background:rgb(0,255,0);     -rgb(0,255,0) is hexadecimal codes for green-

Rgb is color setting by combine 3 of basic color (red, green and blue). The smaller value then the color will be  darker. The bigger value then the color will be brighter. Each of basic color have value from 0 to 255. Essentially, Hexadecimal and RGB is related. They are have same pattern. See, i will compare them by sample of “green”.

#00ff00
rgb(0,255,0)

If we compare them we will take a conclusion that :
# is other form of rgb,
00 is other form of 0,
ff is other form of 255,
00 is other form of 0

yeah, like that. If you want learn more about hexadecimal and RGB just see it :

COLOR PICKER TOOL

2. Width, Height, Border, Margin and Padding

Surely, for width, height and border you have know what the means they are. But, for margin and padding, i will tell you what they are, because maybe they are different with what you think. Margin is an invisible line outside the selector area that separate it with other areas. The size of margin determine the range with other selector areas. While, Padding is an invisible line inside the selector area that give range between border of area and the contents therein. This is how to use them:
<div class=”selector2″>
<div>This is implementation of CSS Width, Height, Border, Margin and Padding</div>
</div>
<style type=”text/css”>
.selector2 {
width:200px;
height:100px;
overflow:hidden;
border:1px #000 solid ;
padding:5px;
margin:5px;
}
.selector2 div {
background:#000;
color:#fff;
height:100px;
}
</style>

The code above will be generate the output like this :

This is implementation of CSS Width, Height, Border, Margin and Padding.
Which is border, padding, and margin?
-border is the black line that surrounding the area.
-Padding is the no color space between border and the sentences “This is implementation of CSS Width, Height, Border, Margin and Padding”.
-Margin is invisible outside the border. Margin will only be known if there are other areas that adjacent.

Image from www.templatemonster.com

The values
-Width and height : you can input value by “pixel” and “percent” (Like this :width:100%;). If you use percent, the real value is the pixel value of the parent element. The example is : if you add “width” or “height” property in to selector “.selector2 div” with value “90%”, Then the real value is “90%” of “200px” (width/height of “.selector2”). Also, you can input the value by “auto” if you want to automatic.

-Border: “1px” is the size of border. “#000” is the color (Also you can use hexadecimal codes and rgb). And “solid” is the type of border. There are various type of border you can use. This is the list :
   -medium
   -thin
   -thick
   -dashed
   -dotted
   -double
   -groove
   -inset
   -outset
   -ridge
   -solid

if you want just make 1 side of border, like right side, you can use this code “border-right:1px #000 solid;”

-Margin and padding : 5px is size of margin/padding. If you want to use margin/padding only for 1 side, like right side, you can use this code “margin-right:5px;” or “margin:0px 5px 0px 0px;” (note: “margin:’upmargin’ ‘rightmargin’ ‘bottommargin’ ‘leftmargin’; “). Special for margin, you can make the area be located at center position by code “margin:auto;” or “margin:0 auto” or “margin:0 auto 0 auto;”.. But it is not working for padding.

yeaah, for today i just share until here. Just wait the part 2 next week. See you :). Hope this stuff is very helping you.

~Muhammad Syakirurohman with his young spirit~

Leave a Reply

Your email address will not be published. Required fields are marked *