CSS strikethrough is one of the basic and fundamental text styles that can be applied to HTML text using cascading style sheets (CSS). It is a great way to depict deleted or obsolete information in your web pages, while still keeping it visible. Strikethrough styling is often used in e-commerce websites, where product prices are displayed with the original and discounted price both visible.
In today's tutorial, we will be going through the basics of CSS Strikethrough and demonstrate how to apply it to your HTML text using code examples:
Basics of CSS Strikethrough
The CSS Strikethrough is a text-decorating style that strikes or draws a line through the text, without making it invisible. It is widely used to depict obsolete or deleted information.
The syntax of CSS Strikethrough is as follows:
text-decoration: line-through;
This code will add a line through the text. Let's break down the syntax of the above code:
-
text-decoration: this is a CSS property that defines the decoration of the text, such as underline, overline, and strikethrough. -
line-through: this is a value of thetext-decorationproperty that adds a strike line to the text.
Applying CSS Strikethrough to HTML Text
Now, let's apply CSS Strikethrough to some HTML text using code examples.
Example 1: Applying Strikethrough to Paragraph Text
In this example, we will apply CSS Strikethrough to a paragraph text.
<p> This text has a line through it </p>
We can add the CSS Strikethrough to the paragraph text as follows:
p {
text-decoration: line-through;
}
Example 2: Applying Strikethrough to a Anchor Text
In this example, we will apply CSS Strikethrough to an anchor text.
<a href="#">This text has a line through it</a>
We can add the CSS Strikethrough to the anchor text as follows:
a {
text-decoration: line-through;
}
Example 3: Applying Strikethrough to Specific Text within HTML Tag
In this example, we will apply CSS Strikethrough to specific text within an HTML tag.
<h2> Hello World! This Word has a line through it </h2>
We can add the CSS Strikethrough to the specific text as follows:
h2 span {
text-decoration: line-through;
}
<h2> Hello <span>World!</span> This Word has a line through it </h2>
Example 4: Adding Strikethrough to a Table Cell
In this example, we will add CSS Strikethrough to the table cell.
<table>
<tr>
<td>This text has a line through it</td>
<td> This text is normal</td>
</tr>
</table>
We can add the CSS Strikethrough to the table cell as follows:
td:first-child {
text-decoration: line-through;
}
Conclusion
CSS Strikethrough is a crucial text decoration style that is used to depict obsolete or deleted information on your web pages while keeping it visible. It is as simple as using the text-decoration property in CSS and setting it to the value line-through. This style can be applied to various HTML tags including paragraphs, anchor tags, and tables, etc.
In this tutorial, we have demonstrated how to apply CSS Strikethrough using various code examples. It's worth noting that CSS Strikethrough is just one of the text-decorating styles among many others such as underline, overline, and blink, etc. Now, it's your turn to experiment with CSS Strikethrough and apply it to various HTML tags. Happy coding!
I'd be happy to provide more information on the previous topics.
HTML Text Styling
HTML text styling involves using various HTML tags to modify the appearance of text on a webpage. Some of the common text styling techniques include:
-
Bold: To apply bold text on a webpage, the
<strong>tag is used. For example,<strong>This text is bold</strong>. Alternatively, you can use the<b>tag,<b>This text is bold</b>. -
Italic: To apply italic text on a webpage, the
<em>tag is used. For example,<em>This text is italic</em>. Alternatively, you can use the<i>tag,<i>This text is italic</i>. -
Underline: To apply an underline to a text, the
<u>tag is used. For example,<u>This text is underlined</u>. -
Strikethrough: To apply strikethrough to a text, we use the
<del>tag. For example,<del>This text has a strikethrough</del>. -
Subscript: Subscript text is used to lower text below the baseline. To apply subscript on an HTML text, we use the
<sub>tag. For example,<sub>Subscript text</sub>. -
Superscript: Superscript text is used to raise text above the baseline. To apply superscript on an HTML text, we use the
<sup>tag. For example,<sup>Superscript text</sup>.
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is used to define styles for web pages, including the layout, colors, font, and other design elements.
CSS can be used to modify the text style on a webpage. Some of the CSS text styling techniques include:
-
Font-size: This property is used to set the size of the font. For example,
font-size: 16px;. -
Font-family: This property is used to set the font-family or the type of font used. For example,
font-family: Arial, Sans-serif;. -
Font-weight: This property is used to set the thickness or weight of the font. For example,
font-weight: bold;. -
Text-decoration: This property is used to add text-decoration to text. For example,
text-decoration: underline;. -
Text-transform: This property is used to transform text, such as making it uppercase or lowercase. For example,
text-transform: uppercase;. -
Text-align: This property is used to align text within an element. For example,
text-align: center;.
HTML Tables
HTML tables are used to present data in a structured way. Tables are made up of rows and columns and are arranged in cells. The entire table is enclosed within the <table> tag. Each row is enclosed within the <tr> tag, and each cell is enclosed within the <td> tag.
Tables can be styled using CSS. There are several CSS properties that can be used to style tables, including:
-
border: This property is used to set the border around the table. For example,
border: 1px solid black;. -
padding: This property is used to set the padding around the content of the table cell. For example,
padding: 10px;. -
background-color: This property is used to set the background color of the table or cells. For example,
background-color: #f1f1f1;. -
text-align: This property is used to align the text within a cell. For example,
text-align: center;. -
border-collapse: This property is used to collapse borders between adjacent cells in a table. For example,
border-collapse: collapse;.
I hope this additional information is helpful. Let me know if there's anything else you'd like me to cover in more detail!
Popular questions
Sure, here are five questions with answers regarding CSS strikethrough HTML text:
- What is CSS Strikethrough?
CSS Strikethrough is a CSS text-decorating style that draws a line through the text, without making it invisible. It is used to depict deleted or obsolete information on a webpage, while still keeping it visible.
- What is the syntax of CSS Strikethrough?
The syntax of CSS Strikethrough is as follows:
text-decoration: line-through;
- What HTML tags can CSS Strikethrough be applied to?
CSS Strikethrough can be applied to various HTML tags, including paragraphs, anchor tags, heading tags, and table cells (td).
- Can CSS Strikethrough be applied to specific text within an HTML tag?
Yes, CSS Strikethrough can be applied to specific text within an HTML tag using the <span> tag.
For example:
<h1>This text has a <span style="text-decoration: line-through;">strikethrough</span></h1>
- What are some other CSS text-decoration styles?
Some other CSS text-decoration styles include underline, overline, blink, and none. The text-decoration property can be set to any of these values to apply the respective style.
For example:
text-decoration: underline;
text-decoration: overline;
text-decoration: blink;
text-decoration: none;
I hope these answers help you gain a better understanding of CSS strikethrough HTML text.
Tag
Strikethrough
