6 Useful CSS3 Properties For CSS Beginners

Useful CSS3 Properties

6 CSS3 Properties you should have known about…

Useful CSS3 Properties

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.

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. */
<div style="cursor: pointer;">Click me!</div>    add directly to HTML using style attribute..

Visulisation Matters [ See Live Demo Of Cursors Below ]

— Hand Pointer —
— Loading Pointer —
— Help Pointer —

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., You can use “color” property to change text colour . 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,

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] ?


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.

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.

These are very basic but useful CSS3 Properties that you can use to your CSS file or you can directly use these properties with HTML .