How to Split Text Using HTML and CSS?

Dividing text with CSS is easy! Our comprehensive guide for beginners will show you how to split text and create a visually appealing text layout.

Join us on Telegram

50k followers - thank you how to split text using html and css.png

Read Also

Pure CSS Radio Button Using HTML and CSS

Splitting text is one of the most basic techniques for anyone who is trying to make their website more interesting or to make content more readable. This can easily be accomplished using HTML and CSS, but it might seem daunting at first.

👏👏 I made it to 50k followers and it feels awesome! I’m so grateful to you all for always supporting me, sharing my content and being a part of my journey.

Have you followed me yet on Instagram?💪

If you would like to get updates about my new projects and all other fun and exciting things, please follow me on Instagram.

Follow me here: @codewithfaraz

Let's start making an amazing splitting text using HTML, and CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

First, we will start by creating a basic HTML document. We will need a container for the text, as well as header. We will also need a paragraph tag to hold the text together

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Split Text</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="text-box">
        <h1>50K FOLLOWERS</h1>
        <h1>50K FOLLOWERS</h1>
      </div>
        <p>THANK<span> YOU 🙂</span></p>
      </div>
    </div>
  </body>
</html>

Read Also

CSS Loaders: Creating Squid Game-Inspired Animations Using HTML and CSS

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to split the text. We will also add some clip-path and position properties to ensure that everything looks correct.

This will give our text an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Finally, we will link CSS files into HTML so that we can see the final result.

@import url('https://fonts.googleapis.com/css?family=Kanit:100,700');

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: 'Kanit', sans-serif;
  background-color: #1a1a1a;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.text-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 4vw;
  font-weight: 900;
  background-color: #f6a9bd;
  color: #1a1a1a;
  display: block;
  padding: 0.3em;
}

h1:nth-child(2) {
  position: absolute;
  background-color: #1a1a1a;
  color: #f6a9bd;
  clip-path: inset(-1% -1% 50% -1%);
}

p {
  font-weight: 900;
  text-align: center;
  background-color: #f6a9bd;
  color: #1a1a1a;
}

p span {
  background-color: #1a1a1a;
  color: #f6a9bd;
}

Final Output:

50k followers - thank you how to split text using html and css.gif

Read Also

Create a Responsive Blog Card Grid with HTML and CSS

Conclusion:

Splitting text using HTML and CSS is a great way to improve the visual appearance of a website. By using the <h1> tag and <div> tag in HTML, you can split text into multiple sections, while using CSS can help you create a better text layout and enhance the readability of your content. By following these simple steps, you can create visually appealing web pages that are easy to read and navigate.

In conclusion, we hope that this article has provided you with a clear and concise guide on how to split text using HTML and CSS. Remember to keep it simple and readable, and experiment with different techniques to find the one that works best for your website. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: split text, html, css, how to split text in html, dividing text with css, using css to split text, creating text columns in html, text layout with css

End of the article