There are several ways to use CSS (Cascading Style Sheets) to enhance the look and functionality of your blog or static website. One of those ways is to use inline CSS. I use this method mainly on a temporary basis, when I’m not sure yet exactly how my styles will affect my web page, but I need to test out changes quickly. If I’m happy with how my inline styles look, then I’ll cut them out of the html code and paste them into an external style sheet file, which I link to from the html of my page.
If you really want to avoid the headaches that come with adding inline CSS to your website or blog, and then having to go into each bit of code individually (if you want to make any changes to your styles) – definitely link to an external file instead. That way you can make adjustments to your styles in one spot, and those changes will apply (or cascade) throughout your entire website.
A few ways to bring CSS into your website
To link to or “call” an external CSS file (style sheet), simply add the following line of code up near the top of your html code, inside the “head” section:
<link rel='stylesheet' id=’add-id-here’ href='call your external file here' type='text/css' media='all' />
Another way to use CSS is from inside separate “style” tags, added directly into your html page (but not embedded inside any other html tags). This is called “internal CSS” and is used for styling one webpage individually. Here is an example of how to do this:
Add your style code directly into the code of your page/blog post, inside the “head” tags:
<style>
h1 {color: green;}
a:link {text-decoration: none;
p {font-size: 18px;}
</style>
Again, as with the inline method, this method should be used sparingly and only when necessary.
Besides the potential maintenance nightmare inherent in the use of inline styles, there’s also the CSS hierarchy to consider. Whatever styles you code inline will override any others you have used. (This might be a key reason why some people use inline styles though?) Your web browser will first render styles from an external stylesheet file, then if you have any internal CSS, that takes precedence over the external CSS. And any inline styles you use will override both the external CSS file and internal CSS (if any of your classes or IDs are named exactly the same).
How and When to Use Inline CSS on Your Blog or Website
If you absolutely have to go the inline route, it is best to use it on inline html elements, such as “span” tags. This is because “span” is actually an inline element, as opposed to “div” which is a block element. Block elements force whatever content is inside of them to create a new line with a little bit of space above them (like a line break essentially), and they take up the full width of the space they’re in.
Whereas inline elements do not force your content onto a new line, and they only take up the space that is occupied by their enclosing tags.
That being said – inline CSS is often used inside “div” tags and will probably work fine on your page. Here is an example of how this might look:
Code example for adding inline CSS to a block element:
<div style="background-color:lightgray; color:brown; margin:15px; padding:10px;">
<p><strong>Using DIV Tags With Inline CSS</strong></p>
<p>Here is an example of how this would appear on your web page.</p>
</div>
And here is how the above code would appear on your page:
Using DIV Tags With Inline CSS
Here is an example of how this would appear on your web page.
Code example for adding inline CSS to an inline element:
<span style="background-color:lightgray; color:brown; margin:15px; padding:10px;">Here is an example of how this would appear on your web page.
</span>
And here is how the code just above would appear on your page:
Here is an example of how this would appear on your web page.
Whichever html tag or element you decide to add inline CSS to, make sure to only use one “style” declaration inside of each element.
For example…
This is correct:
<div style=”height:150px; width:300px; margin:20px;”>Content of your div container goes here.</div>
This is incorrect:
<div style=”height:150px; style=”width:300px;” style=”margin:20px;”>Content of your div container goes here.</div>
Here are a few additional bits of advice when dealing with inline CSS:
- Use a semicolon between the different styles
- Make sure not to include any spaces between the property value and the type of property (px, %, em, pt, etc.)
- Only close your quotes after the entire style declaration is done
- It is not necessary to add spaces in between styles but you can
- Place a semicolon at the very end (although your code might work without it)
- Remember that you should avoid using align=”center” because it is deprecated (old, not used anymore). Instead use “
text-align: center;“
When used sparingly and carefully, adding inline CSS to your website or blog can give you an added measure of control over its look, layout and functionality. There are SO many wonderful things you can do with CSS, with new ways of using it popping up all the time. Playing around with different colors, fonts, layouts and so forth is my favorite thing to experiment with when I create a new website. It is my favorite part of the web development process (but can be frustrating at times).
To begin learning how to use CSS to style text and make it stand out from the crowd (the crowd of words on a page that is), here is an article on Styling Text with CSS: Basic Effects.
One of the really fun things you can do with CSS is using it to make things move on the page! You can check out a few examples and code samples on our mini tutorial “CSS Animations: Creating CSS Hover Effects.”
Please let me know in the comments if you have used inline CSS, what your pain points have been, and whether your experience with it has been positive – or not so positive.
