CSS Links, Text Decoration, and Link Buttons: A Complete Guide

Contents

CSS Links, Text Decoration, and Link Buttons

Learn how to use CSS to style links, apply text decoration, and create link buttons. Explore examples and best practices for enhancing the visual appearance of links on your web pages.

CSS links are HTML elements used to include external CSS (Cascading Style Sheets) files in an HTML document.

CSS files contain style rules that define the visual appearance and layout of HTML elements on a web page. Including CSS files using links allows you to separate the styles from the HTML markup, making it easier to maintain and update the styles across multiple web pages.

To include a CSS file in an HTML document, you can use the <link> tag within the <head> section of the HTML document. Here’s the basic syntax for adding a CSS link:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="path/to/your-css-file.css">
</head>
<body>
  <!-- Your HTML content goes here -->
</body>
</html>

Explanation:

Let’s break down the parts of the <link> tag:

The rel attribute specifies the relationship between the HTML document and the linked resource.

For CSS files, you should set the rel attribute to “stylesheet”.

The type attribute specifies the MIME type of the linked resource.

For CSS files, you should set the type attribute to “text/css”.

The href attribute specifies the path to the CSS file. You can use an absolute URL or a relative path to the file.

By including the CSS link in the <head> section, the browser will load the linked CSS file and apply the specified styles to the HTML elements within the document.

It’s common practice to place the CSS link before any other content to ensure the styles are loaded before rendering the page.

You can include multiple CSS links in your HTML document to link to different CSS files or external libraries, allowing you to organize and reuse your styles across multiple pages or components.

How to style Links in CSS ?

Styling Links:

Here’s a complete HTML code example that demonstrates styling links using CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for styling links */
    a {
      color: blue;
      text-decoration: none;
    }
    
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Styling Links Example</h1>
  
  <p>This is a paragraph with a <a href="https://www.example.com">link</a>.</p>
  
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Explanation:

1-In this example, we have a CSS section within the <head> section of the HTML document.

2-Inside the CSS section, we define two sets of rules for styling links:

3-The a selector targets all <a> (anchor) elements and sets the color to blue and removes the underline (text-decoration: none).

4-The a:hover selector targets the <a> elements when the mouse hovers over them.

It changes the color to red and adds an underline (text-decoration: underline).

5-Inside the <body> section, we have a heading (<h1>) and a paragraph (<p>) with a link. The link is defined using the <a> element with an href attribute specifying the URL.

6-When you hover over the link, it will change the color to red and display an underline, according to the CSS rules.

7-Additionally, there is an unordered list (<ul>) with three list items (<li>), each containing a link.

8-These links can also be styled using the same CSS rules defined earlier.

Try to customize the CSS rules according to your desired link styling preferences.

What are the four links States ?

The four links states are: complete code in html

Here’s the complete HTML code that demonstrates the four link states:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for styling links */
    a:link {
      color: blue;
      text-decoration: none;
    }
    
    a:visited {
      color: purple;
    }
    
    a:hover {
      color: red;
      text-decoration: underline;
    }
    
    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Link States Example</h1>
  
  <p><a href="https://www.example.com">Default link</a></p>
  
  <p><a href="https://www.example.com">Visited link</a></p>
  
  <p><a href="https://www.example.com">Hovered link</a></p>
  
  <p><a href="https://www.example.com">Active link</a></p>
</body>
</html>

Explanation:

1-In this example, we have four CSS link states defined using pseudo-classes:

a:link: Targets the default state of a link (not visited, not hovered, not active).
a:visited: Targets the state of a link that has been visited.
a:hover: Targets the state of a link when the mouse hovers over it.
a:active: Targets the state of a link when it is being activated (e.g., clicked).

Each state is styled differently using the CSS rules:

For the a:link state, the link color is set to blue and the text-decoration is set to none.
For the a:visited state, the link color is set to purple.
For the a:hover state, the link color is set to red and the text-decoration is set to underline.
For the a:active state, the link color is set to green.

2-Inside the <body> section, there are four paragraphs (<p>) each containing a link (<a>) with the href attribute set to “https://www.example.com”.

You can modify the URLs and the link texts as needed.

By applying these CSS styles to the link states, you can control the appearance of the links based on their current state.

How to apply different text-decoration styles for links in CSS?

Text Decoration and links

In CSS, the text-decoration property is used to control the decoration of text, including links.

It allows you to add or remove decorations such as underlines, overlines, line-through, and more.

When styling links, the text-decoration property is commonly used to change the appearance of link text.

