Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display paragraph elements as inline using CSS?
CSS has internal and inline styles that can be used to display the paragraph element in an inline manner. CSS is a language used for styling the HTML and XML texts. Changing the display property of an HTML element is a typical CSS job. The display attribute of an element indicates how it should be presented, such as block, inline, or inline-block. When displaying a paragraph element inline, the display property must be modified from its default block value to inline.
Here we are going to learn how to develop a css code that will display the paragraph elements as inline.
Syntax
<p style="display : inline">..write the paragraph...</p>
The paragraph in HTML is represented by p tag. The display attribute defines how the content flows.
An element that is set to display "inline" will be displayed 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.
Headings, paragraphs, and div elements are examples of block-level elements while links, span elements, and images are examples of inline elements.
Properties Used
The following properties used in the example are −
color − Define the color of the text.
background-color − Define the text to be thin or thick.
display − The display property specifies the display behavior.
Example
In this example, we will start using the paragraph elements to set a few lines of text. To display the paragraph element as inline it will use the property of display to set the value inline using inline CSS. Then styling some elements i.e. body, p that engage the user interaction on the webpage.
<!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>
Conclusion
In the above output, we can see how the layout of text style is controlled with the help of inline value in the display properties of CSS. This is a good idea to test the changes of the display paragraph element as inline. To maintain the flexibility of text position, sometimes it is right to change the property of the display.
2K+ Views
