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:
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).
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.
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:
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
You can download the full source code of this example here: CSS Inline Style
