1. @import@import property is very useful to call external css in your style sheet, 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 snippet below!
@import url(http://linktoastylesheetorwebfont);
/* The more css goes here...*/
/* 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. */
}
{
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...
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-FamilyHave you heard about this, this is property for integrating webfonts in your css stylesheet, let's get brief knowledge about its syntax,
.class
{
font-family:'Font Name',Category;
}
{
font-family:'Font Name',Category;
}
4. OverflowYou've a box with its width 200px but if text is constant (without line breaks
) then text will rander outside the box, For defining what will happen to overflowed items (eg. image, text, etc...) "OVERFLOW" property is useful.
How Overflow is used [Syntax] ?
.class
{
width:200px;
overflow:auto;
}
{
width:200px;
overflow:auto;
}
Other Overflow Values
auto - manage automatic with scroll bar.
hidden - overflowed content will not shown it will hide itself.
visible - overflowed content will be visible but without scrolling.
scroll - scrollbar is shown at overflow, it turns active.
hidden - overflowed content will not shown it will hide itself.
visible - overflowed content will be visible but without scrolling.
scroll - scrollbar is shown at overflow, it turns active.
5. floatFloat property is 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-alignText align property sets the alignment for text inside given class elements.
Syntax
.class
{
text-align:center; /* the text will be on center */
}
{
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.
left - Text will be on left.
right - Text will be on right.
justify - Text will be justified.
Also Read