This is the next part of the previous tutorial, so if you don't have read the previous tutorial, please see that in here :
CSS tutorial #1 : Know The most commonly Used of CSS propreties
We still talk about the most common use of CSS properties. In previous post, I just have told you 2 points. But, now is more. And, from now i won't explain by theory. Because that's boring. So i will explain by practical and a little note.
3. CSS text styling : text-align, text-transform, text-decoration.
Let's see the implementation :
<div class="selector">
This is the implementation of text-align, text-transform, and text-decoration.
</div>
<style type="text/css">
.selector {
border:1px solid black;
text-align:right;
text-transform:Uppercase;
text-decoration:underline;
}
</style>
The codes above will generate the output like this :
This is the implementation of text-align, text-transform, and text-decoration.
The values you can fill for the three properties above is :
text-align: "right", "left", "justify", and "center".
text-transform: "Uppercase", "Capitalize", "lowercase", and "none".
text-decoration: "underline", "line-through", "blink", "overline" and "none".
please try all of the values if you want to know the function of those all.
4. CSS Font Styling : Font-size, Font-family, Font-weight, Font-style
Let's see the implementation :
<div class="selector1">
This is the implementation of Font-size, Font-family, Font-weight, and font-style.
</div>
<style type="text/css">
.selector1 {
border:1px solid black;
font-size:14px;
font-family:arial;
font-weight:bold;
font-style:italic;
}
</style>
The codes above will generate the output like this :
This is the implementation of Font-size, Font-family, Font-weight, and font-style.
The values you can fill for the three properties above is :
font-size: you just can input the values by "pixel".
font-family: There are too much kind of font you can input as values. See on Microsoft office word fonts. Also, you can input the value by combine some of fonts Like this :
font-family:calibri, arial, Trebuchet MS;
The output will be generate the new font. But the first font (in the code above is "calibri") will be dominant font.
font-weight: "0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "bold", "bolder", "Lighter", and "normal".
font-style: "italic", "oblique", and "normal".
please try all of the values if you want to know the function of those all.
5. Float
Let's see the implementation :
<div class="selector2">
<div class="float1">
This is markup.
</div>
<div class="float2">
And this is other markup.
</div>
</div>
<style type="text/css">
.selector2 {
width:500px;
height:200px;
}
.float1 {
float:right;
width:240px;
height:150px;
background:black;
color:white;
}
.float2 {
float:left;
width:240px;
height:150px;
background:white;
}
</style>
The codes above will generate the output like this :
This is markup.
And this is other markup.
Note : To use "float", you must use width and height. Because, without width and height, the "float" will seen like not functioned. Also, I use the background color to make mark the "float1" and the "float2".
The values :
float : "left", "right", and "none".
6. Position
Let's see the implementation :
<div class="selector3">
<div class="relative">
This is Markup with "Position:relative;"
</div>
<div class="absolute">
This is Markup with "Position:absolute;"
</div>
<div class="fixed">
This is just demo for "Position:fixed;"
</div>
<div class="static">
This is Markup with "Position:static;"
</div>
</div>
<style type="text/css">
.selector3 {
width:500px;
height:300px;
border:1px solid black;
position:relative;
font-size:12px;
}
.relative {
width:150px;
height:100px;
position:relative;
background:blue;
}
.absolute {
width:150px;
height:100px;
position:absolute;
background:black;
top:0px;
right:0px;
}
.fixed {
width:150px;
height:100px;
position:fixed;
background:red;
bottom:0px;
left:300px;
}
.static {
width:150px;
height:100px;
position:static;
background:green;
}
</style>
The code above will generate the output like this :
This is Markup with "Position:relative;"
This is Markup with "Position:absolute;"
This is just demo for "Position:fixed;"
This is Markup with "Position:static;"
Note : As you see, CSS position have 4 option of values : "relative", "absolute", "fixed", "static". Explaining all functions of values are complicated to me. So, I give you the sample of all. just try it all and know the functions. For "position:absolute;" and "position:fixed;" you must use the properties of "bottom", "top", "right", and "left" to set the position. The values is by "pixel".
Okay. That's all for first tutorial. I hope this is helping you. Wait for the next tutorials next week.. See you ;)
~Muhammad Syakirurohman with his young spirit~
