Text Decoration
Exercise
- In the "index.html" file, replace the code with the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>Text Decoration</h1> <div> <a href="https://www.google.com" target="_blank">Default Decoration Link</a> </div> <div> <a href="https://www.google.com" target="_blank" class="underline">Underline Decoration Link</a> </div> <div> <a href="https://www.google.com" target="_blank" class="no-underline">No Underline Link</a> </div> <p>Default paragraph</p> <p class="underline">Underline paragraph</p> <p class="cross-out">Crossed out paragraph</p> </body> </html>
- Save.
- If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
- In the "styles.css" file, replace the code with the following:
.underline { text-decoration: underline; } .no-underline { text-decoration: none; } .cross-out { text-decoration: line-through; }
- Save.
- In the browser, you should see the following:
Code Walkthrough and Explanation
text-decoration
In CSS, text-decoration
is a property that allows you to add visual effects to text. It can be
used to
add underlines, overlines, line-throughs, and more to text. The most common use of text-decoration
is to
underline links, which is the default behavior of most web browsers.
Experiment with the Code
- Try underlining the
h1
element.
Video and Code References
Questions? Subscribe and ask in the video comments: