6 Useful CSS3 Properties For CSS Beginners

6 CSS3 Properties you should have known about…

1. @import

@import property is very useful to call external CSS in your stylesheet, When your stylesheet contains fonts or you can link external stylesheet, then you can try @import instead of using link tag. You can link stylesheet and fonts by using this property as shown in the snippet below!

@import url(http://linktoastylesheetorwebfont);
/* The more css goes here…*/

2. cursor

“cursor” is a property for giving style to cursor (default,pointer,help,wait,etc…), This property can be given inside stylesheets. you can give property as shown below.

h1
{
cursor:default; /* all h1 elements will have default cursor instead it has text. */
}
p
{
cursor:pointer; /* all p(paragraph) elements will have hand pointer cursor instead it has text in it. */
}
em
{
cursor:wait; /* all em elements will have loading cursor. */
}
a
{
cursor:help; /* all a(link) elements will have help arrow cursor. */
}

Visulisation Matters [ See Live Demo Of Cursors Below ]

Default Cursor [Hover Here]
Pointer (Hand)
Help
Loading… Wait…

So you can use this property to change cursor in every element’s style. It might useful while using a link named Help for help cursor…,
Or loading text with wait cursor., Let’s check out another property.

3. Font-Family

Have you heard about this, this is property for integrating web fonts in your CSS stylesheet, let’s get brief knowledge about its syntax,

.class
{
font-family:’Font Name’,Category;
}

 

4. Overflow

You have a box with its width 200px but if text is constant (without line breaks
) then the text will render outside the box, For defining what will happen to overflowed items (eg. image, text, etc…) “OVERFLOW” property is useful.

How Is Overflow used [Syntax] ?

.class
{
width:200px;
overflow:auto;
}

Other Overflow Values

auto – manage automatic with scrollbar.
hidden – overflowed content will not be shown it will hide.
visible – overflowed content will be visible but without scrolling.
scroll – scrollbar is shown in overflow, it turns active.

5. float

Float property is the useful property to set element where they float either left or right.
float:left or float:right is right syntax for giving value to element.

6. text-align

Text align property sets the alignment for text inside given class elements.
Syntax

.class
{
text-align:center; /* the text will be on center */
}

Another possible values of text align

center – Text will aligned center.
left – Text will be on left.
right – Text will be on right.
justify – Text will be justified.

Also Read

Share This Now:

5 Comments

Add a Comment

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