CSS Guide for Newbie Blogger Part – 2

We are back with part-2 of previous css guide post.
If you haven’t read that post then first read it right now link: CSS Guide for Newbie Blogger Part – 1.
In this post I will tell about more css.
There are many simple attribute but some are complex.
So keep concentrate in this.

1. Float

# This property will float means align your content as specified in the css.
# Like in this example, we have given float: right;

Lorem ipsum dolar sit amet

# So this is right side floated.
# If you give this attribute and also give position attribute then the position attribute will not work.
# This will help you when you are going to build something responsive.

2. Text-decoration
# It’ll decorate your text as per value.
# Example, we’ve given text-decoration: underline;

Lorem ipsum dolar sit amet

# There are many values available for this property.

text-decoration: overline;   //to give line above the code.
text-decoration: none;      //for not decorate.
text-decoration: underline;    //for give line below the code.
text-decoration: line-through;      //for give line between the code means something to show that it’s wrong.
text-decoration: blink;     //to blink the text.Blink will only work in Mozilla Firefox

# So this are the values for it.

3. Border-radius

# This will give circled or applied border type radius.
# If you use it then you have to specifies this three times with cross-browser support.
# If I want to give 10px then I have to give…

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

# Example,

Lorem ipsum dolor sit amet

# If you want to give this property then you must have border property applied.
# There are many options to give border-radius different in each side.
# Then you have to just write 4 times that border-radius: 10px 20px 30px 40px;
# The first (10px) will be at top side, 2nd (20px) will be at right side, 3rd (30px) will be at bottom side and last (40px) will be at left side.

4. Opacity

# It will help to show your content how many percent?
# Means it depends on the value given.
# If I give 0.5 then it’ll display content opacity half means color etc. not the percentage of whole content.
# Example,

Lorem Dolor Sit Amet

# So this is also a good property for css lovers.
# You can give up to 1. If you give greater then it then it’ll detect it as 1.

5. Clear

# This property will clear the side means if any floating element is available then it’ll come in next line.
# Example,

Check out this Pen!

# In this output, you shoul understood that what is clear: both;.
# You can also click on Html and Css button on output to see the code I’ve given.
# You can give right, left, none, inherit instead of both.
# Fit in mind that inherit can given at most of css property. This will take the value of this property from the parent tag if applied.

So these are the properties in the part-2 of css guide. Any queries or questions?
Then just comment or Contact us.

Share This Now:

Add a Comment

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