Text

In HTML, text is usually placed inside elements like <p> for paragraphs, <h1> to <h6> for headings, and <span> for smaller sections or inline text. These elements help structure the text on a web page.

For our demo, I'll create an HTML page with a paragraph of text and a heading. Then, I'll use CSS to style them, changing things like font size, color, and alignment. Let's get started!

Here's an HTML and CSS example that demonstrates how to style text:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: navy;
    text-align: center;
}

p {
    color: green;
    font-size: 16px;
    text-align: justify;
}
</style>
</head>
<body>

<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text on the webpage. It's styled with CSS to make it look more interesting.
The text is green, and the font size is slightly larger than the default. This paragraph is also justified,
meaning the text is aligned evenly along both the left and right margins.</p>

</body>
</html>

In this code:

  • <h1>Welcome to My Webpage</h1> creates a heading. This is typically used for titles and is styled to be navy and centered.

  • <p>This is a paragraph...</p> is a paragraph of text. It's styled with a green color and a font size of 16 pixels. The text is justified, which means it's spread out so that each line has equal width, and the edges line up both on the left and right sides.

When you put this code in an HTML file and open it in a web browser, you'll see a navy-colored heading and a green paragraph, demonstrating how text can be structured and styled on a web page.

In Jux we have some other ways to think about h1 and p by using tokens.

To use a text element drag the element from the “elements” button from the topbar menu.

PreviousElementsNextDiv

Last updated