CSS: How to Create a Basic Inline Style


One of the easiest ways to change the way a specific <div> <span> or paragraph tag’s looks on your web site is to change the style by doing it “inline”. Inline refers to editing the code directly in the line of line of the HTML, instead of updating an external style sheet, or a style sheet that is defined in the header of the page. This is something that I do not usually recommend, however there are instances that require this on the fly. An inline style will override a style that has already been established in the external style sheet or the header. One good example of this, is if you need to adjust the height of a specific <div> however do not need to update the style sheet. For example, you have an frame for an image that needs to be in a containing <div> that is 400 pixels tall.

In this example, we will simply define the height of a div with inline style.

&lt;div class="someDiv" style="height: 400px"&gt;

The “style” parameter, will begin the style attribute. After the quote marks, you can use any CSS value here, and as many as you like separated by a semi colon. Below, we will use multiple attributes.

&lt;div style="font-size: 24px; font-weight: bold; color: red;"&gt;Some Words You Have Written&lt;/div&gt;

Some Words You Have Written

As you can see it is very easy to add an inline style, just make sure that you do not make a habit of this, however use it when you need to.

Bookmark and Share

Tags: , , , , , , , , ,

Leave a Reply

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 21 bad guys.