Home » CSS » CSS Style Inline Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Style Inline Example

The aim of this example is to go through applying CSS properties inline inside html code. Inline styles are CSS styles that are applied to one element using the style attribute before closing the opening tag.

Inline styling is useful for applying a unique style to a single HTML element.

There are several advantages and disadvantages to it that we will discuss.

You may find inline styles being used together with separate css files to complete the page, or alone, the only styling method in the document.

Below we’ll see examples of the usage of inline styles to apply several CSS properties and you’ll see if it is worth using it or not in each case.

1. Basic Document Setup

Go ahead and create a new html document and add the basic sytnax (without the styling section) in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>Inline CSS Styling Example</title>
</head>
<body>

<!-- HTML BODY HERE -->

</body>
</html>

In the HTML body we will keep adding elements and style them in the same line.

2. How it works?

Basically, before closing any opening tag of an element you add the following syntax:

<tagname style="property:value">content</tagname> (where property and value refer to the same terms used in CSS)

And when more than one style property has to be applied you just add a semicolon like so:

<tagname style="property1:value1; property2:value2">content</tagname>

Now lets see a real example. Add a line of text in your html document:

<h1>This is my text</h1>

Now add some CSS styling using the style attribute:

<h1 style="color:blue; font-size:60px;">This is my text</h1>

Basically, this is identical to having this piece of code:

<style type="text/css">
h1 {
	color: blue;
	font-size: 60px;
}
</style>

And the result would be a blue text with a size of 60 pixels:

Inline Style First Look

Inline Style First Look

3. Cases and Examples

3.1 Image Example

Lets see an example of attaching an image to a html content:

<section style="background:url(image.jpg); width:390px; height:295px; font-size:25px; color:white;">Image Title</section>

So we declared an image url and gave it a width and height (otherwise the image will not diplay properly).

Inline Style - Image Example

Inline Style – Image Example

3.2 Text Example

The following example deals with the various text properties you could use as inline styles:

<p style="font-weight:bold; font-size:2em; color:#e47272; font-family:Arial;">How does this look like?</p>

Here, we had properties like font-weight, font-size, color, font-family to style text.

Style Inline - Text Example

Style Inline – Text Example

3.3 Content Box Example

You can have inline styles to divs containing several elements as well as to specific elements inside the div. Look at the code below:

<div style="border: 0.1em solid black; box-shadow: 0.1em 0.1em 0.2em #ccc; width: 420px; padding: 0em 1em 1em 1em; background-color: #feff88;">
	<h3 style="font-family:Titillium;">Heading Here</h3>
	<p style="font-family:Arial;">Lorem ipsum dolor sit amet</p>
	<img style="box-shadow: 0.1em 0.1em 0.2em #ccc;" src="image1.jpg">
</div>

The result would be pretty stunning:

Inline Style - Content Box

Inline Style – Content Box

4. Advantages and Disadvantages of using Inline Style

4.1 Advantages

Because of the cascade, inline styles have the highest precedence. That means they are going to be applied no matter what. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves. Inline styles are easy and quick to add. You don’t need to create a whole new document (as with external style sheets) or edit a new element in the head of your document (as with internal style sheets). You just add the style attribute.

4.2 Disadvantages

Because they are the most specific in the cascade, they can over-ride things you didn’t intend them to. Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds a lot of maintenance & design work. It’s impossible to style pseudo-elements and -classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that’s what the style attribute is attached to.

5. Conclusion

To conlcude, we can state that using an inline style means that you largely lose control from stylesheets, meaning that if you decide to restyle your pages, you will be unable to restyle that part. It is generally not a good idea to use inline style attributes. They are best suited to scripting that creates animation effects, where there is a need to apply certain styles (usually positioning) irrespective of the style. Try using it and come down to your own opinion to prove this.

6. Download

Download
You can download the full source code of this example here: CSS Inline Style
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments