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 make content more readable. This can easily be accomplished using HTML and CSS, but it might seem daunting at first.
👏👏 I made it to 100k 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 on Instagram yet?💪
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.
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 a header. We will also need a paragraph tag to hold the text together. Let's break down the HTML code step by step:
1. Head Section (<head>)
<title>Split Text</title>: Sets the title of the webpage.<meta charset="UTF-8">: Defines the character encoding as UTF-8.<meta name="viewport" content="width=device-width">: Makes the page responsive for different screen sizes.<link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) for styling.
2.
Body Section (<body>)
<div class="container">: A wrapper that holds all content.<div class="text-box">: A div containing two<h1>elements with the text "100K FOLLOWERS".-
Why two
<h1>elements?- This might be for a split text animation, where one text layer moves differently from the other.
-
Why two
-
<p>THANK<span> YOU 🙂</span></p>:- Displays "THANK YOU 🙂" with "YOU
🙂" wrapped inside a
<span>. - This could be used for styling effects (e.g., color change, animation, or font modifications).
- Displays "THANK YOU 🙂" with "YOU
🙂" wrapped inside a
After creating the files, just paste the following codes into your file. Remember that you must save a file with the .html extension.
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. Here’s a breakdown:
1. Importing Google Font
@import url('https://fonts.googleapis.com/css?family=Kanit:100,700');- Loads the "Kanit" font from Google Fonts.
- Uses two font weights: 100 (thin) and 700 (bold).
2. Universal Styling
*,
*:after,
*:before {
box-sizing: border-box;
}- Ensures consistent box sizing across all elements.
- *:after and *:before apply this rule to pseudo-elements too.
3. Body Styling
body {
font-family: 'Kanit', sans-serif;
background-color: #1a1a1a;
}- Uses the "Kanit" font.
- Sets the background color to dark gray (#1a1a1a).
4. Container Styling
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}- The container takes up the full screen.
- Uses flexbox to center content vertically and horizontally.
5. Split Text Effect
.text-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}- Centers the h1 elements inside it.
h1 {
font-size: 4vw;
font-weight: 900;
background-color: #f6a9bd;
color: #1a1a1a;
display: block;
padding: 0.3em;
}- The first h1 is the main text.
- Font size is 4vw, meaning it scales with the viewport width.
- Text color: Dark (#1a1a1a).
- Background color: Light pink (#f6a9bd).
h1:nth-child(2) {
position: absolute;
background-color: #1a1a1a;
color: #f6a9bd;
clip-path: inset(-1% -1% 50% -1%);
}- The second h1 sits on top of the first one.
- Uses clip-path to cut the bottom half, making it look like a split effect.
- Inverted colors to create the illusion of text being "cut."
6. Paragraph Styling
p {
font-weight: 900;
text-align: center;
background-color: #f6a9bd;
color: #1a1a1a;
}- The p element has a bold font and centered text.
- Background color: Light pink (#f6a9bd).
- Text color: Dark (#1a1a1a).
p span {
background-color: #1a1a1a;
color: #f6a9bd;
}- The span inside the paragraph has reversed colors to create a highlight effect.
@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.
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 😊
