XQA
Back to Python
2026-04-125 min read

Style HR (Python Programming)

Learn Style HR (Python Programming) step by step with clear examples and exercises.

Lesson Title: Style HR Element with CSS (Python Programming)

Why This Matters

In web development, the appearance of a website plays a crucial role in attracting and retaining users. One essential aspect is styling HTML elements using CSS. In this lesson, we will focus on styling the HR element, which is used to visually separate content on a webpage. Understanding how to style the HR element can help you create more visually appealing and user-friendly websites.

By learning how to manipulate the appearance of the HR element using CSS, you'll gain valuable skills that can be applied to various web development projects. This lesson will also serve as a foundation for understanding other HTML elements and their styling properties.

Prerequisites

Before diving into the core concept, it's essential that you have a basic understanding of:

  1. HTML (Hypertext Markup Language)
  2. CSS (Cascading Style Sheets)
  3. Python (Programming language)
  • Familiarity with HTML and CSS is crucial to styling the HR element effectively. You should understand how to structure HTML documents, create basic layouts, and apply styles using CSS.
  • As for Python, you'll use it to generate the HTML and CSS code dynamically, making it easier to create multiple styles or automate the process of styling HR elements.

Core Concept

The HR Element in HTML

The `` or horizontal rule element is an inline HTML element that creates a thematic line on the webpage to separate content. By default, it appears as a solid line with a width of 80%, but its appearance can be customized using CSS.

Styling HR Element with CSS

To style the `` element using CSS, you need to select the element and apply styles such as color, height, border-style, and more. Here's a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
hr {
color: blue;
height: 2px;
border-style: dashed;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<hr>
<p>Welcome to my web page! This HR element is styled with CSS.</p>
</body>
</html>

In this example, the `` element is styled with a blue color, a height of 2px, and a dashed border-style. You can customize these properties to achieve your desired look.

Important CSS Properties for HR Element

  1. color: Changes the color of the horizontal line.
  2. height: Sets the thickness of the horizontal line.
  3. border-style: Determines the style of the border, such as solid, dashed, dotted, or double.
  4. margin: Adds space around the HR element, which can help separate it from surrounding content.
  5. width: Defines the width of the horizontal line. By default, it's set to 80%, but you can adjust it as needed.

Worked Example

Let's create a simple webpage that uses an HR element styled with CSS:

  1. First, create a new file called index.html and paste the following code inside it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
hr {
color: purple;
height: 3px;
border-style: solid;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<hr>
<p>Welcome to my web page! This HR element is styled with CSS.</p>
<h2>Another Section</h2>
<hr>
<p>Here's another section separated by an HR element.</p>
</body>
</html>
  1. Save the file and open it in your web browser. You should see a webpage with a purple, solid, horizontal line separating the title from the content, and another horizontal line separating "Another Section" from its content.

Common Mistakes

1. Forgetting to close the `` tag

Always remember to close the ` tag by adding `. Failing to do so will cause an error in your HTML document.

2. Not specifying CSS properties correctly

Ensure that you are using valid CSS property names and values when styling the HR element. For example, use height instead of heigth, and px for pixels, not pixels.

Common Mistakes (CONT'D)

3. Overlooking important properties

When styling an HR element, don't forget to consider essential properties like color, height, border-style, margin, and width. These properties will help you create visually appealing separators for your web content.

Practice Questions

  1. Style an HR element with a red color, a height of 5px, and a dotted border-style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
hr {
color: red;
height: 5px;
border-style: dotted;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<hr>
<p>This is some content.</p>
</body>
</html>
  1. Create a webpage that has two horizontal lines separated by some content. The first line should be solid, blue, and have a height of 4px, while the second line should be dashed, green, and have a height of 2px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
hr#first {
color: blue;
height: 4px;
border-style: solid;
}

hr#second {
color: green;
height: 2px;
border-style: dashed;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<hr id="first">
<p>Some content separating the two HR elements.</p>
<hr id="second">
</body>
</html>

FAQ

Q1: Can I style an HR element using an external CSS file?

A1: Yes, you can apply styles to the HR element by linking an external CSS file in your HTML document. To do this, add a ` tag inside the ` section of your HTML file that points to the CSS file.

Q2: Can I style individual HR elements differently?

A2: Yes, you can style each HR element uniquely by applying classes or IDs to them and targeting those specific elements in your CSS.

FAQ (CONT'D)

Q3: How do I create a horizontal line with no space around it?

A3: To remove the space around an HR element, you can set the margin property to 0 or use negative values for top and bottom margins while maintaining a positive value for the left and right margins. This will push the content closer to the HR element without affecting its alignment.

Q4: How do I center an HR element horizontally on the page?

A4: To center an HR element horizontally, you can use CSS properties like text-align or margin: auto;. These properties will adjust the horizontal position of the HR element according to the parent container's width.

Style HR (Python Programming) | Python | XQA Learn