Essential CSS and HTML Techniques for Web Development

Understanding CSS text-overflow

The text-overflow property in CSS specifies how overflowed content that is not displayed should be signaled to the user. It works only when text exceeds the container size.

Required Conditions

To use text-overflow, the following properties must be applied:

• overflow: hidden;
• white-space: nowrap;
• Fixed width

Values of text-overflow

• clip: Default behavior; cuts off text without showing any symbol.
• ellipsis: Shows “...” at the end of truncated text.

<style>
.clipText { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: clip; border: 1px solid #000; }
.ellipsisText { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }
</style>
<div class="clipText">Clipped text example.</div>
<div class="ellipsisText">Ellipsis text example.</div>

How CSS Positioning Works

CSS positioning controls the layout of HTML elements, defining how they are placed relative to their normal position or the browser window.

Types of Positioning

• static: Default positioning.
• relative: Positioned relative to its normal position.
• absolute: Positioned relative to the nearest positioned ancestor.
• fixed: Positioned relative to the browser window.

Keyboard Events in HTML

Keyboard events detect user interaction with the keyboard, commonly used in forms and real-time input validation.

• onkeydown: Triggered when a key is pressed down.
• onkeypress: Triggered when a key is pressed and a character is generated.

Creating an HTML Table

Below is an example of a 3x3 table where the second row has a height of 200px and the second row, third column contains a link to TU.

HTML Canvas Element

The <canvas> element is used to draw graphics on a web page using JavaScript. It acts as a container for lines, shapes, charts, and animations.

HTML Lists

HTML lists group related items. Nested lists allow for hierarchical structures.

Types of Lists

• Ordered List (<ol>): Numbered list.
• Unordered List (<ul>): Bulleted list.