Using In-Line Styles

As you may know if you’ve been reading here for a bit, I provide lots of pre-made Posting Classes & Elements for you so you can style and format your content in many ways without making you delve into the CSS, or even use the USERS_CSS file I made for you. That said, though, it doesn’t mean you’ll not want or need additional styles. If it’s something you’ll use over and over again by all means put it in the USERS_CSS file, but if not, in-line styles may prove to be the perfect solution.

By in-line styles I do not mean using junk like font tags and what not. Nor do I mean adding border="0" to anything. Those aren’t in-line styles. These are attributes and only certain attribute can legally be used. One that can be used is the style attribute.

The “style” attribute can be used for adding proper CSS style properties to any element or object and it will override any conflicting styles (the style that is closest to that being styled will win out. Case in point: You may or may not know at this point in your reading about this theme that you can take a styled elements and by adding another class to it you can change the look for that single occurrence. This class addition overrides the default styling for that existing class or element.

I’ll use the strong element to show you what I mean. It is written like this, <strong>Strong emphasis text goes here!</strong>, and with this theme it’ll look like this: Strong emphasis text goes here! Now if we add the highlight class, for example, we can make it the highlight color (#669900 or a shade of green in this case). It would be written like this, <strong class="highlight">Strong emphasis text goes here!</strong>, and the resulting output would look like this: Strong emphasis text goes here!.

Well, there is another way. Let’s say you want that text to be a shade of blue. I’ll use #009999 in this example. Well, unless you want to change the entire highlight class to this shade of blue in the USERS_MODS file, you will have to either create a “blue” class, or if this is going to be a single usage, just put an in-line style attribute in the element and set its properties exactly as you would for any CSS entry. Like this: <strong style="color:#009999;">Strong emphasis text goes here!</strong>. The output will be like this: Strong emphasis text goes here!.

You can do this with just about anything. Need more CSS information? This favorite resource of mine, Web Design Group CSS Properties, may help a lot.

Now you can have even more fun. Do, however, validate your CSS after adding in-line styles to ensure your site is still legal. Don’t know how to validate? This entry on “Page Validation” will help.


Sorry. Comments are closed.

|Top | Content|


Blog Functions


Important: This theme requires configuration! Read Instructions.

Get Download Link

SeaBeast theme has been downloaded 8306 times.


This file, USERS_FUNCTION, is yours for adding such blog add-ons as flickr, Skype, and other non-WP goodies. Do try to keep items added to this section at around 120 pixels or less in width to prevent the sidebar from slipping in IE on 800x600 resolution monitors. Need to add CSS styles for items in this box? Easy, use the USERS_CSS file to do so. Then validate!

  • Blog Icons

    • Green-Beast.com
    • WordPress Site
    • SeaBeast Theme Demo

Blogger’s FarBar

This file, USERS_FARBAR, is yours for whatever you wish. Text in simple paragraphs, <p></p> lists, whatever. This is a liquid-width column. That said, you should to keep whatever — fixed-width item — below 120 pixels wide. Again, that concerns fixed-width items, self-forming, liquid items like text in paragraphs will adjust its own width. If you must place a slighter wider item, you can use the USERS_FUNCTION or USERS_SIDEBAR file to do so, but do note that that too should remain thin at only 162 pixels as it is a fixed-width column.

Added Headings!

You can also add headings in these user files. As many as you like. On and on she goes, where she stops. nobody knows! Do remember, though, in these file you have to use proper XHTML. Of course, this content can serve as example to you. Need even more help? Well, professional help is available.

|Top | FarBar|



Attention: This is the end of the usable page!
The images below are preloaded standbys only.
This is helpful to those with slower Internet connections.