Here’s an example that demonstrates different text-decoration styles for links:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for styling links */
    a {
      text-decoration: none;
      color: blue;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    a.dashed {
      text-decoration: underline dashed;
    }
    
    a.overline {
      text-decoration: overline;
    }
    
    a.line-through {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h1>Text Decoration for Links</h1>
  
  <p><a href="https://www.example.com">Default link</a></p>
  
  <p><a href="https://www.example.com">Underlined link on hover</a></p>
  
  <p><a class="dashed" href="https://www.example.com">Dashed underline on hover</a></p>
  
  <p><a class="overline" href="https://www.example.com">Overlined link</a></p>
  
  <p><a class="line-through" href="https://www.example.com">Link with line-through</a></p>
</body>
</html>

Explanation:

In this example, we define different text-decoration styles for links:

The default link style removes any text decoration using text-decoration: none.
When hovering over a link (a:hover), we set the text-decoration to underline to display an underline for the link text.
For links with the class dashed, we set text-decoration to underline dashed to display a dashed underline on hover.
For links with the class overline, we set text-decoration to overline to display an overline for the link text.
For links with the class line-through, we set text-decoration to line-through to display a line-through effect for the link text.

You can modify and combine these styles based on your design requirements. Additionally, you can use other values for text-decoration such as blink (to make the text blink) or none (to remove all text decoration).

How to change the the background color of links using CSS ?

Background Color of links: complete code in html

Here’s a complete HTML code example that demonstrates changing the background color of links using CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for styling links */
    a {
      color: blue;
      text-decoration: none;
    }
    
    a:hover {
      background-color: yellow;
    }
    
    a:visited {
      color: purple;
    }
    
    a:visited:hover {
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>Background Color of Links Example</h1>
  
  <p><a href="https://www.example.com">Default link</a></p>
  
  <p><a href="https://www.example.com">Hovered link with yellow background</a></p>
  
  <p><a href="https://www.example.com">Visited link with purple color</a></p>
  
  <p><a href="https://www.example.com">Visited link with orange background on hover</a></p>
</body>
</html>

Explanation:

1-In this example, we have added CSS rules to change the background color of links:

The a selector targets all <a> (anchor) elements and sets the link color to blue and removes the underline (text-decoration: none).
The a:hover selector targets the <a> elements when the mouse hovers over them and changes the background color to yellow.
The a:visited selector targets the visited links and changes the link color to purple.
The a:visited:hover selector targets the visited links when the mouse hovers over them and changes the background color to orange.

2-Inside the <body> section, we have paragraphs (<p>) with different link variations.

3-The links are defined using the <a> element with an href attribute specifying the URL.

4-The styles defined in the CSS rules will be applied accordingly.

Try to customize the CSS rules and adjust the background color and link colors to suit your design preferences.

How to create link button using CSS ?

Here’s a complete HTML code example that demonstrates link buttons using CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for link buttons */
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
    
    .button:hover {
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <h1>Link Buttons Example</h1>
  
  <a class="button" href="https://www.example.com">Button 1</a>
  
  <a class="button" href="https://www.example.com">Button 2</a>
</body>
</html>

Explanation:

1-In this example, we create link buttons using CSS styles:

The .button class targets the anchor (<a>) elements and applies styles to transform them into buttons.
The display: inline-block property makes the buttons appear inline with other elements, but they can still have their own width and height.
The padding property adds spacing around the button text, creating some visual padding.
The background-color property sets the background color of the buttons to blue.
The color property sets the text color of the buttons to white.
The text-decoration property is set to none to remove underlines from the buttons.
The border-radius property adds rounded corners to the buttons, giving them a more button-like appearance.
The .button:hover selector targets the buttons when the mouse hovers over them and changes the background color to dark blue.

2-Inside the <body> section, we have two link buttons with the text “Button 1” and “Button 2”.

3-They are defined using the <a> element with the class=”button” attribute to apply the styles defined in the CSS rules.

Try to customize the styles and adjust the padding, background color, text color, border-radius, and other properties according to your design preferences.

Application

Let’s create an example application where we use the concepts we’ve discussed so far: CSS links, text decoration, and link buttons.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules for styling links and link buttons */
    body {
      font-family: Arial, sans-serif;
    }
    
    a {
      color: blue;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
    
    .button:hover {
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Web Application</h1>
  
  <p>Check out these helpful resources:</p>
  
  <ul>
    <li><a href="https://www.example.com">Example Website</a></li>
    <li><a href="https://www.example.com">Documentation</a></li>
    <li><a href="https://www.example.com">Tutorials</a></li>
  </ul>
  
  <p>Sign up now to get started:</p>
  
  <a class="button" href="https://www.example.com/signup">Sign Up</a>
</body>
</html>

Explanation:

In this example, we have an application that promotes a web service or product.

Here’s a breakdown of what’s included:

1-The <head> section contains CSS styles for links and link buttons.

2-We set the font-family to Arial, sans-serif for the whole page.

3-Inside the <body> section, we have an <h1> heading that welcomes users to the application.

4-We provide a paragraph with some text and a list of helpful resources. 5-Each resource is a list item (<li>) containing a link (<a>) with an href attribute pointing to the relevant URL.

6-The links have the default blue color and no text decoration, but they will underline on hover.

7-After the resources, we have another paragraph prompting users to sign up for the application.

8-The “Sign Up” link is styled as a button using the .button class, and it has a blue background color and white text color. It will change to a darker blue background color on hover.

You can modify the content, URLs, and styles according to your application’s needs.

This example demonstrates how to apply CSS styles to links, create link buttons, and customize their appearance using various CSS properties.

Uses of CSS links: Applications

CSS links have various uses in web development. Here are a few common use cases with complete HTML code examples:

Linking External CSS File:

You can use CSS links to include an external CSS file in your HTML document.

This approach allows you to separate the styles from the HTML markup, making it easier to maintain and update styles across multiple web pages.

Here’s an example:

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

  <h1>Welcome to My Website</h1>




  <p>This is a paragraph with some text.</p>

</body>

</html>

In the above example, the <link> tag is used to link an external CSS file named “styles.css”. Make sure the CSS file is located in the same directory as the HTML file.

Styling Links:

CSS links can be used to style hyperlinks, giving them a different appearance compared to regular text. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      color: blue;
      text-decoration: none;
    }
    
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <p>This is a paragraph with a <a href="#">link</a>.</p>
</body>
</html>

In this example, the CSS rules are applied to the <a> (anchor) elements. The links have a blue color and no text decoration by default. On hover, the color changes to red, and an underline is added.

How To create Button Links ?

Creating Button Links:

CSS links can be transformed into button-like elements by applying styles such as background color, padding, and border-radius. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
    
    .button:hover {
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <a class="button" href="#">Button Link</a>
</body>
</html>

Explanation:

1-In this example, we define a CSS class .button that is applied to the <a> element.

2-The class adds styles to make the link appear as a button.

3-It has a blue background color, white text color, padding, and rounded corners.

4-On hover, the background color changes to a darker blue.

These examples illustrate some of the common use cases for CSS links in HTML documents. You can customize the styles and apply them to different elements as per your specific requirements.

Quiz with answers about this lesson

Here’s a multiple-choice quiz about CSS links, text decoration, and link buttons based on the lesson:

1-Which HTML element is used to include an external CSS file?

a) <script>

b) <style>

c) <link>

d) <css>

Answer: c) <link>

2-How can you remove the underline from a link?

a) Using the underline value for the text-decoration property

