How is the float property implemented in css?

The css float property allows an element to be pushed to the left or right which allows other elements to wrap around the floated element. The elements specified before the float element will not be effected. Only the elements specified after the floated elements will float around the element.
For ex.
img { float:right;}
This implies that if an image is floated towards the right then the text that follows its would flow around it on the left. The user can also float multiple elements together. The elements would float if there is space available for them to float. Any float element will cause the other elements following it to float around it, to avoid this the user can make use of the clear property. The clear property is used to specify the sides of an element on which the floating of elements is not allowed.
For ex.
.line {clear:both;}
This would prevent the elements from floating around after the float element.

Explain the concept of the box model in css

CSS uses the concept of a box model which implies that every HTML element is a box. This term is used when we are talking about design and layout.
The CSS box model is actually a box that wraps an HTML element. A box comprises of the following components:
- margins : used to clear an area around a border.
- border : border goes around the padding and the content.
- padding : used to clear the area around the content.
- content : This contains the actual content of the box that is the text and the images.
It is important to note that when a user sets the height and width of an element, they are doing so only for the content area. To know the fill size of the element the user must also specify the other layers ie. the padding border and margins.
For ex.
p
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
The total width of an element is calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element is calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

What are the different provision provided in css to define the dimension of an element?

In css the user can choose from multiple dimension properties to style an element. The list of css dimension properties are:
- height: This property allows the user to specify the height of a specific element.
- max-height: This allows the user to set the maximum height of an element.
- max-width: This specifies the maximum width of an element.
- min-height: It allows the user to specify the minimum height of an element.
- min-width: used to set the minimum width of an element.
- width: this property is used to set the width of an element.
For ex.
img.big {height:100px} <!-- specifies the height of an element-->
img.big {max-height:100px} <!-- specifies the maximum height of an element-->

How can HTML elements be styled having specific attributes?

Css allows the user to style the html elements that have specific attributes. It does not only rely on class and id.
For ex.
[title]
{
color:red;
}
This will simply color any attribute containing title.
Css also allows the user to specify an attribute with a particular value.
For ex.
[title=test]
{
color:red;
}
This will simply color the text test that appears anywhere in the title attribute.
Also the user can specify an attribute with multiple values.
For ex. [title~=test] {color:blue;}

With the help of examples explain grouping and nesting of css selectors

Grouping selectors: In css the designer can reduce the code by simply groping together selectors with the same property values.
For ex : h1 {color: green;}
h2 {color: green;}
p {color: green;}
As you can see from the above code the all the elements have the same property. To avoid rewriting the same code again and again the user can simply group the selectors by separating each selector with a comma.
Grouped selectors : h1,h2,p {color: green;}
Nesting selectors: This enables the user to specify a style for a selector within a selector.
For ex.
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
In the above example separate properties are assigned for p and the .marked class. But the last value that is .marked p implies that the property will apply to p elements with class defined as .marked.

How are shorthand properties are used in css? Give examples.

One of the primary advantages of css is that it greatly reduces page load times. Writing multiple properties and their values in a single line of css code is known as css shorthand technique. One thing to be kept in mind is that while using the css shorthand technique is that the order of specifying the values of an attribute must be maintained. In case the user wants to keep a value as default it is not needed to be mentioned.
For ex.
margin-top: 5em;
margin-bottom: 3em;
margin-right: 1em;
margin-left: 1em
Becomes:
margin: 5em 1em 3em (top, right and left, bottom);

border-width:5px;
border-style:solid;
border-color:#fff;
Becomes:
border:5px solid #fff;