CSS Tutorial

The <div> Tag

The <div> tag is used to specify a section within an HTML document.
Anything from text to images to videos can be placed within a <div> tag.
Divs are similar to paragraphs but they are easier to use, customizable with CSS, and load faster than tables.

Syntax Of <div> Tag

Syntax


<div>
<!- - other HTML tags and data - - >
</div>

The <span> Tag

The element has very similar properties to the

element, in that it changes the style of the text it encloses.
But it does not has any style of it’s own, rather we have to apply styles to it

Syntax


some text <span>some text</span> some text

The CSS Box Model

Every element that can be displayed on a web page is comprised of one or more rectangular boxes.
CSS box model typically describes how these rectangular boxes are laid out on a web page.
These boxes can have different properties and can interact with each other in different ways, but every box has 4 very important elements :
⚪ a content area
This can be text, images or anything else.
⚪ padding
The space between the contents and the border
⚪ border
The frame in the defined thickness.
⚪ margin
The space between the frame and the next item.

Setting Width And Height

Usually when we set the width and height of an element using the CSS width and height properties, in reality we are only setting the width and height of the content area of that element.
This width and height does not include paddings, borders, or margins.

Padding

The CSS padding properties allow us to set the spacing between the content of an element and its border .
It can be specified using following properties:
padding-top
padding-right
padding-bottom
padding-left
padding

Border

The CSS border properties allow us to define the border area of an element's box.
Borders appear directly between the margin and padding of an element.
The border can be a style like, solid line, dotted line, double line, etc.

Following are the CSS border properties that can be applied on an element:
⚪ border-style
⚪ border-width
⚪ border-color
⚪ border

Handling Overflow

There may be a situation when the content of an element might be larger than the dimensions of the box itself.
In such cases CSS provides a property called overflow which helps us to specify whether to clip content, render scroll bars or display overflow content of a block-level element.

Value	Meaning
visible	The default value. Content is not clipped; it will be rendered outside the element's box, and may thus overlap other content.
hidden	Content that overflows the element's box is clipped and the rest of the content will be invisible
scroll	The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.
auto	If content overflows the element's box it will automatically provides the scrollbars to see the rest of the content, otherwise scrollbar will not appear.

The float Property

CSS float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it.
This property can be used to place an image or an element inside its container and other elements will wrap around it.
For eg. : Images in newspaper are placed at a certain position with rest of the content wrapped around it.

Previous tutorial

Next tutorial