b) Using the none value for the text-decoration property

c) Using the remove value for the text-decoration property

d) Using the no-underline value for the text-decoration property

Answer: b) Using the none value for the text-decoration property

3-Which CSS pseudo-class is used to target a link when the mouse hovers over it?

a) :hover

b) :link

c) :active

d) :visited

Answer: a) :hover

4-How can you create a link button using CSS?

a) By adding the button class to the link element

b) By using the button element instead of the link element

c) By applying CSS styles to the link element

d) By using JavaScript to convert the link into a button

Answer: c) By applying CSS styles to the link element

5-Which CSS property is commonly used to change the background color of a link on hover?

a) color

b) text-decoration

c) background-color

d) border-color

Answer: c) background-color

6-What is the purpose of the rel attribute in the <link> tag when linking a CSS file?

a) It specifies the relationship between the HTML document and the linked resource.

b) It defines the location of the CSS file.

c) It sets the MIME type of the CSS file.

d) It indicates the file format of the CSS file.

Answer: a) It specifies the relationship between the HTML document and the linked resource.

7-Which CSS pseudo-class targets a link that has been visited by the user?

a) :hover

b) :link

c) :active

d) :visited

Answer: d) :visited

8-How can you style a link to have an underline only when the mouse hovers over it?

a) Apply the text-decoration: underline style to the :hover pseudo-class.

b) Apply the text-decoration: underline style to the :active pseudo-class.

c) Apply the text-decoration: none style to the :visited pseudo-class.

d) Apply the text-decoration: underline style to the :link pseudo-class.

Answer: a) Apply the text-decoration: underline style to the :hover pseudo-class.

9-Which CSS property is used to add rounded corners to a link button?

a) border-radius

b) background-color

c) text-decoration

d) color

