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.
Table of Contents
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.
Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js LibraryStep 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:
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 😊
