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. Inline styles are easy and quick to add.
HOW Inline CSS 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.
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>Example for Inline CSS</h1>
Now add some CSS styling using the style attribute:
<h1 style="text-decoration:underline;color:#30F;"align="center">Example for Inline CSS</h1>
Disadvantages of Inline CSS:
We cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not stored in a single place.
Example for Inline CSS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline css</title>
</head>
<body bgcolor="#CCFF66">
<h1 style="text-decoration:underline;color:#30F;"align="center">Example for Inline CSS</h1>
<p style="font-family:Arial, Helvetica, sans-serif; align:left; color:#F00;">Cascading Style Sheet is a style language that defines layout of HTML documents.CSS properties such as background, border, font, float, display, margin, opacity, padding, text-align, vertical-align, position, color etc.</p>
<h2 align="left" style="color:#C0C;text-decoration:underline;">Image affected with styles</h2>
<img src="/images/inline-example.png" style="border:3px solid #03F; width:400px; height:300px;
margin-left:10px;"/>
</body>
</html></code)OUTPUT for Inline-CSS:
