Text Formatting and Styling

Applying Text Formatting With Tags Such As Strong , Em, U, And S )

1. (<strong>) Tag:

The <strong> tag is used to highlight text as important or strongly emphasized. It typically renders as bold text by default, but its semantic meaning is to convey importance rather than just bold styling.

Example:

In this example, the word "important" is highlighted as important within the paragraph.

2. ' <em>' Tag:

The <em> tag is used to italicize text, indicating emphasis. Italicized text can signify stress, importance, or a change in tone.

Example:

Here, the word "very" is italicized for emphasis within the sentence.

3.' <u>' Tag:

The <u> tag is used to underline text. It's commonly used to indicate hyperlinks, but it can also be used for other instances where underlining is necessary.

Example:

The word "underlined" in the paragraph is visually underlined.

4. '<s>' Tag:

The <s> tag is used to create a strikethrough effect on text, indicating that the text has been deleted or is no longer valid.

Example:

The word "strikethrough" is displayed with a line through it, indicating that it's no longer valid or relevant.

Importance and Usage:

• Semantic Meaning: These tags carry semantic meaning, helping assistive technologies and search engines understand the structure and emphasis of text.
• Accessibility: Proper use of these tags improves accessibility for users who rely on screen readers or have visual impairments.
• Clarity: Text formatting with these tags enhances readability and clarity, making important information stand out.
• Styling Flexibility: While these tags have default styling (like bold, italic, underline, and strikethrough), their appearance can be customized using CSS for design purposes.

Combination Example:

This sentence demonstrates the combined use of  <strong>, <em>, <u>, and <s> tags for different types of text formatting within a paragraph.

 

Practice Excercise Practice now

Using Inline And Block-level Elements For Text And Content Organization

Inline Elements:

(<span>) Element:

The <span> element is an inline container used for styling specific parts of text or content.

Example:
 

Explanation: In this example, the word "highlighted" is styled using the <span> element to change its color to red.

(<a>) Element (Hyperlink):

The <a> element is used to create hyperlinks to other web pages or resources.

Example:

Explanation: The <a> element creates a hyperlink to the specified URL, making the word "website" clickable.

(<strong> and <em>) Elements:

The <strong> and <em> elements are used for semantic text emphasis.

Example:

Explanation: The <strong> element makes the word "Important" bold, while the <em> element italicizes the word "urgent" for emphasis.

(<img>) Element (Inline Image):

The <img> element is used to insert images into web pages.

Example:

Explanation: The <img> element displays the image "logo.png" inline within the paragraph.

Block-Level Elements:

<div> Element:

The <div> element is a generic block-level container used for grouping and styling content.

Example:

Explanation: The <div> element creates a block-level container with a background color and padding, containing a heading and a paragraph.

(<p>) Element (Paragraph):

The <p> element is used to define paragraphs of text.

Example:

Explanation: Each <p> element starts a new block-level paragraph.

(<h1> to <h6> ) Elements (Headings):

The <h1> to <h6> elements are used to create headings of varying levels.

Example:

Explanation: Each heading element represents a different level of importance and creates block-level headings.

(<ul> and <ol>) Elements (Lists):
The <ul> (unordered list) and <ol> (ordered list) elements create lists of items.
Example:

Explanation: The <ul> element creates a bulleted list, and each <li> item is a block-level list item.

• Combining Inline and Block-Level Elements:
• Mixing Inline and Block-Level Elements:

Example:

Explanation: The <div> element contains both a block-level <p> paragraph and an inline <a> hyperlink.

Nested Elements:

Example:

Explanation: The <span> element is nested inside a block-level <p> paragraph within a <div> container.

• Importance of Using Inline and Block-Level Elements:
• Structure: Block-level elements help organize content into sections, while inline elements allow fine-grained styling within blocks.
• Semantic Meaning: Proper use of block-level and inline elements conveys the structure and meaning of content to browsers and assistive technologies.
• Styling Flexibility: Inline elements are useful for applying specific styles to individual parts of text, while block-level elements structure the overall layout of a page.

Practice Excercise Practice now

Introduction To CSS For Styling HTML Elements

Understanding CSS:

CSS (Cascading Style Sheets) is a style sheet language used to define the presentation and layout of HTML documents. It allows web developers to control the appearance of web pages, including colors, fonts, spacing, and positioning of elements. CSS works by selecting HTML elements and applying styles to them.

Basic Structure of CSS:

CSS rules consist of selectors and declarations:

• Selectors: Selectors target HTML elements to apply styles. They can target specific elements, classes, IDs, attributes, or even combinations of these.
• Declarations: Declarations define the styles to be applied, such as color, font size, margin, padding, etc. They are enclosed within curly braces {} and separated by semicolons ;.

Linking CSS to HTML:

CSS can be linked to HTML documents in three main ways:

External Style Sheet:

This method links an external CSS file (styles.css) to the HTML document.

Internal Style Sheet:

This method includes CSS code directly within the <style> tags in the HTML document.

Inline Styles:
 

Inline styles are applied directly to HTML elements using the style attribute.

CSS Selectors

Element Selector:

Targets all <p> elements and sets their text color to red.

Class Selector:

Targets elements with class="highlight" and sets their background color to yellow.

ID Selector:

Targets the element with id="header" and sets its font size to 24 pixels.

Attribute Selector:

Targets <input> elements with type="text" and applies a black border.

CSS Properties and Values:
 

Sets the text color of <h1> elements to blue.

Font Property:

Sets the default font family for the entire document.

Background Property:  

Applies a background image to elements with class .jumbotron and covers the entire element.

Margin and Padding:

Sets margin and padding values for elements with class .box.

Positioning:

Fixes the position of .sidebar to the top left corner and sets its width to 200 pixels.

CSS Box Model:

The CSS box model describes the space occupied by an element, including content, padding, border, and margin.

• Content: Actual content area where text or images are displayed.
• Padding: Space between the content and the border.
• Border: Boundary around the padding.
• Margin: Space outside the border, separating elements.

Example:

Let's consider a simple example to illustrate CSS styling:

HTML:
 


css
In this example:

• The <h1> element's text color is set to blue.
• Paragraphs with class .intro have a font size of 18 pixels.
• The <div> with ID container has a white background, padding, border, and margin.

Conclusion:

CSS is a powerful tool for styling HTML elements, offering control over appearance, layout, and presentation. Understanding CSS selectors, properties, and the box model is essential for creating visually appealing and well-structured web pages. By linking CSS to HTML and applying styles selectively, developers can create engaging and responsive user interfaces.

 

Practice Excercise Practice now