Inline CSS is the technique to define the single element with the insert style sheets in an HTML document. We can add CSS in three approaches: Inline, Internal, and External.
It has the interactive and unique style to create a single HTML element; we can define the inline CSS on the style attribute.
Here is the basic syntax example with output:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a placeholder of heading</h1>
<p style="color:red;">This is a placeholder for a paragraph.</p>
</body>
</html>
Output:
Inline Style HTML
The major advantage of inline HTML is that it comes in handy and enables the multiple style attributes to an HTML tag with the defined CSS style of an element.
Example:
<p style="color: orange; font-size: 25px;">Here is my first paragraph.</p>
<p>Here is my second paragraph.</p>
Inline CSS in HTML
With Inline CSS, we can define the style attribute with an HTML element as per the below example.
We can also define inline CSS and integrate it into the style sheet. It helps us to override different CSS.
<element style="CSS property: value">
Here is an example of adding internal CSS to HTML with the help of a selector.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
selector {
CSS property: value;
}
</style>
</head>
Example 2: CSS Layout - display: inline-block
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Example 3: Using inline-block to Create Navigation Links
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
Example 4: CSS Combinators
Here, four types of CSS selectors can consist of one simple selector. We can involve a combinator between the simple selectors.
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
descendant selector (space)
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: orange;
}
</style>
</head>
<body>
<h2>Here is the sample of Descendant Selector</h2>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
child selector (>)
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: green;
}
</style>
</head>
<body>
<h2>Here is the sample of Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a defined element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
Output:
adjacent sibling selector (+)
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: Pink;
}
</style>
</head>
<body>
<h2>Here is the sample of Adjacent Sibling Selector</h2>
<p>The + selector is used to select or pick an element directly after another defined element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
Output:
General Sibling Selector (~)
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: violet;
}
</style>
</head>
<body>
<h2>Here is the sample of General Sibling Selector</h2>
<p>The general sibling selector (~) selects or picks every element of the next siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
Output:
CSS Inline Style
Here are the examples of CSS inline styles:
Example 1:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Example 2: For CSS Border
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 4px solid red;
}
</style>
</head>
<body>
<h1>Here is the heading</h1>
<p>Here is the paragraph 1.</p>
<p>Here is the paragraph 2.</p>
<p>Here is the paragraph 3.</p>
</body>
</html>
Output:
Example 3: CSS Margin
This sample code specifies the margin outside the border.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Here is the heading</h1>
<p>Here is the paragraph 1.</p>
<p>Here is the paragraph 2.</p>
<p>Here is the paragraph 3.</p>
<p>Here is the paragraph 4.</p>
</body>
</html>
Output:
Inline Style in React
For defining the style of an element using the inline style attribute, below are examples of a Javascript object.
Example 1: Insert an Object With the Styling Details
class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{color: "red"}}>This is the example of inline CSS using React Style!</h1>
<p>Please add a style!</p>
</div>
);
}
}
Example 2: JavaScript Object
Here, in this example, we can define the object with the styling details using the style attribute:
class TestHeader extends React.Component {
render() {
const Teststyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={Teststyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
Disadvantages of Inline CSS
- Adding inline CSS rules to each HTML element is time-consuming and gives messy results on the HTML page.
- Implementing multiple styling elements can affect the HTML page's size and download time.
- It provides different versions such as CSS, CSS 1, CSS 2, and CSS 3, which can be confusing for developers to make decisions about which version they need to refer to and can give the wrong result in the web browser.
- Fragmentation: It gives the browser an incompatibility issue, i.e., it may work with one browser and may not work on another type of browser.
- Lack of security.
Conclusion
We hope this article helped you understand Inline CSS. In this article, we discussed the various concepts of CSS Inline using several examples. This article will be helpful to professional developers from Java and .net backgrounds, application architectures, cloud specialists, testers, and other learners looking for various uses of HTML5 and different CSS.
Besides pursuing varied courses by Simplilearn, you can also sign up on our SkillUp platform, a Simplilearn initiative. This platform offers numerous free online courses to help with the basics of multiple programming languages, including HTML and CSS. You can also opt for our Full-Stack Web Development Certification Course to become a full-stack technologist and improve your career prospects.