I feel like we’ve been neglecting Inline CSS… We’ve talked about classes and id’s and all sorts of good stuff but we’ve left good old Inline CSS out of the equation! So we’re going to talk all about Inline CSS today!

So as we covered in the Basics of CSS there are three different types of CSS that we can use. If you don’t know a whole lot about CSS then you can still read on!

  1. External Style Sheets
  2. Internal Style Sheets
  3. Inline CSS

If we recall, an External Style Sheet is a separate document called something like “mystyle.css” and it is something that we need to link the HTML document to.
An Internal Style Sheet is when CSS is within the head tags of an HTML document and Inline CSS is CSS that is within than HTML element. CSS is inserted into an HTML element via the style attribute. It will look something like the following:

1
2
3

<tag attribute="CSS">content</tag>
<span style="color:#ff0000;">Red text</span>

Inline CSS is a blend of HTML and CSS, which means the rules for both languages applies! We need to write proper (X)HTML and proper CSS. If you are unfamiliar with the syntax rules for either of these then click here for XHTML OR here for CSS.

How exactly can we use Inline CSS?

The answer rests with how many properties you know how to use. You can use advanced positioning methods such as…

Note: if you aren’t familiar with these properties, needn’t worry. These are advanced techniques of positioning and they will be covered in later tutorials. This is purely for an exploratory purpose..

1
2
3
4
5
6
7

<a href="home.php">
<img src="images/home.png" height="50" width="100" alt="Home Page"
style="position:absolute; top:15px; bottom: 35px;" />
</a>

So we can have insane positioning properties and Inline CSS with a dozen or so properties if we wanted. It all really depends on what you need/want to accomplish. Keep in mind that most of these tasks can be accomplished by using ID or class elements so Inline CSS is usually a last resort. Also, remember that ORDER COUNTS! External Style Sheets < Internal Style Sheets < Inline CSS. So External Style Sheets have the last priority when applying styles. Internal Style Sheets will override External Style Sheets and Inline CSS will override both External and Internal Style Sheets.

One excellent example of using Inline CSS is if you have a blog such as wordpress or blogger! If you’re writing posts then you’re using HTML and CSS whether you are aware of it or not! If you’re using wordpress and you’re using the visual tab for new posts and you just want to change the color of some text then you’re using Inline CSS (check the HTML tab to see)! Let’s say, for instance, you wish to change a certain amount of text to pure white. You could write the following:

1
2
3

<p style="color:white;">White text</p>
<span style="color:#ffffff;">White text</span>

Remember that “P” stands for “Paragraph” and “span” doesn’t do anything unless you set it otherwise… So pure white text would look like this entire sentence!

1
2
3

<span style="color:#ffffff;">This was used to make
pure white text</span>

Inline CSS and Links

What if you want to have a unique link on our page for some reason? Then we could easily use Inline CSS of course! How about this unique link?

Even though that link is extremely overdone, we can see how it differs from the other links on the page. Let’s examine this link we created.

1
2
3
4
5

<a href="http://atomicpages.net/blog/2009/10/25/all-about-inline-css/"
target="_blank" style="font-weight:bold; text-decoration:overline;
font-size:16pt; color:blue;">this unique link</a>?

So we have our link and we can see it is linking to a page (this post actually) and it is opening a new window OR tab (depending on your web browser settings) via target=”_blank”. Then we have our Inline CSS that is making the font bold, overline, large, and then finally blue in that order.

So we can see there are multiple ways we can use Inline CSS and use it effectively. Generally, Inline CSS is used for one-time occasions such as that fancy link we created. Perhaps you need that image to be up a pixel higher and you don’t want to impact everything else. Example:

1
2
3
4
5
6
7

<div id="img">
<img src="images/img.gif" height="16" width="16" alt="Img"
style="position:relative; bottom:1px;" />
</div>

This will move this one particular image up by 1 pixel AFTER applying the id=”img” properties in the External Style Sheet OR Internal Style Sheet (remember order). It would be wise to keep the use of Inline CSS to a minimum and do as much as you can in an External or Internal Style Sheet; however, don’t be afraid to use it if you’re in a situation that calls for it! All about Inline CSS.