CSS Tutorials #1 : Know The Most Commonly Used Of CSS Properties Part 2

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~

Read More

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~

Read More

I missing you, Blog!

It was about up to 2 month ago from my last sharing post. And now i will tell you something why i lost. Here, I do not share about tutorial or sharing knowledge about blog or something like that. I just share about my feeling.

Yeaaah, I missing blog. I missing to share posting to you. Also i missing to blogwalking, Interacting with you readers, editing and making template, read many article about blogsphere and everything about blog. :)

Unfortunately, maybe for some future time i can't back to blog like before :(.. I have some offline business and some online projects. Yeah, one of them is learning and creating WordPress themes to sell. So i can't posting as often as before. I am sorry, but i will come back soon and share to you again.. See you..

~Muhammad Syakirurohman

Read More

I am on producting WP premium themes

This blog maybe will not updated for some time future. I am on learning to product WP themes, so i vacum from blogging. I will come back later. See you...

Read More

Guest Blogging Tips, Tricks and Strategies

Hi.. Bloggers! It is a part 2 of article about guest blogging. Before, I was posted what's guest blogging and the benefits. Now, as i said in previous guest blogging post, i will share to you how to guest blogging, the tips and strategies.

image from www.livelaughrowe.com 

We know that guest blogging is have many benefits to our blog or our business. However, we are never get those benefits if we don't run the tips, tricks and the strategies. Guest blogging is a art. Don't ever to do that carelessly. Because on the contrary it is will make you loss. Your authority will decrease because your careless posts.

Because of that, you need to know how to guest blogging to increase your popularity. So, here i serve some tips and strategies to do that. Just follow....

TIPS

1. Submit post in famous sites
It has become a  absolute requirement that the popularity is determine your posts will get more hits or no. You must selective in choose the sites to submit ur posts. It is to get max result in your guest blogging. Before you submit your post, Ask the blog owner about the traffics. See also the number of feedbacks/comments in every posts. Also test the popularity in search engines, alexa rank and page rank of that sites.

2. Read and follow the guidelines and rules.
Before you submit your posts, you also must read the guidelines and the rules of guest blogging in the sites you selected. It is important to avoid the rejection and to know what the blog owner want. If there are no guidelines of guest blog page, just ask the blog owner via email. But remember, make sure that blog accept the guest blogging post. Because no all blog accept guest blogging.

3. Create the best contents
Don't hesitate and feel loss to create the best contents for other blog. Keep in mind, actually this is the main key of success in guest blogging. Don't ever submit your worst posts or your guest blogging will be useless. Even, you should feel lucky because your post get read by new and more audiences. Remember, people will more appreciate the author of post (you) than the publisher(blog owner). So, make sure that you introduce yourself to the reader.

4. Make The blog owner feel lucky to your posts
Well, Don't make the blog owner feel loss. How to make him feel lucky ?. Just submit the best of your post. Also optimize it. It will be perfect.

5. Be honestly
Almost every blog which accept guest blogging, make a requirement that the post you submitted must original, no plagiarism and no publish it again. This is for avoid duplicate contents for their blog. So you must obey this requirements. Don't ever to submit the same posts to 2 blogs or more. Be honestly..

6. Make a good and continuous relationship
This is important. Don't only consider the blog owner as the receiver of your post. Make him as your friend also. This will good if you want to submit your posts again later. Your post will easy to accepted because you are 'friend'.

7. Create the guest blogging Schedule
Yeah.. It is good. make guest blogging as your blogging habit. 1 guest post per month alone is good. Improve and promote your business/blog by guest blogging. The more your guest blog, The more your promotion, then the better your business/blog.

8. Submit different posts in different blogs
Don't submit your posts always to same blog. Submit your different posts to different blogs. It is for get new and more unique visitors, increase your experience and make more relationship.

9. Guest blogging in the blog which is related with your blog.
It is also important. Don't ever to guest blogging in blog which is not related with your blog. The audiences is not targeted. If your blog is about Gadget, Don't ever to guest blog in fashion blogs. It is idiot!.

TRICKS AND STRATEGIES

10. Be familiar to blog owner and negotiate
Before you submit your post, it's good if you do negotiation with the blog owner. So you must be familiar with him. Negotiate and ask the more right for your guest blogging. The example is insert more backlink in your guest post. But remember, if it is not allowed, don't enforce to do this because may be it is instead make you rejected.

11. Create useful and high quality post
It is so important and the main key of guest blogging. Show the blog owner that your post is useful and high quality. It also in order of create the best content as i talk in point 3. The more high quality of post, the bigger the opportunity to accepted and get feedbacks

12. Create the promotion content
What i mean is tell to reader about your business/blog in post body. But, make it implicit. Also, your promotion must really in topic. Don't OOT. But remember, if it is not allowed, don't enforce to do this because may be it is instead make you rejected.

13. Begin post with introduction paragraph.
Every i did a guest blog. I alwats begin my post by introduction paragraph. Like this...
" Hi.. I am syakirurohman of syakirurahman.blogspot.com. I am a guest author on this blog. Here, I will talk about bla bla bla bla. "..
Well.. like that. The result is my traffics from that blogs is more.
But remember, if it is not allowed, don't enforce to do this because may be it is instead make you rejected.

14. Prioritize individual post link than homepage link.
Usually, the blog owner allow the guest author to insert link in your post body. Surely, usually it is limited. So, prioritize the link to individual post in your blog than link to homepage. It is more potent to bring visitors to your blog because the thing they search is information. It is also better for SEO of blog.

15. Write in your style
You also must make you as yourself. Enjoy write a guest post in your style. Surely your style must interesting, good and cool. Make your reader enjoy read your post. it is important!.

16. Don't overload
Last, don't overload in doing of the tricks and strategies above. Everything overload is bad. Don't overload in promoting, insert too many links (backlinks spamming), negotiating and other.

Yeaah.. That's all from me. Do you have another tips? I waiting for your comments!..
Happy Blogging :)

Read More