Author: saqibkhan

Text Alignment Text inside the block-level elements can aligned by setting the text-align properly. Example See tutorial on CSS Text to learn more about text formatting. Center Alignment Using the margin Property Center alignment of a block-level element is one of the most important implications of the CSS margin property. For example, the <div> container can be aligned horizontally center by setting the left and right margins…

Floating Elements with CSS You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side. The float property may have one of the three values: Value Description left The…

Stacking Elements in Layers Using z-index Property Usually HTML pages are considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, boxes can be stacked along the z-axis as well i.e. one on top of the other by using the CSS z-index property.…

Controlling the Visibility of Elements You can use the visibility property to control whether an element is visible or not. This property can take one of the following values listed in the table below: Value Description visible Default value. The box and its contents are visible. hidden The box and its content are invisible, but still affect…

CSS Display Property The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline. Changing the Default Display Value Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element…

CSS Visual Formatting Model The CSS visual formatting model is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is depends on the following factors: Note: The document…

Styling Tables with CSS Tables are typically used to display tabular data, such as financial reports. But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables. CSS provides several properties that allow you to control the layout and presentation…

Types of HTML Lists There are three different types of list in HTML: See the tutorial on HTML lists to learn more about the lists and how to create them. Styling Lists with CSS CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow…

Styling Links with CSS Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the site. Therefore styling the links properly is an important aspect of building a user-friendly website. See the tutorial on HTML links to learn more about links and how to create them. A link has four different…

Formatting Text with CSS CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively. The commonly used text properties are: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties give you precise control over the visual appearance of the characters, words, spaces, and so on. Let’s see how to…