CSS – CodeInDotNet https://www.codeindotnet.com C# Dot Net Programming tutorial & code examples Tue, 02 Apr 2024 06:45:04 +0000 en hourly 1 https://wordpress.org/?v=6.8.3 https://www.codeindotnet.com/wp-content/uploads/2021/04/SiteIcon.png CSS – CodeInDotNet https://www.codeindotnet.com 32 32 Remove underline from Hyperlink link – HTML, CSS https://www.codeindotnet.com/remove-underline-from-link-html-css/ https://www.codeindotnet.com/remove-underline-from-link-html-css/#respond Tue, 28 Nov 2023 05:05:21 +0000 https://www.codeindotnet.com/?p=6426

Hyperlinks allow users to navigate between different pages and websites, seamlessly. A hyperlink usually puts an underline to the text by default. You might want to remove the underline from the hyperlinked text as part of your web design.



Let’s explore different techniques to remove underlines from hyperlinks;


1. CSS:


The most common and effective way to remove underlines from hyperlinks is by using CSS. Here’s a simple CSS snippet to remove underlines


code snippet:
a {
  text-decoration: none;
}

This CSS code targets all anchor <a> elements and sets the text-decoration property to none, effectively removing the underline.




2. Inline Style:


you can use inline styles directly within the HTML code.


code snippet:
<a style="text-decoration: none;" href="https://CodeInDotNet.com">Visit CodeInDotNet.com</a>

In this example, the style attribute is added directly to the <a> element, specifying ‘text-decoration: none;‘.




3. Pseudo-Classes:


CSS pseudo-classes allow you to define styles for specific states of an element. For hyperlinks, the :hover pseudo-class is commonly used to define styles for when a user hovers over a link. To ensure the removal of underlines even on hover, you can use the following code:


code snippet:
a, a:visited, a:hover, a:active {
  text-decoration: none;
}

This CSS rule targets various states of the hyperlink, ensuring that the underline is removed consistently.



screenshot:
remove underline from link html css


]]> https://www.codeindotnet.com/remove-underline-from-link-html-css/feed/ 0 Insert tab spaces characters in text – HTML CSS https://www.codeindotnet.com/insert-tab-white-spaces-in-text-html-css-code/ Sat, 25 Mar 2023 22:35:04 +0000 https://www.codeindotnet.com/?p=2991
White Spaces can be added in three ways:
The most recommendable solutions are:

Space Using HTML Syntax

4 ways to insert Space via HTML code:

1. Single Space (&nbsp;)

&nbsp – This is a non-breaking space that generates single or regular spaces. This is also called fixed spaces that cannot be broken by word wrap.
Use single-space syntax &nbsp; multiple times in the text to make space wider.
You can also write &nbsp; as &#160.

HTML syntax: <p>This is single ‘&ensp;’ space.</p>
Output: This is a single ‘ ‘ space.

2. Double Space (&ensp;)

&ensp; – This is called ‘en’ two spaces gap, and whitespace is normally twice the spaces of regular (single) space. It denotes half point size of the current font.

HTML syntax: <p>This is double ‘&ensp;’ space.</p>
Output: This is a double ‘ ’ space.

3. Four (4x) space gap (&emsp;)

&emsp; – ’em’ four spaces gap, is equal to the point size of the current font and typically as much as four times wider than the common regular space.

HTML syntax: <p>This is four 4x ‘&emsp;’ space.</p>
Output: This is a four 4x ‘ ’ space.

4. Narrow Space (&thinsp;)

&thinsp; – this is called narrow space, which is usually more narrow than a regular space.

HTML syntax: <p>This is narrow ‘&thinsp;’ space.</p>
Output: This is a narrow ‘ ’ space.


Space Using <pre> element or tab-size property

Apply either of one approach, use text in <pre> element or set the tab-size property for <pre> element tag to render space in the text.

1. <pre> tag Approach

Simply add tabs or multiple spaces in the inner text within <pre> element tag and that will be rendered in the same format. The <pre> element simply represents preformatted text.
WordPress provides a ‘code’ block feature in its editing tool which uses the same <pre> element tag to render the pasted text like highlighting programming or script codes, and preserves the same format.
Highly recommended if you want to display multiple tabs, spaces, and linebreaks on the output page without breaking newlines & whitespace characters.

HTML syntax:
<pre>
  your            text    
      goes       here.
</pre>

Output:
  your            text    
      goes       here.


2. tab-size property Approach

The tab-size property is used to specifiy the tab’s width size in HTML code. You need to change the value of tab character through tab-size property by using style.
Note: you can also use &#9; to denote as tab space.

CSS style code:
<style> .TabSpace { tab-size: 4; } </style>
<pre> sample text </pre>
<pre> sample&#9;text </pre>

Both approaches are shown in below sample code.

HTML code:
<!DOCTYPE html>
<html>
<head>
	<style>
		#tab1 {
		  -moz-tab-size: 4;
		  tab-size: 4;
		}
		.tab2 {
		  -moz-tab-size: 12;
		  tab-size: 12;
		}
	</style>
</head>

<body>
	<h2>pre tab-size property example</h2>

<pre>Approach 1: without            tabsize     property
    displays     as         it is        .    
</pre>
	    <pre id="tab1">Approach 2 (tab-size:4):  This	is	pre	tabsize&#9;example.</pre>
	    <pre class="tab2">Approach 2 (tab-size:12):  pre	tab	size&#9;sample.</pre>

</body>
</html>
Output:
space-using-tab-size-property-html-css



Space Using CSS styles

Use margin or padding CSS style properties if white space is required before or after span, paragraph, div or any element tag. Best, reliable and recommended solution in such scenarios.

1. Margin-left space


HTML code: sample of <span style=”margin-left:15px”>left Margin space.</span>
Output: sample of left Margin space.

2. Padding-left space


HTML code: sample of <span style=”padding-left:15px”>left Padding space.</span>
Output: sample of left Padding space.




reference: wikipedia.org/wiki/Whitespace

]]>