Answer: a) border-radius

10-How can you include multiple CSS files in an HTML document?

a) Use separate <style> tags for each CSS file.

b) Use multiple <link> tags with different href attributes.

c) Use the @import rule within a single <style> tag.

d) Use the <script> tag to link CSS files.

Answer: b) Use multiple <link> tags with different href attributes.

11-What is the purpose of the text-decoration CSS property?

a) It changes the font style of the text.

b) It adjusts the spacing between letters in the text.

c) It controls the decoration applied to the text, such as underlines or line-through.

d) It sets the background color of the text.

Answer: c) It controls the decoration applied to the text, such as underlines or line-through.

12-Which CSS pseudo-class is used to target a link that is currently being clicked?

a) :hover

b) :link

c) :active

d) :visited

Answer: c) :active

13-How can you remove the default blue color of links?

a) Apply the color: inherit style to the link.

b) Apply the color: blue style to the link.

c) Apply the color: #0000FF style to the link.

d) Apply the color: none style to the link.

Answer: a) Apply the color: inherit style to the link.

14-What is the purpose of the display: inline-block property for link buttons?

a) It positions the button in the center of the page.

b) It adjusts the font size of the button.

c) It removes the underline from the button.

d) It allows the button to have its own width and height.

Answer: d) It allows the button to have its own width and height.

15-How can you target a specific link based on its class for styling?

a) a:link

b) a:hover

c) a.class

d) a#id

Answer: c) a.class

16-Which CSS property is commonly used to change the color of visited links?

a) color

b) text-decoration

c) background-color

d) border-color

Answer: a) color

17-How can you style a link to have a different appearance when it is both visited and hovered over?

a) Combine the :visited and :hover pseudo-classes.

b) Use the :active pseudo-class.

c) Apply different styles to the link using JavaScript.

d) It is not possible to style a link differently when it is both visited and hovered over.

Answer: a) Combine the :visited and :hover pseudo-classes.

18-What is the purpose of the border-radius CSS property?

a) It sets the width and height of an element.

b) It adjusts the spacing between elements.

c) It adds a border to an element.

d) It creates rounded corners for an element.

Answer: d) It creates rounded corners for an element.

19-How can you link to an external CSS file hosted on a different domain?

a) Use an absolute URL in the href attribute of the <link> tag.

b) Use a relative path in the href attribute of the <link> tag.

c) Use the src attribute instead of the href attribute.

d) It is not possible to link to an external CSS file hosted on a different domain.

Answer: a) Use an absolute URL in the href attribute of the <link> tag.

20-Which CSS property can be used to change the font family of the link text?

a) font-family

b) text-align

c) font-size

d) line-height

Answer: a) font-family

21-Which CSS property is used to control the spacing between letters in the text?

a) letter-spacing

b) word-spacing

c) line-height

d) text-indent

Answer: a) letter-spacing

22-How can you make a link open in a new browser tab or window?

a) Set the target attribute of the <a> element to _blank.

b) Apply the target style with the value of _blank.

c) Use the <newtab> element instead of the <a> element.

d) Apply the new-window class to the <a> element.

Answer: a) Set the target attribute of the <a> element to _blank.

23-What does the target=”_self” attribute value do for a link?

a) It opens the link in a new browser tab.

b) It opens the link in the same browser window or tab.

c) It specifies a custom target for the link.

d) It removes the default link behavior.

Answer: b) It opens the link in the same browser window or tab.

24-How can you create a link without an underline but with a dotted border below it?

a) Apply the text-decoration: underline style to the link.

b) Apply the border-bottom: 1px dotted style to the link.

c) Apply the text-decoration: none style to the link.

d) Apply the border-bottom: none style to the link.

Answer: b) Apply the border-bottom: 1px dotted style to the link.

25-What is the purpose of the :focus pseudo-class for links?

a) It targets a link when it is in focus, such as when it is selected by keyboard navigation.

b) It targets a link when the mouse hovers over it.

c) It targets a link that has already been visited.

d) It targets a link that is currently being clicked.

Answer: a) It targets a link when it is in focus, such as when it is selected by keyboard navigation.

CSS Tutorial

Curriculum

CSS Links, Text Decoration, and Link Buttons: A Complete Guide

CSS Links, Text Decoration, and Link Buttons

How to style Links in CSS ?

What are the four links States ?

How to apply different text-decoration styles for links in CSS?

Text Decoration and links

How to change the the background color of links using CSS ?

How to create link button using CSS ?

Application

Uses of CSS links: Applications

Linking External CSS File:

How To create Button Links ?

Creating Button Links:

Leave a Reply

Modal title