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.
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
<div>This is implementation of CSS Width, Height, Border, Margin and Padding</div>
</div>
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 :
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~
HACKED BY SudoX — HACK A NICE DAY.
with his young spirit~
HACKED BY SudoX — HACK A NICE DAY.
