This post focuses on examples of inline styles, while the previous post focuses on defining and understanding CSS styles.

An inline style affects only one HTML element. To apply inline styles, type style=” within the start tag of the HTML element that you want to format. Add your style rule. If your rule has more than one declaration, separate each one with a semicolon. Type the final quotation mark. Be careful not to confuse the equals sign with the colon. Note that styles applied inline take precedence over all other styles unless a conflicting style elsewhere is marked with !important. If you are only using inline styles, in your HTML emails for example, you won’t be using styles elsewhere.

Inline Styles for Text

This is a paragraph with font Verdana and color red.

<p style="font-family: Verdana; color: red">This is...</p>

A heading (h4) with background LightSlateGrey , white text, centered and padding.

<h4 style="color: white; background-color: LightSlateGrey; text-align: center; padding: 16px">A heading...</h4>

This is a paragraph with an inline styles. Here we are using borders. The code I used is shown below. This one has a ridge border. There are several border styles: dotted, dashed, double, ridge, groove, inset and outset.

<p style="padding: 15px; border-width: 12px; border-style: ridge; border-color: orange">This is a paragraph with...</p>

This has a groove border. I set the colour using RGB. border-color: rgb(120, 230, 208). For fun, get some other colors that you can use with this colour, if you like it. http://rgb.to/rgb/120,230,208 Scroll down to find complementary colours for this colour.

<div style="background-image: url(https://begincodingnow.com/wp-content/uploads/2016/10/wooden-background-image-150x150.jpg)">
<p style="color: white">This is a paragraph that has...</p>

There are two primary ways to set the font size for the text: set the pixel size or you can have the size be relative to the element’s parent font size by using percentage, em or rem values.

Font size is 20px. On most systems the default is 16px. I was able to change the font size of the text ’16 px’ with the span tag. The code is shown below. Here is some text at 14 pixels.

<p style="font-size: 20px">Font size... <span style="font-size: 16px">16px</span> ... </p>

You can change the font some of specific words within a paragraph by using the span tag with inline styles. Here is some examples. 16 pixels 20 pixels 30 pixels 1.4em. Back to the default. I used the span tag as shown below.

<p>You can change... <span style="font-size: 30 pixels</span> ...</p>

sans-serif font

Geneva font

Tahoma font

Arial font

Helvetica font

Sans-Serif font

Calibri font

times font

courier font

Below are couple of popular web fonts that don’t work on this site. I just specified the font and did not provide an alternative.

Futura font

Proxima Nova font

Not all systems have all fonts. Because of this you can specify three fonts in your style. The first font is the one you really want, the next font is an alternative that is similar and the third font should be a generic family. Here are some examples of generic families: “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”. Below is an example of inline styling a paragraph using three font options. If the browser (or device) cannot use the first font it tries to use the second font. If not it will try the third font you list. If a font name contains white-space, it must be quoted. Single quotes must be used when using the “style” attribute in HTML.

There are a limited list of fonts to choose from that both OS X and Windows have by default: Arial, Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman and Verdana. All systems may not render these fonts in exactly the same way, but you can be confident that they will display. In WordPress you can expand your list of available fonts by using web fonts. wpbeginner.com has an article on How to Add Custom Fonts in WordPress.

<p style="font-family: Geneva, Tahoma, sans-serif">A list of fonts is known as a font stack.</p>

MailChimp, an on-line HTML email service only provides you with the following list of fonts when you are creating emails. They have chosen this list because these are the fonts that are most common to most computers and mobile devices.

Here are some other stylings you could use:

font-weight: normal
font-weight: bold
font-style: italic
font-style: normal

There is a previous post called HTML Styles that has a few more similar examples of styling your HTML content.

A Word About HTML Email

In the world of HTML emails, inline styles become very important. When styling web pages inline styles are the least-preferred way of the three ways of styling. The most-preferred way is external style sheets, followed by embedded style sheets followed by inline styles. CSS is not supported in emails. For this reason, our styling needs to use inline styles.

This is not the only concern with HTML email. Consider the article over at MailChimp called Limitations of HTML Email. At the bottom of that article there a couple more links to good articles at MailChimp.