Home > Article > Web Front-end > How to display paragraph elements inline using CSS?
How to display paragraph elements inline using CSS?
- WBOYforward
- 2023-09-06 16:41:041290browse
CSS has internal styles and inline styles that can be used to display paragraph elements inline. CSS is a language used to style HTML and XML text. Changing the display properties of HTML elements is a typical CSS task. An element's display properties indicate how it should be rendered, such as block, inline, or inline-block. When displaying a paragraph element inline, you must modify the display property from its default block value to inline.
Here we will learn how to develop CSS code that displays paragraph elements inline.
grammar
<p style="display : inline">..write the paragraph...</p>
Paragraphs in HTML are represented by p tags. Display properties define how content flows.
An element set to display "inline" will appear as an inline-level box, which means it will flow within a line of text.
In contrast, a "block" element will fill the entire width of its parent container and add a new line of content below any existing content.
Titles, paragraphs, and div elements are examples of block-level elements, while links, span elements, and images are examples of inline elements.
Attributes used
The following properties used in the example are -
Color - Defines the color of the text.
background-color - Defines text as thin or thick.
display - The display attribute specifies the display behavior.
Example
In this example, we will start using the paragraph element to set up a few lines of text. To display a paragraph element inline, it uses the display property to set the inline value via inline CSS. Then style some elements, such as body, p, to attract user interaction on the web page.
<!DOCTYPE html>
<html>
<title>Display paragraph elements as inline using CSS</title>
<head>
</head>
<body style="background-color: powderblue;">
<center>
<h1>Rich Dad and Poor Dad</h1>
</center>
<p style="background-color:#a89032; color: white; font-style: italic; display: inline;">Rich
Dad Poor Dad, by Robert Kiyosaki, was initially published in 1997 and immediately became a must-read
for anybody interested in investment, money, or the global economy. The book has been translated into
dozens of languages and sold all over the world, becoming the best-selling personal finance book of all
time. Rich Dad Poor Dad's overriding theme is how to use money as a tool for wealth growth. It debunks
the idea that the wealthy are born wealthy, explains why your personal residence may not be an asset,
defines the distinction between an asset and a liability, and much more.
</p>
<p style="font-weight: bold; text-align: right; display: inline; color: darkgreen;">@tutorialspoint.com</p>
</body>
</html>
in conclusion
In the above output, we can see how to control the layout of text styles with the help of inline values in CSS display properties. It's a good idea to test variations of displaying paragraph elements as inline elements. To maintain flexibility in text placement, it is sometimes appropriate to change the displayed properties.
The above is the detailed content of How to display paragraph elements inline using CSS?. For more information, please follow other related articles on the PHP Chinese website!